@lumx/react 3.10.1-alpha.6 → 3.10.1-alpha.8

package/index.js

@@ -1,8 +1,29 @@
 import * as React from 'react';
 import React__default, { useState, useEffect, useMemo, useRef, Children, isValidElement, cloneElement, useLayoutEffect, useCallback, Fragment, createContext, useContext, useReducer } from 'react';
+import isBoolean from 'lodash/isBoolean';
 import isEmpty from 'lodash/isEmpty';
+import kebabCase from 'lodash/kebabCase';
+import noop from 'lodash/noop';
 import ReactDOM, { createPortal } from 'react-dom';
-import { C as ClickAwayProvider, i as isEmpty$1 } from './_internal/index.js';
+import last from 'lodash/last';
+import pull from 'lodash/pull';
+import get from 'lodash/get';
+import concat from 'lodash/concat';
+import dropRight from 'lodash/dropRight';
+import partition from 'lodash/partition';
+import reduce from 'lodash/reduce';
+import { ClickAwayProvider } from './utils/index.js';
+import memoize from 'lodash/memoize';
+import isFunction from 'lodash/isFunction';
+import castArray from 'lodash/castArray';
+import pick from 'lodash/pick';
+import isInteger from 'lodash/isInteger';
+import throttle from 'lodash/throttle';
+import range from 'lodash/range';
+import chunk from 'lodash/chunk';
+import take from 'lodash/take';
+import isObject from 'lodash/isObject';
+import set from 'lodash/set';
 
 function ownKeys(e, r) {
   var t = Object.keys(e);
@@ -316,11 +337,6 @@ const mdiAlert='M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2z';const mdiAlertCircle='M
 
 const _excluded$1t = ["prefix"];
 
-/** Transform camelCase to kebab-case */
-function camelToKebabCase(str) {
-  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-}
-
 /**
  * Enhance isEmpty method to also works with numbers.
  *
@@ -348,18 +364,18 @@ function getBasicClass(_ref) {
     type,
     value
   } = _ref;
-  if (typeof value === 'boolean') {
+  if (isBoolean(value)) {
     if (!value) {
       // False value should not return a class.
       return '';
     }
     const booleanPrefixes = ['has', 'is'];
     if (booleanPrefixes.some(booleanPrefix => type.toString().startsWith(booleanPrefix))) {
-      return `${prefix}--${camelToKebabCase(type)}`;
+      return `${prefix}--${kebabCase(type)}`;
     }
-    return `${prefix}--is-${camelToKebabCase(type)}`;
+    return `${prefix}--is-${kebabCase(type)}`;
   }
-  return `${prefix}--${camelToKebabCase(type)}-${value}`;
+  return `${prefix}--${kebabCase(type)}-${value}`;
 }
 
 /**
@@ -385,7 +401,7 @@ function handleBasicClasses(_ref2) {
         prefix,
         type: prop,
         value: props[prop]
-      })] = typeof props[prop] === 'boolean' ? props[prop] : !_isEmpty(props[prop]);
+      })] = isBoolean(props[prop]) ? props[prop] : !_isEmpty(props[prop]);
     });
   }
   return classNames(prefix, otherClasses);
@@ -403,8 +419,8 @@ function isPassiveEventAvailable() {
         supportsPassiveOption = true;
       }
     });
-    window.addEventListener('testPassiveEventSupport', () => {}, opts);
-    window.removeEventListener('testPassiveEventSupport', () => {}, opts);
+    window.addEventListener('testPassiveEventSupport', noop, opts);
+    window.removeEventListener('testPassiveEventSupport', noop, opts);
   } catch (e) {
     // ignored
   }
@@ -516,6 +532,58 @@ function onButtonPressed(handler) {
   };
 }
 
+/**
+ * The prefix to use for the CSS classes.
+ */
+const CSS_PREFIX = 'lumx';
+
+/**
+ * Animation duration constants. Take into consideration that if you change one of these variables,
+ * you need to update their scss counterpart as well
+ */
+const DIALOG_TRANSITION_DURATION = 400;
+const EXPANSION_PANEL_TRANSITION_DURATION = 400;
+const NOTIFICATION_TRANSITION_DURATION = 200;
+
+/**
+ * Delay on hover after which we open or close the tooltip.
+ * Only applies to devices supporting pointer hover.
+ */
+const TOOLTIP_HOVER_DELAY = {
+  open: 500,
+  close: 500
+};
+
+/**
+ * Delay on long press after which we open or close the tooltip.
+ * Only applies to devices not supporting pointer hover.
+ */
+const TOOLTIP_LONG_PRESS_DELAY = {
+  open: 250,
+  close: 3000
+};
+
+// See https://regex101.com/r/YjS1uI/3
+const LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;
+
+/**
+ * Get the name of the root CSS class of a component based on its name.
+ *
+ * @param  componentName The name of the component. This name should contains the component prefix and be
+ *                       written in PascalCase.
+ * @param  subComponent Whether the current component is a sub component, if true, define the class according
+ *                      to BEM standards.
+ * @return The name of the root CSS class. This classname include the CSS classname prefix and is written in
+ *         lower-snake-case.
+ */
+function getRootClassName(componentName, subComponent) {
+  const formattedClassName = `${CSS_PREFIX}-${kebabCase(componentName)}`;
+  if (subComponent) {
+    return formattedClassName.replace(LAST_PART_CLASSNAME, '$1__$2');
+  }
+  return formattedClassName;
+}
+
 /**
  * Returns the classname associated to the given typography.
  * For example, for `Typography.title` it returns `lumx-typography-title`
@@ -580,12 +648,12 @@ const CONFIG$1 = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1l = 'AlertDialog';
+const COMPONENT_NAME$1n = 'AlertDialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1k = 'lumx-alert-dialog';
+const CLASSNAME$1k = getRootClassName(COMPONENT_NAME$1n);
 
 /**
  * Component default props.
@@ -685,7 +753,7 @@ const AlertDialog = forwardRef((props, ref) => {
     }), confirmLabel))
   })));
 });
-AlertDialog.displayName = COMPONENT_NAME$1l;
+AlertDialog.displayName = COMPONENT_NAME$1n;
 AlertDialog.className = CLASSNAME$1k;
 AlertDialog.defaultProps = DEFAULT_PROPS$14;
 
@@ -759,12 +827,12 @@ const _excluded$1r = ["anchorToInput", "children", "chips", "className", "closeO
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1k = 'Autocomplete';
+const COMPONENT_NAME$1m = 'Autocomplete';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1j = 'lumx-autocomplete';
+const CLASSNAME$1j = getRootClassName(COMPONENT_NAME$1m);
 
 /**
  * Component default props.
@@ -866,7 +934,7 @@ const Autocomplete = forwardRef((props, ref) => {
     theme: theme
   }, children));
 });
-Autocomplete.displayName = COMPONENT_NAME$1k;
+Autocomplete.displayName = COMPONENT_NAME$1m;
 Autocomplete.className = CLASSNAME$1j;
 Autocomplete.defaultProps = DEFAULT_PROPS$13;
 
@@ -879,12 +947,12 @@ const _excluded$1q = ["anchorToInput", "children", "chipsAlignment", "className"
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1j = 'AutocompleteMultiple';
+const COMPONENT_NAME$1l = 'AutocompleteMultiple';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1i = 'lumx-autocomplete-multiple';
+const CLASSNAME$1i = getRootClassName(COMPONENT_NAME$1l);
 
 /**
  * Component default props.
@@ -993,7 +1061,7 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     onInfiniteScroll: onInfiniteScroll
   }), children);
 });
-AutocompleteMultiple.displayName = COMPONENT_NAME$1j;
+AutocompleteMultiple.displayName = COMPONENT_NAME$1l;
 AutocompleteMultiple.className = CLASSNAME$1i;
 AutocompleteMultiple.defaultProps = DEFAULT_PROPS$12;
 
@@ -1010,12 +1078,12 @@ const _excluded$1p = ["actions", "alt", "badge", "className", "image", "linkProp
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1i = 'Avatar';
+const COMPONENT_NAME$1k = 'Avatar';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1h = 'lumx-avatar';
+const CLASSNAME$1h = getRootClassName(COMPONENT_NAME$1k);
 
 /**
  * Component default props.
@@ -1074,7 +1142,7 @@ const Avatar = forwardRef((props, ref) => {
     className: `${CLASSNAME$1h}__badge`
   }, badge));
 });
-Avatar.displayName = COMPONENT_NAME$1i;
+Avatar.displayName = COMPONENT_NAME$1k;
 Avatar.className = CLASSNAME$1h;
 Avatar.defaultProps = DEFAULT_PROPS$11;
 
@@ -1087,12 +1155,12 @@ const _excluded$1o = ["children", "className", "color"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1h = 'Badge';
+const COMPONENT_NAME$1j = 'Badge';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1g = 'lumx-badge';
+const CLASSNAME$1g = getRootClassName(COMPONENT_NAME$1j);
 
 /**
  * Component default props.
@@ -1124,7 +1192,7 @@ const Badge = forwardRef((props, ref) => {
     }))
   }), children);
 });
-Badge.displayName = COMPONENT_NAME$1h;
+Badge.displayName = COMPONENT_NAME$1j;
 Badge.className = CLASSNAME$1g;
 Badge.defaultProps = DEFAULT_PROPS$10;
 
@@ -1227,8 +1295,7 @@ const useKeyboardListNavigation = function (items, ref, onListItemSelected, onLi
       onListItemSelected(selectedItem);
       resetActiveIndex();
     } else if (activeItemIndex === initialIndex && onEnterPressed) {
-      var _evt$target;
-      const value = (_evt$target = evt.target) === null || _evt$target === void 0 ? void 0 : _evt$target.value;
+      const value = get(evt, 'target.value');
       onEnterPressed(value);
       resetActiveIndex();
     }
@@ -1239,8 +1306,7 @@ const useKeyboardListNavigation = function (items, ref, onListItemSelected, onLi
    * @param evt - key pressed event
    */
   const onTabKeyPressed = evt => {
-    var _evt$target2;
-    const value = (_evt$target2 = evt.target) === null || _evt$target2 === void 0 ? void 0 : _evt$target2.value;
+    const value = get(evt, 'target.value');
     if (preventTabOnEnteredValue && value && value.length > 0) {
       preventDefaultAndStopPropagation(evt);
     }
@@ -1327,12 +1393,12 @@ const _excluded$1m = ["after", "before", "children", "className", "isHighlighted
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1g = 'ListItem';
+const COMPONENT_NAME$1i = 'ListItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1f = 'lumx-list-item';
+const CLASSNAME$1f = getRootClassName(COMPONENT_NAME$1i);
 
 /**
  * Component default props.
@@ -1350,7 +1416,7 @@ function isClickable(_ref) {
     linkProps,
     onItemSelected
   } = _ref;
-  return !!(linkProps !== null && linkProps !== void 0 && linkProps.href) || !!onItemSelected;
+  return !isEmpty(linkProps === null || linkProps === void 0 ? void 0 : linkProps.href) || !!onItemSelected;
 }
 
 /**
@@ -1423,10 +1489,26 @@ const ListItem = forwardRef((props, ref) => {
     className: `${CLASSNAME$1f}__wrapper`
   }, content));
 });
-ListItem.displayName = COMPONENT_NAME$1g;
+ListItem.displayName = COMPONENT_NAME$1i;
 ListItem.className = CLASSNAME$1f;
 ListItem.defaultProps = DEFAULT_PROPS$$;
 
+/**
+ * Properties of a component to use to determine it's name.
+ * In the order of preference.
+ */
+const NAME_PROPERTIES = ['type', 'type.displayName', 'displayName', 'name', 'type.name', 'props.mdxType', '_reactInternalFiber.elementType.name'];
+/**
+ * Create a predicate function that checks if a ReactNode is a react element from the given component.
+ *
+ * @param  component React function component or the component name
+ * @return predicate returning true if value is instance of the component
+ */
+const isComponent = component => instance => {
+  const componentName = typeof component === 'string' ? component : component.displayName;
+  return !!get(instance, '$$typeof') && NAME_PROPERTIES.some(nameProperty => get(instance, nameProperty) === componentName);
+};
+
 /**
  * Similar to `isComponent` but more precise as it's not based on the component `displayName` but on the component function reference.
  */
@@ -1694,8 +1776,8 @@ function flattenChildren(children) {
   function recur(nodes) {
     let keys = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
     return Children.toArray(nodes).reduce((acc, node, index) => {
-      var _key;
-      const nodeKeys = keys.concat((_key = node === null || node === void 0 ? void 0 : node.key) !== null && _key !== void 0 ? _key : index);
+      var _get;
+      const nodeKeys = keys.concat((_get = get(node, 'key')) !== null && _get !== void 0 ? _get : index);
       if (reactIs.exports.isFragment(node)) {
         acc.push(...recur(node.props.children, nodeKeys));
       } else if ( /*#__PURE__*/isValidElement(node)) {
@@ -1735,7 +1817,7 @@ function onKeyboardFocus(props, handler) {
   };
 }
 const isNavigableItem = node => {
-  return isComponentType(ListItem)(node) && isClickable(node.props) && !node.props.isDisabled;
+  return isComponent('ListItem')(node) && isClickable(node.props) && !node.props.isDisabled;
 };
 
 /**
@@ -1791,7 +1873,6 @@ const useInteractiveList = options => {
      * @param evt Key event
      */
     const onArrowPressed = evt => {
-      var _items$nextIndex;
       const {
         key
       } = evt;
@@ -1809,7 +1890,7 @@ const useInteractiveList = options => {
       setActiveItemIndex(nextIndex);
       evt.preventDefault();
       evt.stopPropagation();
-      onListItemNavigated === null || onListItemNavigated === void 0 ? void 0 : onListItemNavigated(nextIndex, (_items$nextIndex = items[nextIndex]) === null || _items$nextIndex === void 0 ? void 0 : _items$nextIndex.key);
+      onListItemNavigated === null || onListItemNavigated === void 0 ? void 0 : onListItemNavigated(nextIndex, get(items, [nextIndex, 'key']));
     };
 
     /**
@@ -1872,12 +1953,12 @@ const _excluded$1l = ["children", "className", "isClickable", "itemPadding", "on
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1f = 'List';
+const COMPONENT_NAME$1h = 'List';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1e = 'lumx-list';
+const CLASSNAME$1e = getRootClassName(COMPONENT_NAME$1h);
 
 /**
  * Component default props.
@@ -1923,44 +2004,13 @@ const InternalList = forwardRef((props, ref) => {
     ref: mergeRefs(ref, listElementRef)
   }), items);
 });
-InternalList.displayName = COMPONENT_NAME$1f;
+InternalList.displayName = COMPONENT_NAME$1h;
 InternalList.className = CLASSNAME$1e;
 InternalList.defaultProps = DEFAULT_PROPS$_;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
 });
 
-/**
- * The prefix to use for the CSS classes.
- */
-const CSS_PREFIX = 'lumx';
-
-/**
- * Animation duration constants. Take into consideration that if you change one of these variables,
- * you need to update their scss counterpart as well
- */
-const DIALOG_TRANSITION_DURATION = 400;
-const EXPANSION_PANEL_TRANSITION_DURATION = 400;
-const NOTIFICATION_TRANSITION_DURATION = 200;
-
-/**
- * Delay on hover after which we open or close the tooltip.
- * Only applies to devices supporting pointer hover.
- */
-const TOOLTIP_HOVER_DELAY = {
-  open: 500,
-  close: 500
-};
-
-/**
- * Delay on long press after which we open or close the tooltip.
- * Only applies to devices not supporting pointer hover.
- */
-const TOOLTIP_LONG_PRESS_DELAY = {
-  open: 250,
-  close: 3000
-};
-
 /**
  * Optional global `window` instance (not defined when running SSR).
  */
@@ -1981,17 +2031,6 @@ const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.incl
  */
 const VISUALLY_HIDDEN = 'visually-hidden';
 
-/** Pull an element from an array (inverse of array.push) */
-const pull = (array, element) => {
-  const index = array.indexOf(element);
-  if (index > -1) {
-    array.splice(index, 1);
-  }
-};
-
-/** Get last item from array */
-const last = array => array[array.length - 1];
-
 /**
  * Keep track of listeners, only the last registered listener gets activated at any point (previously registered
  * listener are disabled).
@@ -4348,21 +4387,6 @@ const useStubPopper = (_a, _p, _ref) => {
 /** Switch hook implementation between environment */
 const usePopper = IS_BROWSER ? usePopper$1 : useStubPopper;
 
-/** Memoize a function based on the serialization of its args */
-function memoize(fn) {
-  const cache = new Map();
-  return function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    const serializedArgs = JSON.stringify(args);
-    if (cache.has(serializedArgs)) return cache.get(serializedArgs);
-    const value = fn(...args);
-    cache.set(serializedArgs, value);
-    return value;
-  };
-}
-
 /**
  * Different possible placements for the popover.
  */
@@ -4588,12 +4612,12 @@ const _excluded$1k = ["anchorRef", "as", "children", "className", "closeOnClickA
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1e = 'Popover';
+const COMPONENT_NAME$1g = 'Popover';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1d = 'lumx-popover';
+const CLASSNAME$1d = getRootClassName(COMPONENT_NAME$1g);
 
 /**
  * Component default props.
@@ -4696,10 +4720,10 @@ const _InnerPopover = forwardRef((props, ref) => {
   }, /*#__PURE__*/React__default.createElement("path", {
     d: "M8 3.49C7.62 2.82 6.66 2.82 6.27 3.48L.04 14 14.04 14 8 3.49Z"
   }))), /*#__PURE__*/React__default.createElement(ThemeProvider, {
-    value: undefined
+    value: theme
   }, children))), usePortal) : null;
 });
-_InnerPopover.displayName = COMPONENT_NAME$1e;
+_InnerPopover.displayName = COMPONENT_NAME$1g;
 
 /**
  * Popover component.
@@ -4711,7 +4735,7 @@ _InnerPopover.displayName = COMPONENT_NAME$1e;
 const Popover = skipRender(
 // Skip render in SSR
 () => Boolean(DOCUMENT), _InnerPopover);
-Popover.displayName = COMPONENT_NAME$1e;
+Popover.displayName = COMPONENT_NAME$1g;
 Popover.className = CLASSNAME$1d;
 Popover.defaultProps = DEFAULT_PROPS$Z;
 
@@ -4767,12 +4791,12 @@ const _excluded$1j = ["anchorRef", "children", "className", "closeOnClick", "clo
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1d = 'Dropdown';
+const COMPONENT_NAME$1f = 'Dropdown';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1c = 'lumx-dropdown';
+const CLASSNAME$1c = getRootClassName(COMPONENT_NAME$1f);
 
 /**
  * Component default props.
@@ -4819,7 +4843,7 @@ const Dropdown = forwardRef((props, ref) => {
   const listElement = useRef(null);
   useInfiniteScroll(innerRef, onInfiniteScroll);
   const popperElement = useMemo(() => {
-    return !Array.isArray(children) && isComponentType(List)(children) ? /*#__PURE__*/cloneElement(children, _objectSpread2(_objectSpread2({}, children.props), {}, {
+    return !Array.isArray(children) && isComponent(List)(children) ? /*#__PURE__*/cloneElement(children, _objectSpread2(_objectSpread2({}, children.props), {}, {
       ref: listElement,
       onClick(evt) {
         var _children$props$onCli, _children$props;
@@ -4853,7 +4877,7 @@ const Dropdown = forwardRef((props, ref) => {
     ref: innerRef
   }, popperElement)) : null;
 });
-Dropdown.displayName = COMPONENT_NAME$1d;
+Dropdown.displayName = COMPONENT_NAME$1f;
 Dropdown.className = CLASSNAME$1c;
 Dropdown.defaultProps = DEFAULT_PROPS$Y;
 
@@ -4878,12 +4902,12 @@ const _excluded$1i = ["children", "className", "kind", "theme"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1c = 'InputHelper';
+const COMPONENT_NAME$1e = 'InputHelper';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1b = 'lumx-input-helper';
+const CLASSNAME$1b = getRootClassName(COMPONENT_NAME$1e);
 
 /**
  * Component default props.
@@ -4921,7 +4945,7 @@ const InputHelper = forwardRef((props, ref) => {
     }))
   }), children);
 });
-InputHelper.displayName = COMPONENT_NAME$1c;
+InputHelper.displayName = COMPONENT_NAME$1e;
 InputHelper.className = CLASSNAME$1b;
 InputHelper.defaultProps = DEFAULT_PROPS$X;
 
@@ -4959,8 +4983,11 @@ const SelectVariant = {
 
 const _excluded$1h = ["children", "className", "focusElement", "isMultiple", "closeOnClick", "disabled", "error", "hasError", "helper", "id", "isDisabled", "isEmpty", "isOpen", "isRequired", "isValid", "label", "onClear", "onDropdownClose", "onInfiniteScroll", "onInputClick", "placeholder", "theme", "value", "variant"];
 
+/** The display name of the component. */
+const COMPONENT_NAME$1d = 'Select';
+
 /** The default class name and classes prefix for this component. */
-const CLASSNAME$1a = 'lumx-select';
+const CLASSNAME$1a = getRootClassName(COMPONENT_NAME$1d);
 
 /** The default value of props. */
 const DEFAULT_PROPS$W = {
@@ -5070,11 +5097,15 @@ const WithSelectContext = (SelectElement, props, ref) => {
 };
 
 const _excluded$1g = ["badge", "children", "className"];
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$1c = 'BadgeWrapper';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$19 = 'lumx-badge-wrapper';
+const CLASSNAME$19 = getRootClassName(COMPONENT_NAME$1c);
 const BadgeWrapper = forwardRef((props, ref) => {
   const {
       badge,
@@ -5196,7 +5227,7 @@ const ButtonRoot = forwardRef((props, ref) => {
    *
    * However, in any case, if the component is disabled, we returned a <button> since disabled is not compatible with <a>.
    */
-  if ((linkAs || props.href) && !isDisabled) {
+  if ((linkAs || !isEmpty(props.href)) && !isDisabled) {
     return renderLink(_objectSpread2(_objectSpread2({
       linkAs
     }, forwardedProps), {}, {
@@ -5242,7 +5273,7 @@ const COMPONENT_NAME$1a = 'Button';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$18 = 'lumx-button';
+const CLASSNAME$18 = getRootClassName(COMPONENT_NAME$1a);
 
 /**
  * Component default props.
@@ -5274,11 +5305,11 @@ const Button = forwardRef((props, ref) => {
   const buttonClassName = classNames(className, getBasicClass({
     prefix: CLASSNAME$18,
     type: 'hasLeftIcon',
-    value: !!leftIcon
+    value: !isEmpty(leftIcon)
   }), getBasicClass({
     prefix: CLASSNAME$18,
     type: 'hasRightIcon',
-    value: !!rightIcon
+    value: !isEmpty(rightIcon)
   }));
   return /*#__PURE__*/React__default.createElement(ButtonRoot, _extends({
     ref: ref
@@ -5289,9 +5320,9 @@ const Button = forwardRef((props, ref) => {
   }, forwardedProps), {
     className: buttonClassName,
     variant: "button"
-  }), leftIcon && /*#__PURE__*/React__default.createElement(Icon, {
+  }), leftIcon && !isEmpty(leftIcon) && /*#__PURE__*/React__default.createElement(Icon, {
     icon: leftIcon
-  }), children && (isComponentType(Text)(children) ? children : /*#__PURE__*/React__default.createElement("span", null, children)), rightIcon && /*#__PURE__*/React__default.createElement(Icon, {
+  }), children && (isComponent(Text)(children) ? children : /*#__PURE__*/React__default.createElement("span", null, children)), rightIcon && !isEmpty(rightIcon) && /*#__PURE__*/React__default.createElement(Icon, {
     icon: rightIcon
   }));
 });
@@ -5308,7 +5339,7 @@ const COMPONENT_NAME$19 = 'IconButton';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$17 = 'lumx-icon-button';
+const CLASSNAME$17 = getRootClassName(COMPONENT_NAME$19);
 
 /**
  * Component default props.
@@ -5375,7 +5406,7 @@ const COMPONENT_NAME$18 = 'ButtonGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$16 = 'lumx-button-group';
+const CLASSNAME$16 = getRootClassName(COMPONENT_NAME$18);
 
 /**
  * Component default props.
@@ -5424,7 +5455,7 @@ const COMPONENT_NAME$17 = 'Checkbox';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$15 = 'lumx-checkbox';
+const CLASSNAME$15 = getRootClassName(COMPONENT_NAME$17);
 
 /**
  * Component default props.
@@ -5528,7 +5559,7 @@ Checkbox.defaultProps = DEFAULT_PROPS$S;
  */
 function useStopPropagation(handler) {
   return useCallback(evt => {
-    if (!evt || !handler) {
+    if (!evt || !isFunction(handler)) {
       return;
     }
     handler(evt);
@@ -5554,7 +5585,7 @@ const COMPONENT_NAME$16 = 'Chip';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$14 = 'lumx-chip';
+const CLASSNAME$14 = getRootClassName(COMPONENT_NAME$16);
 
 /**
  * Component default props.
@@ -5592,8 +5623,11 @@ const Chip = forwardRef((props, ref) => {
       onKeyDown
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$1a);
-  const isButton = onClick && !href;
-  const isClickable = Boolean(onClick) || Boolean(href) || propIsClickable;
+  const hasAfterClick = isFunction(onAfterClick);
+  const hasBeforeClick = isFunction(onBeforeClick);
+  const hasOnClick = isFunction(onClick);
+  const isButton = hasOnClick && !href;
+  const isClickable = Boolean(hasOnClick) || Boolean(href) || propIsClickable;
 
   // Adapt color to the theme.
   const chipColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
@@ -5601,7 +5635,7 @@ const Chip = forwardRef((props, ref) => {
   const handleOnAfterClick = useStopPropagation(onAfterClick);
   const handleKeyDown = evt => {
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(evt);
-    if (onClick) {
+    if (hasOnClick) {
       onEnterPressed(onClick)(evt);
     }
   };
@@ -5627,14 +5661,14 @@ const Chip = forwardRef((props, ref) => {
         unselected: Boolean(!isSelected)
       })),
       "aria-disabled": isClickable && isDisabled || undefined,
-      onClick: onClick || undefined,
+      onClick: hasOnClick ? onClick : undefined,
       onKeyDown: handleKeyDown
     }), before &&
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     React__default.createElement("div", {
       className: classNames(`${CLASSNAME$14}__before`, {
-        [`${CLASSNAME$14}__before--is-clickable`]: !!onBeforeClick
+        [`${CLASSNAME$14}__before--is-clickable`]: hasBeforeClick
       }),
       onClick: handleOnBeforeClick
     }, before), /*#__PURE__*/React__default.createElement("div", {
@@ -5644,7 +5678,7 @@ const Chip = forwardRef((props, ref) => {
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     React__default.createElement("div", {
       className: classNames(`${CLASSNAME$14}__after`, {
-        [`${CLASSNAME$14}__after--is-clickable`]: !!onAfterClick
+        [`${CLASSNAME$14}__after--is-clickable`]: hasAfterClick
       }),
       onClick: handleOnAfterClick
     }, after))
@@ -5725,7 +5759,7 @@ const COMPONENT_NAME$15 = 'ChipGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$13 = 'lumx-chip-group';
+const CLASSNAME$13 = getRootClassName(COMPONENT_NAME$15);
 
 /**
  * ChipGroup component.
@@ -5775,7 +5809,7 @@ const COMPONENT_NAME$14 = 'CommentBlock';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$12 = 'lumx-comment-block';
+const CLASSNAME$12 = getRootClassName(COMPONENT_NAME$14);
 
 /**
  * Component default props.
@@ -5889,7 +5923,7 @@ const COMPONENT_NAME$13 = 'DatePicker';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$11 = 'lumx-date-picker';
+const CLASSNAME$11 = getRootClassName(COMPONENT_NAME$13);
 
 /** Get first day of week for locale from the browser API */
 const getFromBrowser = locale => {
@@ -6021,7 +6055,7 @@ const getMonthCalendar = function (locale) {
     if (iterDate.getMonth() === month) {
       week[weekDayNumber] = day;
     }
-    if (weekDayNumber === (lastDayOfWeek === null || lastDayOfWeek === void 0 ? void 0 : lastDayOfWeek.number)) {
+    if (weekDayNumber === lastDayOfWeek.number) {
       weeks.push(week);
       rowCount += 1;
       week = {};
@@ -6492,17 +6526,7 @@ function useIntersectionObserver(elements, options) {
  * @return partitioned elements by the given predicates
  */
 function partitionMulti(elements, predicates) {
-  const others = [];
-  const groups = predicates.map(() => []);
-  for (const element of elements) {
-    const index = predicates.findIndex(predicate => predicate(element));
-    if (index !== -1) {
-      groups[index].push(element);
-    } else {
-      others.push(element);
-    }
-  }
-  return [...groups, others];
+  return reduce(predicates, (partitioned, predicate) => concat(dropRight(partitioned), partition(last(partitioned), predicate)), [elements]);
 }
 
 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
@@ -6772,8 +6796,8 @@ const _excluded$15 = ["children", "className", "header", "focusElement", "forceF
  * Defines the props of the component.
  */
 
-const isHeader$1 = isComponentType('header');
-const isFooter$1 = isComponentType('footer');
+const isHeader$1 = isComponent('header');
+const isFooter$1 = isComponent('footer');
 
 /**
  * Component display name.
@@ -6783,7 +6807,7 @@ const COMPONENT_NAME$10 = 'Dialog';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$10 = 'lumx-dialog';
+const CLASSNAME$10 = getRootClassName(COMPONENT_NAME$10);
 
 /**
  * Component default props.
@@ -6956,7 +6980,7 @@ const COMPONENT_NAME$$ = 'Divider';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$$ = 'lumx-divider';
+const CLASSNAME$$ = getRootClassName(COMPONENT_NAME$$);
 
 /**
  * Component default props.
@@ -7004,7 +7028,7 @@ const COMPONENT_NAME$_ = 'DragHandle';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$_ = 'lumx-drag-handle';
+const CLASSNAME$_ = getRootClassName(COMPONENT_NAME$_);
 
 /**
  * DragHandle component.
@@ -7050,15 +7074,15 @@ const COMPONENT_NAME$Z = 'ExpansionPanel';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Z = 'lumx-expansion-panel';
+const CLASSNAME$Z = getRootClassName(COMPONENT_NAME$Z);
 
 /**
  * Component default props.
  */
 const DEFAULT_PROPS$M = {};
-const isDragHandle = isComponentType(DragHandle);
-const isHeader = isComponentType('header');
-const isFooter = isComponentType('footer');
+const isDragHandle = isComponent(DragHandle);
+const isHeader = isComponent('header');
+const isFooter = isComponent('footer');
 
 /**
  * ExpansionPanel component.
@@ -7090,23 +7114,25 @@ 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 = React__default.Children.count(headerProps.children) > 0 ? headerProps.children : /*#__PURE__*/React__default.createElement("span", {
+  const headerContent = !isEmpty(headerProps.children) ? headerProps.children : /*#__PURE__*/React__default.createElement("span", {
     className: `${CLASSNAME$Z}__label`
   }, label);
   const toggleOpen = event => {
     const shouldOpen = !isOpen;
-    if (shouldOpen) {
-      onOpen === null || onOpen === void 0 ? void 0 : onOpen(event);
+    if (isFunction(onOpen) && shouldOpen) {
+      onOpen(event);
+    }
+    if (isFunction(onClose) && !shouldOpen) {
+      onClose(event);
     }
-    if (!shouldOpen) {
-      onClose === null || onClose === void 0 ? void 0 : onClose(event);
+    if (isFunction(onToggleOpen)) {
+      onToggleOpen(shouldOpen, event);
     }
-    onToggleOpen === null || onToggleOpen === void 0 ? void 0 : onToggleOpen(shouldOpen, event);
   };
   const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
   const rootClassName = classNames(className, handleBasicClasses({
     hasBackground,
-    hasHeader: Boolean(!isEmpty$1(headerProps.children)),
+    hasHeader: Boolean(!isEmpty(headerProps.children)),
     hasHeaderDivider,
     isClose: !isOpen,
     isDraggable: Boolean(dragHandle),
@@ -7122,8 +7148,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   // Switch max height on/off to activate the CSS transition (updates when children changes).
   const [maxHeight, setMaxHeight] = useState('0');
   useEffect(() => {
-    var _wrapperRef$current$o, _wrapperRef$current;
-    const height = isOpen ? (_wrapperRef$current$o = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.offsetHeight) !== null && _wrapperRef$current$o !== void 0 ? _wrapperRef$current$o : 0 : 0;
+    const height = isOpen ? get(wrapperRef.current, 'offsetHeight', 0) : 0;
     setMaxHeight(`${height}px`);
   }, [children, isOpen]);
   return /*#__PURE__*/React__default.createElement("section", _extends({
@@ -7164,7 +7189,7 @@ ExpansionPanel.defaultProps = DEFAULT_PROPS$M;
 
 const _excluded$11 = ["label", "icon", "color", "className", "theme", "truncate"];
 const COMPONENT_NAME$Y = 'Flag';
-const CLASSNAME$Y = 'lumx-flag';
+const CLASSNAME$Y = getRootClassName(COMPONENT_NAME$Y);
 const DEFAULT_PROPS$L = {};
 
 /**
@@ -7209,9 +7234,6 @@ Flag.displayName = COMPONENT_NAME$Y;
 Flag.className = CLASSNAME$Y;
 Flag.defaultProps = DEFAULT_PROPS$L;
 
-/** Cast a value into an array if needed */
-const castArray = arrayOrElement => Array.isArray(arrayOrElement) ? arrayOrElement : [arrayOrElement];
-
 const _excluded$10 = ["as", "children", "className", "fillSpace", "gap", "hAlign", "marginAuto", "noShrink", "orientation", "vAlign", "wrap"];
 
 /**
@@ -7226,7 +7248,7 @@ const COMPONENT_NAME$X = 'FlexBox';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$X = 'lumx-flex-box';
+const CLASSNAME$X = getRootClassName(COMPONENT_NAME$X);
 
 /**
  * FlexBox component.
@@ -7274,7 +7296,7 @@ const COMPONENT_NAME$W = 'GenericBlock';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$W = 'lumx-generic-block';
+const CLASSNAME$W = getRootClassName(COMPONENT_NAME$W);
 
 /**
  * Component default props.
@@ -7283,11 +7305,11 @@ const DEFAULT_PROPS$K = {
   gap: Size.big,
   orientation: Orientation.horizontal
 };
-const Figure = () => {};
+const Figure = noop.bind({});
 const isFigure = isComponentType(Figure);
-const Content = () => {};
+const Content = noop.bind({});
 const isContent = isComponentType(Content);
-const Actions = () => {};
+const Actions = noop.bind({});
 const isActions = isComponentType(Actions);
 
 /**
@@ -7325,8 +7347,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       contentChildProps: contentChild === null || contentChild === void 0 ? void 0 : contentChild.props,
       actionsChild,
       actionsChildProps: actionsChild === null || actionsChild === void 0 ? void 0 : actionsChild.props,
-      // TODO: check this is working
-      otherChildren: otherChildren.filter(child => React__default.Children.count(child) > 0)
+      otherChildren: otherChildren.filter(child => !isEmpty(child))
     };
   }, [children]);
   return /*#__PURE__*/React__default.createElement(FlexBox, _extends({
@@ -7368,13 +7389,7 @@ const GenericBlock = Object.assign(BaseGenericBlock, {
 /**
  * Accepted gap sizes for the generic block.
  */
-const GenericBlockGapSize = {
-  tiny: Size.tiny,
-  regular: Size.regular,
-  medium: Size.medium,
-  big: Size.big,
-  huge: Size.huge
-};
+const GenericBlockGapSize = pick(Size, ['tiny', 'regular', 'medium', 'big', 'huge']);
 
 /** Empty object */
 
@@ -7434,7 +7449,7 @@ const COMPONENT_NAME$V = 'Text';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$V = 'lumx-text';
+const CLASSNAME$V = getRootClassName(COMPONENT_NAME$V);
 
 /**
  * Component default props.
@@ -7495,7 +7510,7 @@ const Text = forwardRef((props, ref) => {
     style: _objectSpread2(_objectSpread2(_objectSpread2({}, truncateLinesStyle), whiteSpaceStyle), style)
   }, forwardedProps), children && Children.toArray(children).map((child, index) => {
     // Force wrap spaces around icons to make sure they are never stuck against text.
-    if (isComponentType(Icon)(child)) {
+    if (isComponent(Icon)(child)) {
       return /*#__PURE__*/React__default.createElement(Fragment, {
         key: child.key || index
       }, " ", child, " ");
@@ -7553,7 +7568,7 @@ const COMPONENT_NAME$U = 'Heading';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$U = 'lumx-heading';
+const CLASSNAME$U = getRootClassName(COMPONENT_NAME$U);
 
 /**
  * Component default props.
@@ -7624,7 +7639,7 @@ const COMPONENT_NAME$T = 'Grid';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$T = 'lumx-grid';
+const CLASSNAME$T = getRootClassName(COMPONENT_NAME$T);
 
 /**
  * Component default props.
@@ -7685,7 +7700,7 @@ const COMPONENT_NAME$S = 'GridItem';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$S = 'lumx-grid-item';
+const CLASSNAME$S = getRootClassName(COMPONENT_NAME$S);
 
 /**
  * GridItem component.
@@ -7731,7 +7746,7 @@ const COMPONENT_NAME$R = 'GridColumn';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$R = 'lumx-grid-column';
+const CLASSNAME$R = getRootClassName(COMPONENT_NAME$R);
 
 /**
  * Component default props.
@@ -7762,7 +7777,7 @@ const GridColumn = forwardRef((props, ref) => {
     ref: ref,
     className: classNames(className, CLASSNAME$R),
     style: _objectSpread2(_objectSpread2({}, style), {}, {
-      ['--lumx-grid-column-item-min-width']: Number.isInteger(itemMinWidth) && `${itemMinWidth}px`,
+      ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
       ['--lumx-grid-column-columns']: maxColumns,
       ['--lumx-grid-column-gap']: gap && `var(--lumx-spacing-unit-${gap})`
     })
@@ -7786,7 +7801,7 @@ const COMPONENT_NAME$Q = 'Icon';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Q = 'lumx-icon';
+const CLASSNAME$Q = getRootClassName(COMPONENT_NAME$Q);
 
 /**
  * Component default props.
@@ -7951,7 +7966,7 @@ const COMPONENT_NAME$P = 'ImageBlock';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$P = 'lumx-image-block';
+const CLASSNAME$P = getRootClassName(COMPONENT_NAME$P);
 
 /**
  * Component default props.
@@ -8035,7 +8050,7 @@ const COMPONENT_NAME$O = 'ImageLightbox';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$O = 'lumx-image-lightbox';
+const CLASSNAME$O = getRootClassName(COMPONENT_NAME$O);
 
 /**
  * Observe element size (only works if it's size depends on the window size).
@@ -8047,20 +8062,11 @@ const CLASSNAME$O = 'lumx-image-lightbox';
  */
 function useSizeOnWindowResize(elementRef) {
   const [size, setSize] = React__default.useState(null);
-  const updateSize = React__default.useMemo(() => {
-    let prevTimeout;
-    function update() {
-      var _elementRef$current;
-      const newSize = (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.getBoundingClientRect();
-      if (newSize) setSize(newSize);
-      prevTimeout = undefined;
-    }
-    return () => {
-      if (!prevTimeout) {
-        prevTimeout = setTimeout(update, 10);
-      }
-    };
-  }, [elementRef]);
+  const updateSize = React__default.useMemo(() => throttle(() => {
+    var _elementRef$current;
+    const newSize = (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.getBoundingClientRect();
+    if (newSize) setSize(newSize);
+  }, 10), [elementRef]);
   React__default.useEffect(() => {
     updateSize();
     window.addEventListener('resize', updateSize);
@@ -8476,6 +8482,13 @@ const ImageSlideshow = _ref => {
   })));
   const getImgRef = React__default.useMemo(() => memoize((index, isActive) => {
     return mergeRefs(images === null || images === void 0 ? void 0 : images[index].imgRef, isActive ? activeImageRef : undefined);
+  },
+  // memoize based on both arguments
+  function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    return args.join();
   }), [images, activeImageRef]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Slides, {
     activeIndex: activeIndex,
@@ -8785,7 +8798,7 @@ const COMPONENT_NAME$N = 'InlineList';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$N = 'lumx-inline-list';
+const CLASSNAME$N = getRootClassName(COMPONENT_NAME$N);
 
 /**
  * Component default props.
@@ -8856,7 +8869,7 @@ const COMPONENT_NAME$M = 'InputLabel';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$M = 'lumx-input-label';
+const CLASSNAME$M = getRootClassName(COMPONENT_NAME$M);
 
 /**
  * Component default props.
@@ -8909,7 +8922,7 @@ const COMPONENT_NAME$L = 'Lightbox';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$L = 'lumx-lightbox';
+const CLASSNAME$L = getRootClassName(COMPONENT_NAME$L);
 
 /**
  * Lightbox component.
@@ -9042,7 +9055,7 @@ const COMPONENT_NAME$K = 'Link';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$K = 'lumx-link';
+const CLASSNAME$K = getRootClassName(COMPONENT_NAME$K);
 const getIconSize = typography => {
   switch (typography) {
     case Typography.display1:
@@ -9092,7 +9105,7 @@ const Link = forwardRef((props, ref) => {
       typography
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$O);
-  const renderedChildren = useMemo(() => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, leftIcon && /*#__PURE__*/React__default.createElement(Icon, {
+  const renderedChildren = useMemo(() => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, leftIcon && !isEmpty(leftIcon) && /*#__PURE__*/React__default.createElement(Icon, {
     icon: leftIcon,
     className: `${CLASSNAME$K}__left-icon`,
     size: getIconSize(typography)
@@ -9100,7 +9113,7 @@ const Link = forwardRef((props, ref) => {
     className: classNames(`${CLASSNAME$K}__content`, {
       [`lumx-typography-${typography}`]: typography
     })
-  }, children), rightIcon && /*#__PURE__*/React__default.createElement(Icon, {
+  }, children), rightIcon && !isEmpty(rightIcon) && /*#__PURE__*/React__default.createElement(Icon, {
     icon: rightIcon,
     className: `${CLASSNAME$K}__right-icon`,
     size: getIconSize(typography)
@@ -9110,7 +9123,7 @@ const Link = forwardRef((props, ref) => {
    * If there is no linkAs prop and no href, we returned a <button> instead of a <a>.
    * If the component is disabled, we also returned a <button> since disabled is not compatible with <a>.
    */
-  if (!linkAs && href || isDisabled) {
+  if (!linkAs && isEmpty(href) || isDisabled) {
     return /*#__PURE__*/React__default.createElement("button", _extends({
       type: "button"
     }, forwardedProps, {
@@ -9153,7 +9166,7 @@ const COMPONENT_NAME$J = 'LinkPreview';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$J = 'lumx-link-preview';
+const CLASSNAME$J = getRootClassName(COMPONENT_NAME$J);
 
 /**
  * Component default props.
@@ -9253,7 +9266,7 @@ const COMPONENT_NAME$I = 'ListDivider';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$I = 'lumx-list-divider';
+const CLASSNAME$I = getRootClassName(COMPONENT_NAME$I);
 
 /**
  * ListDivider component.
@@ -9290,7 +9303,7 @@ const COMPONENT_NAME$H = 'ListSubheader';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$H = 'lumx-list-subheader';
+const CLASSNAME$H = getRootClassName(COMPONENT_NAME$H);
 
 /**
  * ListSubheader component.
@@ -9328,7 +9341,7 @@ const COMPONENT_NAME$G = 'Message';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$G = 'lumx-message';
+const CLASSNAME$G = getRootClassName(COMPONENT_NAME$G);
 
 /**
  * Associative map from message kind to color and icon.
@@ -9418,7 +9431,7 @@ const COMPONENT_NAME$F = 'Mosaic';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$F = 'lumx-mosaic';
+const CLASSNAME$F = getRootClassName(COMPONENT_NAME$F);
 
 /**
  * Component default props.
@@ -9462,7 +9475,7 @@ const Mosaic = forwardRef((props, ref) => {
     })
   }), /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$F}__wrapper`
-  }, thumbnails.slice(-4).map((thumbnail, index) => {
+  }, take(thumbnails, 4).map((thumbnail, index) => {
     const {
         image,
         onClick,
@@ -9507,7 +9520,7 @@ const COMPONENT_NAME$E = 'NavigationItem';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$E = 'lumx-navigation-item';
+const CLASSNAME$E = getRootClassName(COMPONENT_NAME$E);
 const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
   const {
       className,
@@ -9569,7 +9582,7 @@ const COMPONENT_NAME$D = 'NavigationSection';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$D = 'lumx-navigation-section';
+const CLASSNAME$D = getRootClassName(COMPONENT_NAME$D);
 const NavigationSection = forwardRef((props, ref) => {
   const {
       children,
@@ -9650,7 +9663,7 @@ const COMPONENT_NAME$C = 'Navigation';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$C = 'lumx-navigation';
+const CLASSNAME$C = getRootClassName(COMPONENT_NAME$C);
 
 /**
  * Component default props
@@ -9728,7 +9741,7 @@ const COMPONENT_NAME$B = 'Notification';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$B = 'lumx-notification';
+const CLASSNAME$B = getRootClassName(COMPONENT_NAME$B);
 
 /**
  * Component default props.
@@ -9774,7 +9787,9 @@ const Notification = forwardRef((props, ref) => {
   const isVisible = useTransitionVisibility(rootRef, !!isOpen, NOTIFICATION_TRANSITION_DURATION);
   const hasAction = Boolean(onActionClick) && Boolean(actionLabel);
   const handleCallback = evt => {
-    onActionClick === null || onActionClick === void 0 ? void 0 : onActionClick();
+    if (isFunction(onActionClick)) {
+      onActionClick();
+    }
     evt.stopPropagation();
   };
   if (!type || !isVisible) {
@@ -9832,7 +9847,7 @@ const COMPONENT_NAME$A = 'PopoverDialog';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$A = 'lumx-popover-dialog';
+const CLASSNAME$A = getRootClassName(COMPONENT_NAME$A);
 
 /**
  * Component default props.
@@ -9891,7 +9906,7 @@ const COMPONENT_NAME$z = 'PostBlock';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$z = 'lumx-post-block';
+const CLASSNAME$z = getRootClassName(COMPONENT_NAME$z);
 
 /**
  * Component default props.
@@ -9924,13 +9939,6 @@ const PostBlock = forwardRef((props, ref) => {
       title
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$D);
-
-  // Display text as string or HTML
-  const textContent = typeof text === 'string' ? {
-    children: text
-  } : {
-    dangerouslySetInnerHTML: text
-  };
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref,
     className: classNames(className, handleBasicClasses({
@@ -9953,9 +9961,15 @@ const PostBlock = forwardRef((props, ref) => {
     onClick: onClick
   }, title), meta && /*#__PURE__*/React__default.createElement("span", {
     className: `${CLASSNAME$z}__meta`
-  }, meta), /*#__PURE__*/React__default.createElement("p", _extends({
+  }, meta), isObject(text) && text.__html ?
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-danger
+  React__default.createElement("p", {
+    dangerouslySetInnerHTML: text,
+    className: `${CLASSNAME$z}__text`
+  }) : /*#__PURE__*/React__default.createElement("p", {
     className: `${CLASSNAME$z}__text`
-  }, textContent)), attachments && /*#__PURE__*/React__default.createElement("div", {
+  }, text), attachments && /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$z}__attachments`
   }, attachments), (tags || actions) && /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME$z}__toolbar`
@@ -9978,7 +9992,7 @@ const COMPONENT_NAME$y = 'ProgressLinear';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$y = 'lumx-progress-linear';
+const CLASSNAME$y = getRootClassName(COMPONENT_NAME$y);
 
 /**
  * Component default props.
@@ -10034,7 +10048,7 @@ const COMPONENT_NAME$x = 'ProgressCircular';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$x = 'lumx-progress-circular';
+const CLASSNAME$x = getRootClassName(COMPONENT_NAME$x);
 
 /**
  * Component default props.
@@ -10108,7 +10122,7 @@ const COMPONENT_NAME$w = 'Progress';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$w = 'lumx-progress';
+const CLASSNAME$w = getRootClassName(COMPONENT_NAME$w);
 
 /**
  * Component default props.
@@ -10409,7 +10423,7 @@ const COMPONENT_NAME$v = 'ProgressTracker';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$v = 'lumx-progress-tracker';
+const CLASSNAME$v = getRootClassName(COMPONENT_NAME$v);
 
 /**
  * Component default props.
@@ -10485,7 +10499,7 @@ const COMPONENT_NAME$u = 'ProgressTrackerStep';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$u = 'lumx-progress-tracker-step';
+const CLASSNAME$u = getRootClassName(COMPONENT_NAME$u);
 
 /**
  * Component default props.
@@ -10654,7 +10668,7 @@ const COMPONENT_NAME$s = 'RadioButton';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$s = 'lumx-radio-button';
+const CLASSNAME$s = getRootClassName(COMPONENT_NAME$s);
 
 /**
  * Component default props.
@@ -10754,7 +10768,7 @@ const COMPONENT_NAME$r = 'RadioGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$r = 'lumx-radio-group';
+const CLASSNAME$r = getRootClassName(COMPONENT_NAME$r);
 
 /**
  * RadioGroup component.
@@ -10784,7 +10798,7 @@ const _excluded$t = ["anchorRef", "clearButtonProps", "handleKeyboardNav", "hasE
 const COMPONENT_NAME$q = 'Select';
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME$q = 'lumx-select';
+const CLASSNAME$q = getRootClassName(COMPONENT_NAME$q);
 
 /** The default value of props. */
 const DEFAULT_PROPS$n = {
@@ -10882,8 +10896,8 @@ const SelectField = props => {
  * @return React element.
  */
 const Select = forwardRef((props, ref) => {
-  const isEmpty = !props.value;
-  const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty;
+  const isEmpty$1 = isEmpty(props.value);
+  const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty$1;
   return WithSelectContext(SelectField, _objectSpread2(_objectSpread2({}, props), {}, {
     className: classNames(props.className, handleBasicClasses({
       hasInputClear,
@@ -10891,7 +10905,7 @@ const Select = forwardRef((props, ref) => {
       prefix: CLASSNAME$q
     })),
     hasInputClear,
-    isEmpty
+    isEmpty: isEmpty$1
   }), ref);
 });
 Select.displayName = COMPONENT_NAME$q;
@@ -10907,7 +10921,7 @@ const _excluded$s = ["anchorRef", "handleKeyboardNav", "hasError", "icon", "id",
 const COMPONENT_NAME$p = 'Select';
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME$p = 'lumx-select';
+const CLASSNAME$p = getRootClassName(COMPONENT_NAME$p);
 
 /** The default value of props. */
 const DEFAULT_PROPS$m = {
@@ -11035,7 +11049,7 @@ const COMPONENT_NAME$o = 'SideNavigation';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$o = 'lumx-side-navigation';
+const CLASSNAME$o = getRootClassName(COMPONENT_NAME$o);
 
 /**
  * SideNavigation component.
@@ -11052,7 +11066,7 @@ const SideNavigation = forwardRef((props, ref) => {
       theme = defaultTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$r);
-  const content = Children.toArray(children).filter(isComponentType(SideNavigationItem));
+  const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
   return /*#__PURE__*/React__default.createElement("ul", _extends({
     ref: ref
   }, forwardedProps, {
@@ -11095,7 +11109,7 @@ const COMPONENT_NAME$n = 'SideNavigationItem';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$n = 'lumx-side-navigation-item';
+const CLASSNAME$n = getRootClassName(COMPONENT_NAME$n);
 
 /**
  * Component default props.
@@ -11129,8 +11143,8 @@ const SideNavigationItem = forwardRef((props, ref) => {
       closeMode = 'unmount'
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$p);
-  const content = children && Children.toArray(children).filter(isComponentType(SideNavigationItem));
-  const hasContent = !isEmpty$1(content);
+  const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
+  const hasContent = !isEmpty(content);
   const shouldSplitActions = Boolean(onActionClick);
   const showChildren = hasContent && isOpen;
   const contentId = useId();
@@ -11206,7 +11220,7 @@ const COMPONENT_NAME$m = 'SkeletonCircle';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$m = 'lumx-skeleton-circle';
+const CLASSNAME$m = getRootClassName(COMPONENT_NAME$m);
 
 /**
  * SkeletonCircle component.
@@ -11266,7 +11280,7 @@ const COMPONENT_NAME$l = 'SkeletonRectangle';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$l = 'lumx-skeleton-rectangle';
+const CLASSNAME$l = getRootClassName(COMPONENT_NAME$l);
 
 /**
  * SkeletonRectangle component.
@@ -11323,7 +11337,7 @@ const COMPONENT_NAME$k = 'SkeletonTypography';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$k = 'lumx-skeleton-typography';
+const CLASSNAME$k = getRootClassName(COMPONENT_NAME$k);
 
 /**
  * SkeletonTypography component.
@@ -11410,7 +11424,7 @@ const COMPONENT_NAME$j = 'Slider';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$j = 'lumx-slider';
+const CLASSNAME$j = getRootClassName(COMPONENT_NAME$j);
 
 /**
  * Component default props.
@@ -11675,8 +11689,9 @@ function useInterval(callback, delay) {
   useEffect(() => {
     if (delay === null) return undefined;
     function tick() {
-      var _savedCallback$curren;
-      (_savedCallback$curren = savedCallback.current) === null || _savedCallback$curren === void 0 ? void 0 : _savedCallback$curren.call(savedCallback);
+      if (isFunction(savedCallback.current)) {
+        savedCallback.current();
+      }
     }
     const id = setInterval(tick, delay);
     return () => clearInterval(id);
@@ -11993,7 +12008,7 @@ const COMPONENT_NAME$i = 'SlideshowItemGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$i = 'lumx-slideshow-item-group';
+const CLASSNAME$i = getRootClassName(COMPONENT_NAME$i);
 const buildSlideShowGroupId = (slidesId, index) => `${slidesId}-slide-${index}`;
 
 /**
@@ -12159,7 +12174,7 @@ const COMPONENT_NAME$h = 'SlideshowItem';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$h = 'lumx-slideshow-item';
+const CLASSNAME$h = getRootClassName(COMPONENT_NAME$h);
 
 /**
  * SlideshowItem component.
@@ -12239,11 +12254,6 @@ function usePaginationVisibleRange(activeIndex, slideCount) {
   }, [activeIndex, slideCount]);
 }
 
-/** Generate a range of number starting at 0 and ending before the given number */
-const range = end => Array.from({
-  length: end
-}, (_, i) => i);
-
 const _excluded$h = ["activeIndex", "className", "nextButtonProps", "onNextClick", "onPaginationClick", "onPreviousClick", "parentRef", "previousButtonProps", "paginationProps", "slidesCount", "theme", "isAutoPlaying", "playButtonProps", "paginationItemLabel", "paginationItemProps"],
   _excluded2$1 = ["className", "label"];
 
@@ -12259,7 +12269,7 @@ const COMPONENT_NAME$g = 'SlideshowControls';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$g = 'lumx-slideshow-controls';
+const CLASSNAME$g = getRootClassName(COMPONENT_NAME$g);
 
 /**
  * Component default props.
@@ -12396,13 +12406,6 @@ const SlideshowControls = Object.assign(InternalSlideshowControls, {
   useSlideshowControlsDefaultOptions: DEFAULT_OPTIONS
 });
 
-/** Chunk array in slices of given size */
-function chunk(input, size) {
-  return input.reduce((arr, item, idx) => {
-    return idx % size === 0 ? [...arr, [item]] : [...arr.slice(0, -1), [...arr.slice(-1)[0], item]];
-  }, []);
-}
-
 const _excluded$g = ["activeIndex", "id", "className", "theme", "fillHeight", "groupBy", "isAutoPlaying", "toggleAutoPlay", "slidesId", "children", "afterSlides", "hasControls", "slideGroupLabel"];
 /**
  * Component display name.
@@ -12412,7 +12415,7 @@ const COMPONENT_NAME$f = 'Slideshow';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$f = 'lumx-slideshow';
+const CLASSNAME$f = getRootClassName(COMPONENT_NAME$f);
 
 /**
  * Slides component.
@@ -12498,7 +12501,7 @@ const COMPONENT_NAME$e = 'Switch';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$e = 'lumx-switch';
+const CLASSNAME$e = getRootClassName(COMPONENT_NAME$e);
 
 /**
  * Component default props.
@@ -12578,7 +12581,7 @@ const Switch = forwardRef((props, ref) => {
     htmlFor: inputId,
     theme: theme,
     className: `${CLASSNAME$e}__label`
-  }, children), helper && /*#__PURE__*/React__default.createElement(InputHelper, {
+  }, children), !isEmpty(helper) && /*#__PURE__*/React__default.createElement(InputHelper, {
     id: `${inputId}-helper`,
     theme: theme,
     className: `${CLASSNAME$e}__helper`
@@ -12602,7 +12605,7 @@ const COMPONENT_NAME$d = 'Table';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$d = 'lumx-table';
+const CLASSNAME$d = getRootClassName(COMPONENT_NAME$d);
 
 /**
  * Component default props.
@@ -12655,7 +12658,7 @@ const COMPONENT_NAME$c = 'TableBody';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$c = 'lumx-table__body';
+const CLASSNAME$c = getRootClassName(COMPONENT_NAME$c, true);
 
 /**
  * TableBody component.
@@ -12708,7 +12711,7 @@ const COMPONENT_NAME$b = 'TableCell';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$b = 'lumx-table__cell';
+const CLASSNAME$b = getRootClassName(COMPONENT_NAME$b, true);
 
 /**
  * Component default props.
@@ -12799,7 +12802,7 @@ const COMPONENT_NAME$a = 'TableHeader';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$a = 'lumx-table__header';
+const CLASSNAME$a = getRootClassName(COMPONENT_NAME$a, true);
 
 /**
  * Component default props.
@@ -12843,7 +12846,7 @@ const COMPONENT_NAME$9 = 'TableRow';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$9 = 'lumx-table__row';
+const CLASSNAME$9 = getRootClassName(COMPONENT_NAME$9, true);
 
 /**
  * Component default props.
@@ -13175,7 +13178,7 @@ const COMPONENT_NAME$5 = 'TextField';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$5 = 'lumx-text-field';
+const CLASSNAME$5 = getRootClassName(COMPONENT_NAME$5);
 
 /**
  * Default minimum number of rows in the multiline mode.
@@ -13264,7 +13267,7 @@ const renderInputNative = props => {
     setFocus(false);
   };
   const handleChange = event => {
-    onChange(event.target.value, name, event);
+    onChange(get(event, 'target.value'), name, event);
   };
   const Component = multiline ? 'textarea' : 'input';
   const inputProps = _objectSpread2(_objectSpread2({}, forwardedProps), {}, {
@@ -13644,7 +13647,7 @@ const COMPONENT_NAME$4 = 'Thumbnail';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$4 = 'lumx-thumbnail';
+const CLASSNAME$4 = getRootClassName(COMPONENT_NAME$4);
 
 /**
  * Component default props.
@@ -13832,7 +13835,7 @@ const COMPONENT_NAME$3 = 'Toolbar';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$3 = 'lumx-toolbar';
+const CLASSNAME$3 = getRootClassName(COMPONENT_NAME$3);
 
 /**
  * Component default props.
@@ -14079,7 +14082,7 @@ const COMPONENT_NAME$2 = 'Tooltip';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$2 = 'lumx-tooltip';
+const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
 
 /**
  * Component default props.
@@ -14216,7 +14219,7 @@ const COMPONENT_NAME$1 = 'Uploader';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1 = 'lumx-uploader';
+const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
 
 /**
  * Component default props.
@@ -14325,7 +14328,7 @@ const COMPONENT_NAME = 'UserBlock';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = 'lumx-user-block';
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
 /**
  * Component default props.
@@ -14372,7 +14375,7 @@ const UserBlock = forwardRef((props, ref) => {
   const isLink = Boolean((linkProps === null || linkProps === void 0 ? void 0 : linkProps.href) || linkAs);
   const isClickable = !!onClick || isLink;
   const nameBlock = React__default.useMemo(() => {
-    if (!name) {
+    if (isEmpty(name)) {
       return null;
     }
     let NameComponent = 'span';
@@ -14387,8 +14390,12 @@ const UserBlock = forwardRef((props, ref) => {
         color: ColorPalette.dark
       }));
     }
+    // Disable avatar focus since the name block is the same link / same button.
+    if (avatarProps) {
+      set(avatarProps, ['thumbnailProps', 'tabIndex'], -1);
+    }
     return /*#__PURE__*/React__default.createElement(NameComponent, nProps, name);
-  }, [isClickable, linkAs, linkProps, name, nameProps, onClick]);
+  }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
   const fieldsBlock = fields && componentSize !== Size.s && componentSize !== Size.xs && /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME}__fields`
   }, fields.map((field, idx) => /*#__PURE__*/React__default.createElement("span", {
@@ -14415,11 +14422,7 @@ const UserBlock = forwardRef((props, ref) => {
     className: classNames(`${CLASSNAME}__avatar`, avatarProps.className),
     size: componentSize,
     onClick: onClick,
-    theme: theme,
-    thumbnailProps: _objectSpread2(_objectSpread2({}, avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.thumbnailProps), {}, {
-      // Disable avatar focus since the name block is the same link / same button.
-      tabIndex: avatarProps ? -1 : undefined
-    })
+    theme: theme
   })), (fields || name) && /*#__PURE__*/React__default.createElement("div", {
     className: `${CLASSNAME}__wrapper`
   }, nameBlock, fieldsBlock), shouldDisplayActions && simpleAction && /*#__PURE__*/React__default.createElement("div", {