@lumx/react 4.3.2-alpha.4 → 4.3.2-alpha.40

package/index.js

@@ -1,56 +1,56 @@
-import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, Theme as Theme$1, AspectRatio as AspectRatio$1, ColorVariant, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, Alignment, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants/index.js';
-export * from '@lumx/core/js/constants/index.js';
-export * from '@lumx/core/js/types/index.js';
+import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, Theme as Theme$1, AspectRatio as AspectRatio$1, ColorVariant, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, Alignment, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
+export * from '@lumx/core/js/constants';
+export * from '@lumx/core/js/types';
 import * as React from 'react';
 import React__default, { useState, useEffect, useMemo, useRef, useCallback, Children, useLayoutEffect, cloneElement, createContext, isValidElement, useContext, useReducer } from 'react';
 import { mdiAlert } from '@lumx/icons/esm/alert.js';
 import { mdiAlertCircle } from '@lumx/icons/esm/alert-circle.js';
 import { mdiCheckCircle } from '@lumx/icons/esm/check-circle.js';
 import { mdiInformation } from '@lumx/icons/esm/information.js';
-import { classNames, onEnterPressed, onEscapePressed, onButtonPressed, detectHorizontalSwipe } from '@lumx/core/js/utils/index.js';
+import { classNames, onEnterPressed, onEscapePressed, onButtonPressed, detectHorizontalSwipe } from '@lumx/core/js/utils';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-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 last from 'lodash/last.js';
+import pull from 'lodash/pull.js';
+import get from 'lodash/get.js';
+import concat from 'lodash/concat.js';
+import dropRight from 'lodash/dropRight.js';
+import partition from 'lodash/partition.js';
+import reduce from 'lodash/reduce.js';
 import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider } from './_internal/DpdvhbTO.js';
-import isEmpty from 'lodash/isEmpty';
-import { getDisabledState } from '@lumx/core/js/utils/disabledState/index.js';
+import isEmpty from 'lodash/isEmpty.js';
+import { getDisabledState } from '@lumx/core/js/utils/disabledState';
 import { mdiCloseCircle } from '@lumx/icons/esm/close-circle.js';
-import memoize from 'lodash/memoize';
+import memoize from 'lodash/memoize.js';
 import { mdiClose } from '@lumx/icons/esm/close.js';
-import isFunction from 'lodash/isFunction';
+import isFunction from 'lodash/isFunction.js';
 import { mdiImageBroken } from '@lumx/icons/esm/image-broken.js';
 import { mdiCheck } from '@lumx/icons/esm/check.js';
 import { mdiMinus } from '@lumx/icons/esm/minus.js';
 import { mdiChevronLeft } from '@lumx/icons/esm/chevron-left.js';
 import { mdiChevronRight } from '@lumx/icons/esm/chevron-right.js';
-import castArray from 'lodash/castArray';
+import castArray from 'lodash/castArray.js';
 import { mdiDragVertical } from '@lumx/icons/esm/drag-vertical.js';
 import { mdiChevronDown } from '@lumx/icons/esm/chevron-down.js';
 import { mdiChevronUp } from '@lumx/icons/esm/chevron-up.js';
-import noop from 'lodash/noop';
-import pick from 'lodash/pick';
-import isInteger from 'lodash/isInteger';
+import noop from 'lodash/noop.js';
+import pick from 'lodash/pick.js';
+import isInteger from 'lodash/isInteger.js';
 import { mdiMagnifyMinusOutline } from '@lumx/icons/esm/magnify-minus-outline.js';
 import { mdiMagnifyPlusOutline } from '@lumx/icons/esm/magnify-plus-outline.js';
-import throttle from 'lodash/throttle';
-import range from 'lodash/range';
+import throttle from 'lodash/throttle.js';
+import range from 'lodash/range.js';
 import { mdiPlayCircleOutline } from '@lumx/icons/esm/play-circle-outline.js';
 import { mdiPauseCircleOutline } from '@lumx/icons/esm/pause-circle-outline.js';
-import chunk from 'lodash/chunk';
+import chunk from 'lodash/chunk.js';
 import ReactDOM from 'react-dom';
-import take from 'lodash/take';
+import take from 'lodash/take.js';
 import { mdiRadioboxBlank } from '@lumx/icons/esm/radiobox-blank.js';
 import { mdiRadioboxMarked } from '@lumx/icons/esm/radiobox-marked.js';
 import { mdiMenuDown } from '@lumx/icons/esm/menu-down.js';
-import { getWithSelector } from '@lumx/core/js/utils/selectors/getWithSelector.js';
+import { getWithSelector } from '@lumx/core/js/utils/selectors';
 import { mdiArrowDown } from '@lumx/icons/esm/arrow-down.js';
 import { mdiArrowUp } from '@lumx/icons/esm/arrow-up.js';
-import set from 'lodash/set';
+import set from 'lodash/set.js';
 
 let i = 0;
 
@@ -96,7 +96,7 @@ const CONFIG$1 = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1l = 'AlertDialog';
+const COMPONENT_NAME$1k = 'AlertDialog';
 
 /**
  * Component default class name and class prefix.
@@ -109,7 +109,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1a = {
+const DEFAULT_PROPS$1b = {
   size: Size$1.tiny,
   kind: Kind$1.info
 };
@@ -130,8 +130,8 @@ const AlertDialog = forwardRef((props, ref) => {
     className,
     cancelProps,
     confirmProps,
-    kind = DEFAULT_PROPS$1a.kind,
-    size = DEFAULT_PROPS$1a.size,
+    kind = DEFAULT_PROPS$1b.kind,
+    size = DEFAULT_PROPS$1b.size,
     dialogProps,
     children,
     ...forwardedProps
@@ -217,9 +217,9 @@ const AlertDialog = forwardRef((props, ref) => {
     })]
   });
 });
-AlertDialog.displayName = COMPONENT_NAME$1l;
+AlertDialog.displayName = COMPONENT_NAME$1k;
 AlertDialog.className = CLASSNAME$1j;
-AlertDialog.defaultProps = DEFAULT_PROPS$1a;
+AlertDialog.defaultProps = DEFAULT_PROPS$1b;
 
 /**
  * Hook focusing an element when defined and `focus` boolean `true`.
@@ -311,7 +311,7 @@ function useDisableStateProps(props) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1k = 'Autocomplete';
+const COMPONENT_NAME$1j = 'Autocomplete';
 
 /**
  * Component default class name and class prefix.
@@ -321,7 +321,7 @@ const CLASSNAME$1i = 'lumx-autocomplete';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$19 = {
+const DEFAULT_PROPS$1a = {
   anchorToInput: false,
   closeOnClick: false,
   closeOnClickAway: true,
@@ -343,13 +343,13 @@ const Autocomplete = forwardRef((props, ref) => {
     otherProps
   } = useDisableStateProps(props);
   const {
-    anchorToInput = DEFAULT_PROPS$19.anchorToInput,
+    anchorToInput = DEFAULT_PROPS$1a.anchorToInput,
     children,
     chips,
     className,
-    closeOnClick = DEFAULT_PROPS$19.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$19.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$19.closeOnEscape,
+    closeOnClick = DEFAULT_PROPS$1a.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$1a.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$1a.closeOnEscape,
     error,
     fitToAnchorWidth,
     hasError,
@@ -370,7 +370,7 @@ const Autocomplete = forwardRef((props, ref) => {
     onInfiniteScroll,
     placeholder,
     placement,
-    shouldFocusOnClose = DEFAULT_PROPS$19.shouldFocusOnClose,
+    shouldFocusOnClose = DEFAULT_PROPS$1a.shouldFocusOnClose,
     theme = defaultTheme,
     value,
     textFieldProps = {},
@@ -423,14 +423,14 @@ const Autocomplete = forwardRef((props, ref) => {
     })]
   });
 });
-Autocomplete.displayName = COMPONENT_NAME$1k;
+Autocomplete.displayName = COMPONENT_NAME$1j;
 Autocomplete.className = CLASSNAME$1i;
-Autocomplete.defaultProps = DEFAULT_PROPS$19;
+Autocomplete.defaultProps = DEFAULT_PROPS$1a;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1j = 'AutocompleteMultiple';
+const COMPONENT_NAME$1i = 'AutocompleteMultiple';
 
 /**
  * Component default class name and class prefix.
@@ -440,7 +440,7 @@ const CLASSNAME$1h = 'lumx-autocomplete-multiple';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$18 = {
+const DEFAULT_PROPS$19 = {
   closeOnClickAway: true,
   closeOnEscape: true,
   selectedChipRender(choice, index, onClear, isDisabled) {
@@ -480,8 +480,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     chipsAlignment,
     className,
-    closeOnClickAway = DEFAULT_PROPS$18.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$18.closeOnEscape,
+    closeOnClickAway = DEFAULT_PROPS$19.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$19.closeOnEscape,
     fitToAnchorWidth,
     hasError,
     helper,
@@ -503,12 +503,12 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     onKeyDown,
     placeholder,
     placement,
-    selectedChipRender = DEFAULT_PROPS$18.selectedChipRender,
+    selectedChipRender = DEFAULT_PROPS$19.selectedChipRender,
     shouldFocusOnClose,
     theme = defaultTheme,
     type,
     value,
-    values = DEFAULT_PROPS$18.values,
+    values = DEFAULT_PROPS$19.values,
     ...forwardedProps
   } = otherProps;
   return /*#__PURE__*/jsx(Autocomplete, {
@@ -548,14 +548,14 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     children: children
   });
 });
-AutocompleteMultiple.displayName = COMPONENT_NAME$1j;
+AutocompleteMultiple.displayName = COMPONENT_NAME$1i;
 AutocompleteMultiple.className = CLASSNAME$1h;
-AutocompleteMultiple.defaultProps = DEFAULT_PROPS$18;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS$19;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1i = 'Avatar';
+const COMPONENT_NAME$1h = 'Avatar';
 
 /**
  * Component default class name and class prefix.
@@ -569,7 +569,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$17 = {
+const DEFAULT_PROPS$18 = {
   size: Size$1.m
 };
 
@@ -592,7 +592,7 @@ const Avatar = forwardRef((props, ref) => {
     linkAs,
     onClick,
     onKeyPress,
-    size = DEFAULT_PROPS$17.size,
+    size = DEFAULT_PROPS$18.size,
     theme = defaultTheme,
     thumbnailProps,
     ...forwardedProps
@@ -625,9 +625,9 @@ const Avatar = forwardRef((props, ref) => {
     })]
   });
 });
-Avatar.displayName = COMPONENT_NAME$1i;
+Avatar.displayName = COMPONENT_NAME$1h;
 Avatar.className = CLASSNAME$1g;
-Avatar.defaultProps = DEFAULT_PROPS$17;
+Avatar.defaultProps = DEFAULT_PROPS$18;
 
 /**
  * Alignments.
@@ -695,8 +695,6 @@ const ColorPalette = {
   red: 'red',
   light: 'light'};
 
-/** ColorPalette with all possible color variant combination */
-
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -925,7 +923,7 @@ function bem(baseName) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1h = 'Badge';
+const COMPONENT_NAME$1g = 'Badge';
 
 /**
  * Component default class name and class prefix.
@@ -938,7 +936,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$16 = {
+const DEFAULT_PROPS$17 = {
   color: ColorPalette.primary
 };
 
@@ -952,7 +950,7 @@ const Badge$1 = props => {
   const {
     children,
     className,
-    color = DEFAULT_PROPS$16.color,
+    color = DEFAULT_PROPS$17.color,
     ref,
     ...forwardedProps
   } = props;
@@ -965,9 +963,9 @@ const Badge$1 = props => {
     children: children
   });
 };
-Badge$1.displayName = COMPONENT_NAME$1h;
+Badge$1.displayName = COMPONENT_NAME$1g;
 Badge$1.className = CLASSNAME$1f;
-Badge$1.defaultProps = DEFAULT_PROPS$16;
+Badge$1.defaultProps = DEFAULT_PROPS$17;
 
 /**
  * Defines the props of the component.
@@ -990,7 +988,7 @@ Badge.displayName = Badge$1.displayName;
 Badge.className = Badge$1.className;
 Badge.defaultProps = Badge$1.defaultProps;
 
-const COMPONENT_NAME$1g = 'BadgeWrapper';
+const COMPONENT_NAME$1f = 'BadgeWrapper';
 const CLASSNAME$1e = 'lumx-badge-wrapper';
 const {
   block: block$10,
@@ -1021,17 +1019,18 @@ const BadgeWrapper = forwardRef((props, ref) => {
     ref
   });
 });
-BadgeWrapper.displayName = COMPONENT_NAME$1g;
+BadgeWrapper.displayName = COMPONENT_NAME$1f;
 BadgeWrapper.className = CLASSNAME$1e;
 
 /**
  * Render clickable element (link, button or custom element)
  * (also does some basic disabled state handling)
  */
-const RawClickable$1 = props => {
+const RawClickable = props => {
   const {
     children,
-    onClick,
+    handleClick,
+    handleKeyPress,
     disabled,
     isDisabled = disabled,
     'aria-disabled': ariaDisabled,
@@ -1055,13 +1054,14 @@ const RawClickable$1 = props => {
     "aria-disabled": isAnyDisabled || undefined,
     ...forwardedProps,
     ...clickableProps,
+    onKeyPress: handleKeyPress,
     onClick: event => {
       if (isAnyDisabled) {
         event.stopPropagation();
         event.preventDefault();
         return;
       }
-      onClick?.(event);
+      handleClick?.(event);
     },
     children: children
   });
@@ -1070,7 +1070,7 @@ const RawClickable$1 = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1f = 'ButtonRoot';
+const COMPONENT_NAME$1e = 'ButtonRoot';
 const BUTTON_WRAPPER_CLASSNAME = `lumx-button-wrapper`;
 const {
   block: buttonWrapperBlock
@@ -1158,7 +1158,7 @@ const ButtonRoot = props => {
     [`variant-${variant}`]: Boolean(variant),
     'is-full-width': fullWidth
   }));
-  return RawClickable$1({
+  return RawClickable({
     as: linkAs || (forwardedProps.href ? 'a' : 'button'),
     ...forwardedProps,
     'aria-disabled': ariaDisabled,
@@ -1168,7 +1168,7 @@ const ButtonRoot = props => {
     children
   });
 };
-ButtonRoot.displayName = COMPONENT_NAME$1f;
+ButtonRoot.displayName = COMPONENT_NAME$1e;
 ButtonRoot.defaultProps = {};
 
 /**
@@ -1178,7 +1178,7 @@ ButtonRoot.defaultProps = {};
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1e = 'Button';
+const COMPONENT_NAME$1d = 'Button';
 
 /**
  * Component default class name and class prefix.
@@ -1191,7 +1191,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$15 = {
+const DEFAULT_PROPS$16 = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1205,10 +1205,10 @@ const DEFAULT_PROPS$15 = {
 const Button$1 = props => {
   const {
     className,
-    emphasis = DEFAULT_PROPS$15.emphasis,
+    emphasis = DEFAULT_PROPS$16.emphasis,
     leftIcon,
     rightIcon,
-    size = DEFAULT_PROPS$15.size,
+    size = DEFAULT_PROPS$16.size,
     ...forwardedProps
   } = props;
   const buttonClassName = classnames(className, modifier({
@@ -1223,9 +1223,9 @@ const Button$1 = props => {
     variant: 'button'
   });
 };
-Button$1.displayName = COMPONENT_NAME$1e;
+Button$1.displayName = COMPONENT_NAME$1d;
 Button$1.className = CLASSNAME$1d;
-Button$1.defaultProps = DEFAULT_PROPS$15;
+Button$1.defaultProps = DEFAULT_PROPS$16;
 
 /**
  * Properties of a component to use to determine it's name.
@@ -1257,6 +1257,10 @@ const Button = forwardRef((props, ref) => {
     disabledStateProps,
     otherProps
   } = useDisableStateProps(props);
+  const {
+    onClick,
+    ...restOfOtherProps
+  } = otherProps;
   const {
     leftIcon,
     rightIcon,
@@ -1266,8 +1270,9 @@ const Button = forwardRef((props, ref) => {
     ref,
     theme: defaultTheme,
     ...disabledStateProps,
-    ...otherProps,
+    ...restOfOtherProps,
     'aria-disabled': isAnyDisabled,
+    handleClick: onClick,
     children: /*#__PURE__*/jsxs(Fragment, {
       children: [leftIcon && !isEmpty(leftIcon) &&
       /*#__PURE__*/
@@ -1291,11 +1296,11 @@ const Button = forwardRef((props, ref) => {
     })
   });
 });
-Button.displayName = COMPONENT_NAME$1e;
+Button.displayName = COMPONENT_NAME$1d;
 Button.className = CLASSNAME$1d;
-Button.defaultProps = DEFAULT_PROPS$15;
+Button.defaultProps = DEFAULT_PROPS$16;
 
-const COMPONENT_NAME$1d = 'Icon';
+const COMPONENT_NAME$1c = 'Icon';
 const IconClassName = 'lumx-icon';
 
 /**
@@ -1310,7 +1315,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$14 = {};
+const DEFAULT_PROPS$15 = {};
 
 /**
  * Icon component.
@@ -1388,14 +1393,14 @@ const Icon$1 = props => {
     })
   });
 };
-Icon$1.displayName = COMPONENT_NAME$1d;
+Icon$1.displayName = COMPONENT_NAME$1c;
 Icon$1.className = CLASSNAME$1c;
-Icon$1.defaultProps = DEFAULT_PROPS$14;
+Icon$1.defaultProps = DEFAULT_PROPS$15;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1c = 'IconButton';
+const COMPONENT_NAME$1b = 'IconButton';
 
 /**
  * Component default class name and class prefix.
@@ -1405,7 +1410,7 @@ const CLASSNAME$1b = 'lumx-icon-button';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$13 = {
+const DEFAULT_PROPS$14 = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1418,11 +1423,11 @@ const DEFAULT_PROPS$13 = {
  */
 const IconButton$1 = props => {
   const {
-    emphasis = DEFAULT_PROPS$13.emphasis,
+    emphasis = DEFAULT_PROPS$14.emphasis,
     image,
     icon,
     label,
-    size = DEFAULT_PROPS$13.size,
+    size = DEFAULT_PROPS$14.size,
     ...forwardedProps
   } = props;
   const defaultChildren = image ? /*#__PURE__*/jsx("img", {
@@ -1441,9 +1446,9 @@ const IconButton$1 = props => {
     children: defaultChildren
   });
 };
-IconButton$1.displayName = COMPONENT_NAME$1c;
+IconButton$1.displayName = COMPONENT_NAME$1b;
 IconButton$1.className = CLASSNAME$1b;
-IconButton$1.defaultProps = DEFAULT_PROPS$13;
+IconButton$1.defaultProps = DEFAULT_PROPS$14;
 
 /**
  * IconButton component.
@@ -1465,6 +1470,10 @@ const IconButton = forwardRef((props, ref) => {
     disabledStateProps,
     otherProps
   } = useDisableStateProps(forwardedProps);
+  const {
+    onClick,
+    ...restOfOtherProps
+  } = otherProps;
   return /*#__PURE__*/jsx(Tooltip, {
     label: hideTooltip ? '' : label,
     ...tooltipProps,
@@ -1472,20 +1481,21 @@ const IconButton = forwardRef((props, ref) => {
       ref,
       theme: defaultTheme,
       ...disabledStateProps,
-      ...otherProps,
+      ...restOfOtherProps,
+      handleClick: onClick,
       'aria-disabled': isAnyDisabled,
       label
     })
   });
 });
-IconButton.displayName = COMPONENT_NAME$1c;
+IconButton.displayName = COMPONENT_NAME$1b;
 IconButton.className = CLASSNAME$1b;
-IconButton.defaultProps = DEFAULT_PROPS$13;
+IconButton.defaultProps = DEFAULT_PROPS$14;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1b = 'ButtonGroup';
+const COMPONENT_NAME$1a = 'ButtonGroup';
 
 /**
  * Component default class name and class prefix.
@@ -1495,7 +1505,7 @@ const CLASSNAME$1a = 'lumx-button-group';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$12 = {};
+const DEFAULT_PROPS$13 = {};
 
 /**
  * ButtonGroup component.
@@ -1515,9 +1525,9 @@ const ButtonGroup$1 = props => {
     children: children
   });
 };
-ButtonGroup$1.displayName = COMPONENT_NAME$1b;
+ButtonGroup$1.displayName = COMPONENT_NAME$1a;
 ButtonGroup$1.className = CLASSNAME$1a;
-ButtonGroup$1.defaultProps = DEFAULT_PROPS$12;
+ButtonGroup$1.defaultProps = DEFAULT_PROPS$13;
 
 /**
  * ButtonGroup component.
@@ -1532,17 +1542,17 @@ const ButtonGroup = forwardRef((props, ref) => {
     ...props
   });
 });
-ButtonGroup.displayName = COMPONENT_NAME$1b;
+ButtonGroup.displayName = COMPONENT_NAME$1a;
 ButtonGroup.className = CLASSNAME$1a;
-ButtonGroup.defaultProps = DEFAULT_PROPS$12;
+ButtonGroup.defaultProps = DEFAULT_PROPS$13;
 
-const COMPONENT_NAME$1a = 'InputLabel';
+const COMPONENT_NAME$19 = 'InputLabel';
 const InputLabelClassName = 'lumx-input-label';
 const CLASSNAME$19 = InputLabelClassName;
 const {
   block: block$_
 } = bem(CLASSNAME$19);
-const DEFAULT_PROPS$11 = {};
+const DEFAULT_PROPS$12 = {};
 
 /**
  * InputLabel component.
@@ -1570,9 +1580,9 @@ function InputLabel$1(props) {
     children: children
   });
 }
-InputLabel$1.displayName = COMPONENT_NAME$1a;
+InputLabel$1.displayName = COMPONENT_NAME$19;
 InputLabel$1.className = CLASSNAME$19;
-InputLabel$1.defaultProps = DEFAULT_PROPS$11;
+InputLabel$1.defaultProps = DEFAULT_PROPS$12;
 
 const INPUT_HELPER_CONFIGURATION = {
   [Kind.error]: {
@@ -1586,7 +1596,7 @@ const INPUT_HELPER_CONFIGURATION = {
   }
 };
 
-const COMPONENT_NAME$19 = 'InputHelper';
+const COMPONENT_NAME$18 = 'InputHelper';
 const InputHelperClassName = 'lumx-input-helper';
 
 /**
@@ -1601,7 +1611,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$10 = {
+const DEFAULT_PROPS$11 = {
   kind: Kind.info
 };
 
@@ -1612,7 +1622,7 @@ function InputHelper$1(props) {
   const {
     children,
     className,
-    kind = DEFAULT_PROPS$10.kind,
+    kind = DEFAULT_PROPS$11.kind,
     theme,
     ref,
     ...forwardedProps
@@ -1630,9 +1640,9 @@ function InputHelper$1(props) {
     children: children
   });
 }
-InputHelper$1.displayName = COMPONENT_NAME$19;
+InputHelper$1.displayName = COMPONENT_NAME$18;
 InputHelper$1.className = CLASSNAME$18;
-InputHelper$1.defaultProps = DEFAULT_PROPS$10;
+InputHelper$1.defaultProps = DEFAULT_PROPS$11;
 
 const INTERMEDIATE_STATE = 'intermediate';
 
@@ -1643,7 +1653,7 @@ const INTERMEDIATE_STATE = 'intermediate';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$18 = 'Checkbox';
+const COMPONENT_NAME$17 = 'Checkbox';
 
 /**
  * Component default class name and class prefix.
@@ -1671,7 +1681,7 @@ const Checkbox$1 = props => {
     label,
     name,
     ref,
-    onChange,
+    handleChange,
     theme,
     value,
     inputProps = {},
@@ -1680,9 +1690,9 @@ const Checkbox$1 = props => {
     ...forwardedProps
   } = props;
   const intermediateState = isChecked === INTERMEDIATE_STATE;
-  const handleChange = event => {
-    if (onChange) {
-      onChange(!isChecked, value, name, event);
+  const handleOnChange = event => {
+    if (handleChange) {
+      handleChange(!isChecked, value, name, event);
     }
   };
   return /*#__PURE__*/jsxs("div", {
@@ -1705,7 +1715,7 @@ const Checkbox$1 = props => {
         name: name,
         value: value,
         checked: isChecked,
-        onChange: handleChange,
+        onChange: handleOnChange,
         "aria-describedby": helper ? `${inputId}-helper` : undefined,
         "aria-checked": intermediateState ? 'mixed' : Boolean(isChecked),
         ...(inputProps?.readOnly ? {
@@ -1747,7 +1757,7 @@ const Checkbox$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$$ = {};
+const DEFAULT_PROPS$10 = {};
 
 /**
  * Checkbox component.
@@ -1794,7 +1804,7 @@ const Checkbox = forwardRef((props, ref) => {
     isChecked,
     label,
     name,
-    onChange,
+    handleChange: onChange,
     theme,
     value,
     inputProps: {
@@ -1807,9 +1817,9 @@ const Checkbox = forwardRef((props, ref) => {
     inputId
   });
 });
-Checkbox.displayName = COMPONENT_NAME$18;
+Checkbox.displayName = COMPONENT_NAME$17;
 Checkbox.className = CLASSNAME$17;
-Checkbox.defaultProps = DEFAULT_PROPS$$;
+Checkbox.defaultProps = DEFAULT_PROPS$10;
 
 /**
  * Wrap mouse event handler to stop event propagation.
@@ -1830,7 +1840,7 @@ function useStopPropagation(handler) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$17 = 'Chip';
+const COMPONENT_NAME$16 = 'Chip';
 
 /**
  * Component default class name and class prefix.
@@ -1844,7 +1854,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$_ = {
+const DEFAULT_PROPS$$ = {
   size: Size$1.m
 };
 
@@ -1874,7 +1884,7 @@ const Chip = forwardRef((props, ref) => {
     onAfterClick,
     onBeforeClick,
     onClick,
-    size = DEFAULT_PROPS$_.size,
+    size = DEFAULT_PROPS$$.size,
     theme = defaultTheme,
     href,
     onKeyDown,
@@ -1944,9 +1954,9 @@ const Chip = forwardRef((props, ref) => {
     })
   );
 });
-Chip.displayName = COMPONENT_NAME$17;
+Chip.displayName = COMPONENT_NAME$16;
 Chip.className = CLASSNAME$16;
-Chip.defaultProps = DEFAULT_PROPS$_;
+Chip.defaultProps = DEFAULT_PROPS$$;
 
 const INITIAL_STATE_ACTIVE_CHIP = -1;
 
@@ -2002,12 +2012,12 @@ const useChipGroupNavigation = (chips, onChipDeleted, initialActiveChip = INITIA
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Z = {};
+const DEFAULT_PROPS$_ = {};
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$16 = 'ChipGroup';
+const COMPONENT_NAME$15 = 'ChipGroup';
 
 /**
  * Component default class name and class prefix.
@@ -2035,9 +2045,9 @@ const InternalChipGroup = forwardRef((props, ref) => {
     children: children
   });
 });
-InternalChipGroup.displayName = COMPONENT_NAME$16;
+InternalChipGroup.displayName = COMPONENT_NAME$15;
 InternalChipGroup.className = CLASSNAME$15;
-InternalChipGroup.defaultProps = DEFAULT_PROPS$Z;
+InternalChipGroup.defaultProps = DEFAULT_PROPS$_;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
 });
@@ -2235,7 +2245,7 @@ const CommentBlockVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$15 = 'CommentBlock';
+const COMPONENT_NAME$14 = 'CommentBlock';
 
 /**
  * Component default class name and class prefix.
@@ -2249,7 +2259,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Y = {
+const DEFAULT_PROPS$Z = {
   variant: CommentBlockVariant.indented
 };
 
@@ -2279,7 +2289,7 @@ const CommentBlock = forwardRef((props, ref) => {
     onMouseLeave,
     text,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$Y.variant,
+    variant = DEFAULT_PROPS$Z.variant,
     ...forwardedProps
   } = props;
   const hasChildren = Children.count(children) > 0;
@@ -2346,9 +2356,9 @@ const CommentBlock = forwardRef((props, ref) => {
     })]
   });
 });
-CommentBlock.displayName = COMPONENT_NAME$15;
+CommentBlock.displayName = COMPONENT_NAME$14;
 CommentBlock.className = CLASSNAME$13;
-CommentBlock.defaultProps = DEFAULT_PROPS$Y;
+CommentBlock.defaultProps = DEFAULT_PROPS$Z;
 
 /**
  * Add a number of months from a date while resetting the day to prevent month length mismatches.
@@ -2368,7 +2378,7 @@ const isDateValid = date => date instanceof Date && !Number.isNaN(date.getTime()
 /**
  * Component display name.
  */
-const COMPONENT_NAME$14 = 'DatePicker';
+const COMPONENT_NAME$13 = 'DatePicker';
 
 /**
  * Component default class name and class prefix.
@@ -2602,7 +2612,7 @@ const {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$13 = 'DatePickerControlled';
+const COMPONENT_NAME$12 = 'DatePickerControlled';
 
 /**
  * DatePickerControlled component.
@@ -2792,7 +2802,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
     })]
   });
 });
-DatePickerControlled.displayName = COMPONENT_NAME$13;
+DatePickerControlled.displayName = COMPONENT_NAME$12;
 DatePickerControlled.className = CLASSNAME$12;
 
 /**
@@ -2835,7 +2845,7 @@ const DatePicker = forwardRef((props, ref) => {
     onMonthChange: setSelectedMonth
   });
 });
-DatePicker.displayName = COMPONENT_NAME$14;
+DatePicker.displayName = COMPONENT_NAME$13;
 DatePicker.className = CLASSNAME$12;
 
 const useBooleanState = defaultValue => {
@@ -2849,7 +2859,7 @@ const useBooleanState = defaultValue => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$12 = 'DatePickerField';
+const COMPONENT_NAME$11 = 'DatePickerField';
 
 /**
  * DatePickerField component.
@@ -2938,7 +2948,7 @@ const DatePickerField = forwardRef((props, ref) => {
     }) : null]
   });
 });
-DatePickerField.displayName = COMPONENT_NAME$12;
+DatePickerField.displayName = COMPONENT_NAME$11;
 
 /**
  * Optional global `window` instance (not defined when running SSR).
@@ -3439,7 +3449,7 @@ const isFooter$1 = isComponent('footer');
 /**
  * Component display name.
  */
-const COMPONENT_NAME$11 = 'Dialog';
+const COMPONENT_NAME$10 = 'Dialog';
 
 /**
  * Component default class name and class prefix.
@@ -3453,7 +3463,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$X = {
+const DEFAULT_PROPS$Y = {
   size: Size$1.big,
   disableBodyScroll: true
 };
@@ -3484,11 +3494,11 @@ const Dialog = forwardRef((props, ref) => {
     parentElement,
     contentRef,
     preventAutoClose,
-    size = DEFAULT_PROPS$X.size,
+    size = DEFAULT_PROPS$Y.size,
     zIndex,
     dialogProps,
     onVisibilityChange,
-    disableBodyScroll = DEFAULT_PROPS$X.disableBodyScroll,
+    disableBodyScroll = DEFAULT_PROPS$Y.disableBodyScroll,
     preventCloseOnClick,
     preventCloseOnEscape,
     ...forwardedProps
@@ -3626,14 +3636,14 @@ const Dialog = forwardRef((props, ref) => {
     })
   }) : null;
 });
-Dialog.displayName = COMPONENT_NAME$11;
+Dialog.displayName = COMPONENT_NAME$10;
 Dialog.className = CLASSNAME$11;
-Dialog.defaultProps = DEFAULT_PROPS$X;
+Dialog.defaultProps = DEFAULT_PROPS$Y;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$10 = 'Divider';
+const COMPONENT_NAME$$ = 'Divider';
 
 /**
  * Component default class name and class prefix.
@@ -3672,7 +3682,7 @@ const Divider$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$W = {};
+const DEFAULT_PROPS$X = {};
 
 /**
  * Divider component.
@@ -3693,14 +3703,14 @@ const Divider = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-Divider.displayName = COMPONENT_NAME$10;
+Divider.displayName = COMPONENT_NAME$$;
 Divider.className = CLASSNAME$10;
-Divider.defaultProps = DEFAULT_PROPS$W;
+Divider.defaultProps = DEFAULT_PROPS$X;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$$ = 'DragHandle';
+const COMPONENT_NAME$_ = 'DragHandle';
 
 /**
  * Component default class name and class prefix.
@@ -3737,7 +3747,7 @@ const DragHandle = forwardRef((props, ref) => {
     })
   });
 });
-DragHandle.displayName = COMPONENT_NAME$$;
+DragHandle.displayName = COMPONENT_NAME$_;
 DragHandle.className = CLASSNAME$$;
 
 const INITIAL_INDEX = -1;
@@ -3907,7 +3917,7 @@ const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNav
 /**
  * Component display name.
  */
-const COMPONENT_NAME$_ = 'List';
+const COMPONENT_NAME$Z = 'List';
 
 /**
  * Component default class name and class prefix.
@@ -3920,7 +3930,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$V = {
+const DEFAULT_PROPS$W = {
   tabIndex: -1
 };
 
@@ -3939,7 +3949,7 @@ const InternalList = forwardRef((props, ref) => {
     isClickable,
     itemPadding,
     onListItemSelected,
-    tabIndex = DEFAULT_PROPS$V.tabIndex,
+    tabIndex = DEFAULT_PROPS$W.tabIndex,
     ...forwardedProps
   } = props;
   const adjustedItemPadding = itemPadding ?? (isClickable ? Size$1.big : undefined);
@@ -3953,9 +3963,9 @@ const InternalList = forwardRef((props, ref) => {
     children: children
   });
 });
-InternalList.displayName = COMPONENT_NAME$_;
+InternalList.displayName = COMPONENT_NAME$Z;
 InternalList.className = CLASSNAME$_;
-InternalList.defaultProps = DEFAULT_PROPS$V;
+InternalList.defaultProps = DEFAULT_PROPS$W;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
 });
@@ -4074,7 +4084,7 @@ function getNodeName(element) {
   return element ? (element.nodeName || '').toLowerCase() : null;
 }
 
-/*:: import type { Window } from '../types.js'; */
+/*:: import type { Window } from '../types'; */
 
 /*:: declare function getWindow(node: Node | Window): Window; */
 function getWindow(node) {
@@ -6386,7 +6396,7 @@ function usePopoverStyle({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Z = 'Popover';
+const COMPONENT_NAME$Y = 'Popover';
 
 /**
  * Component default class name and class prefix.
@@ -6400,7 +6410,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$U = {
+const DEFAULT_PROPS$V = {
   elevation: 3,
   placement: Placement.AUTO,
   focusAnchorOnClose: true,
@@ -6417,24 +6427,24 @@ const _InnerPopover = forwardRef((props, ref) => {
     className,
     closeOnClickAway,
     closeOnEscape,
-    elevation = DEFAULT_PROPS$U.elevation,
+    elevation = DEFAULT_PROPS$V.elevation,
     focusElement,
     hasArrow,
     isOpen,
     onClose,
     parentElement,
-    usePortal = DEFAULT_PROPS$U.usePortal,
-    focusAnchorOnClose = DEFAULT_PROPS$U.focusAnchorOnClose,
+    usePortal = DEFAULT_PROPS$V.usePortal,
+    focusAnchorOnClose = DEFAULT_PROPS$V.focusAnchorOnClose,
     withFocusTrap,
     boundaryRef,
     fitToAnchorWidth,
     fitWithinViewportHeight,
     focusTrapZoneElement,
     offset,
-    placement = DEFAULT_PROPS$U.placement,
+    placement = DEFAULT_PROPS$V.placement,
     style,
     theme,
-    zIndex = DEFAULT_PROPS$U.zIndex,
+    zIndex = DEFAULT_PROPS$V.zIndex,
     ...forwardedProps
   } = props;
   const popoverRef = useRef(null);
@@ -6506,7 +6516,7 @@ const _InnerPopover = forwardRef((props, ref) => {
     })
   }) : null;
 });
-_InnerPopover.displayName = COMPONENT_NAME$Z;
+_InnerPopover.displayName = COMPONENT_NAME$Y;
 
 /**
  * Popover component.
@@ -6518,9 +6528,9 @@ _InnerPopover.displayName = COMPONENT_NAME$Z;
 const Popover = skipRender(
 // Skip render in SSR
 () => Boolean(DOCUMENT), _InnerPopover);
-Popover.displayName = COMPONENT_NAME$Z;
+Popover.displayName = COMPONENT_NAME$Y;
 Popover.className = CLASSNAME$Z;
-Popover.defaultProps = DEFAULT_PROPS$U;
+Popover.defaultProps = DEFAULT_PROPS$V;
 
 // The error margin in px we want to have for triggering infinite scroll
 const SCROLL_TRIGGER_MARGIN = 5;
@@ -6566,7 +6576,7 @@ const useInfiniteScroll = (ref, callback, callbackOnMount = false, scrollTrigger
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Y = 'Dropdown';
+const COMPONENT_NAME$X = 'Dropdown';
 
 /**
  * Component default class name and class prefix.
@@ -6580,7 +6590,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$T = {
+const DEFAULT_PROPS$U = {
   closeOnClick: true,
   closeOnClickAway: true,
   closeOnEscape: true,
@@ -6603,18 +6613,18 @@ const Dropdown = forwardRef((props, ref) => {
     anchorRef,
     children,
     className,
-    closeOnClick = DEFAULT_PROPS$T.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$T.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$T.closeOnEscape,
-    fitToAnchorWidth = DEFAULT_PROPS$T.fitToAnchorWidth,
-    fitWithinViewportHeight = DEFAULT_PROPS$T.fitWithinViewportHeight,
+    closeOnClick = DEFAULT_PROPS$U.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$U.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$U.closeOnEscape,
+    fitToAnchorWidth = DEFAULT_PROPS$U.fitToAnchorWidth,
+    fitWithinViewportHeight = DEFAULT_PROPS$U.fitWithinViewportHeight,
     isOpen,
     offset,
-    focusAnchorOnClose = DEFAULT_PROPS$T.focusAnchorOnClose,
+    focusAnchorOnClose = DEFAULT_PROPS$U.focusAnchorOnClose,
     onClose,
     onInfiniteScroll,
-    placement = DEFAULT_PROPS$T.placement,
-    shouldFocusOnOpen = DEFAULT_PROPS$T.shouldFocusOnOpen,
+    placement = DEFAULT_PROPS$U.placement,
+    shouldFocusOnOpen = DEFAULT_PROPS$U.shouldFocusOnOpen,
     zIndex,
     ...forwardedProps
   } = props;
@@ -6658,14 +6668,14 @@ const Dropdown = forwardRef((props, ref) => {
     })
   }) : null;
 });
-Dropdown.displayName = COMPONENT_NAME$Y;
+Dropdown.displayName = COMPONENT_NAME$X;
 Dropdown.className = CLASSNAME$Y;
-Dropdown.defaultProps = DEFAULT_PROPS$T;
+Dropdown.defaultProps = DEFAULT_PROPS$U;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$X = 'ExpansionPanel';
+const COMPONENT_NAME$W = 'ExpansionPanel';
 
 /**
  * Component default class name and class prefix.
@@ -6679,7 +6689,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$S = {
+const DEFAULT_PROPS$T = {
   closeMode: 'unmount'
 };
 const isDragHandle = isComponent(DragHandle);
@@ -6697,7 +6707,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     className,
-    closeMode = DEFAULT_PROPS$S.closeMode,
+    closeMode = DEFAULT_PROPS$T.closeMode,
     children: anyChildren,
     hasBackground,
     hasHeaderDivider,
@@ -6812,13 +6822,13 @@ const ExpansionPanel = forwardRef((props, ref) => {
     })]
   });
 });
-ExpansionPanel.displayName = COMPONENT_NAME$X;
+ExpansionPanel.displayName = COMPONENT_NAME$W;
 ExpansionPanel.className = CLASSNAME$X;
-ExpansionPanel.defaultProps = DEFAULT_PROPS$S;
+ExpansionPanel.defaultProps = DEFAULT_PROPS$T;
 
-const COMPONENT_NAME$W = 'Flag';
+const COMPONENT_NAME$V = 'Flag';
 const CLASSNAME$W = 'lumx-flag';
-const DEFAULT_PROPS$R = {};
+const DEFAULT_PROPS$S = {};
 const {
   block: block$N,
   element: element$B
@@ -6880,9 +6890,9 @@ const Flag = forwardRef((props, ref) => {
     Text
   });
 });
-Flag.displayName = COMPONENT_NAME$W;
+Flag.displayName = COMPONENT_NAME$V;
 Flag.className = CLASSNAME$W;
-Flag.defaultProps = DEFAULT_PROPS$R;
+Flag.defaultProps = DEFAULT_PROPS$S;
 
 /**
  * Defines the props of the component.
@@ -6891,7 +6901,7 @@ Flag.defaultProps = DEFAULT_PROPS$R;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$V = 'FlexBox';
+const COMPONENT_NAME$U = 'FlexBox';
 
 /**
  * Component default class name and class prefix.
@@ -6955,13 +6965,13 @@ const FlexBox = forwardRef((props, ref) => {
     children: children
   });
 });
-FlexBox.displayName = COMPONENT_NAME$V;
+FlexBox.displayName = COMPONENT_NAME$U;
 FlexBox.className = CLASSNAME$V;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$U = 'GenericBlock';
+const COMPONENT_NAME$T = 'GenericBlock';
 
 /**
  * Component default class name and class prefix.
@@ -6975,7 +6985,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Q = {
+const DEFAULT_PROPS$R = {
   gap: Size$1.big,
   orientation: Orientation$1.horizontal
 };
@@ -7005,8 +7015,8 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     children,
     actions,
     actionsProps,
-    gap = DEFAULT_PROPS$Q.gap,
-    orientation = DEFAULT_PROPS$Q.orientation,
+    gap = DEFAULT_PROPS$R.gap,
+    orientation = DEFAULT_PROPS$R.orientation,
     contentProps,
     ...forwardedProps
   } = props;
@@ -7058,9 +7068,9 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     })]
   });
 });
-BaseGenericBlock.displayName = COMPONENT_NAME$U;
+BaseGenericBlock.displayName = COMPONENT_NAME$T;
 BaseGenericBlock.className = CLASSNAME$U;
-BaseGenericBlock.defaultProps = DEFAULT_PROPS$Q;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS$R;
 const GenericBlock = Object.assign(BaseGenericBlock, {
   Figure,
   Content,
@@ -7098,7 +7108,7 @@ const defaultContext = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$T = 'Heading';
+const COMPONENT_NAME$S = 'Heading';
 
 /**
  * Component default class name and class prefix.
@@ -7108,7 +7118,7 @@ const CLASSNAME$T = 'lumx-heading';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$P = {};
+const DEFAULT_PROPS$Q = {};
 
 /**
  * Get Heading component common props
@@ -7196,7 +7206,7 @@ function wrapChildrenIconWithSpaces(children) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$S = 'Text';
+const COMPONENT_NAME$R = 'Text';
 
 /**
  * Component default class name and class prefix.
@@ -7209,7 +7219,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$O = {};
+const DEFAULT_PROPS$P = {};
 
 /**
  * Text component common props
@@ -7294,9 +7304,9 @@ const Text = forwardRef((props, ref) => {
     children: wrapChildrenIconWithSpaces(children)
   });
 });
-Text.displayName = COMPONENT_NAME$S;
+Text.displayName = COMPONENT_NAME$R;
 Text.className = CLASSNAME$S;
-Text.defaultProps = DEFAULT_PROPS$O;
+Text.defaultProps = DEFAULT_PROPS$P;
 
 const HeadingLevelContext = /*#__PURE__*/createContext(defaultContext);
 
@@ -7331,9 +7341,9 @@ const Heading = forwardRef((props, ref) => {
     children: children
   });
 });
-Heading.displayName = COMPONENT_NAME$T;
+Heading.displayName = COMPONENT_NAME$S;
 Heading.className = CLASSNAME$T;
-Heading.defaultProps = DEFAULT_PROPS$P;
+Heading.defaultProps = DEFAULT_PROPS$Q;
 
 /**
  * Computes the next heading level based on the optional prop level or the parent context level.
@@ -7371,7 +7381,7 @@ const HeadingLevelProvider = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$R = 'Grid';
+const COMPONENT_NAME$Q = 'Grid';
 
 /**
  * Component default class name and class prefix.
@@ -7384,7 +7394,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$N = {
+const DEFAULT_PROPS$O = {
   orientation: Orientation$1.horizontal,
   wrap: 'nowrap'
 };
@@ -7402,9 +7412,9 @@ const Grid = forwardRef((props, ref) => {
     className,
     gutter,
     hAlign,
-    orientation = DEFAULT_PROPS$N.orientation,
+    orientation = DEFAULT_PROPS$O.orientation,
     vAlign,
-    wrap = DEFAULT_PROPS$N.wrap,
+    wrap = DEFAULT_PROPS$O.wrap,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
@@ -7420,14 +7430,14 @@ const Grid = forwardRef((props, ref) => {
     children: children
   });
 });
-Grid.displayName = COMPONENT_NAME$R;
+Grid.displayName = COMPONENT_NAME$Q;
 Grid.className = CLASSNAME$R;
-Grid.defaultProps = DEFAULT_PROPS$N;
+Grid.defaultProps = DEFAULT_PROPS$O;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Q = 'GridItem';
+const COMPONENT_NAME$P = 'GridItem';
 
 /**
  * Component default class name and class prefix.
@@ -7464,13 +7474,13 @@ const GridItem = forwardRef((props, ref) => {
     children: children
   });
 });
-GridItem.displayName = COMPONENT_NAME$Q;
+GridItem.displayName = COMPONENT_NAME$P;
 GridItem.className = CLASSNAME$Q;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$P = 'GridColumn';
+const COMPONENT_NAME$O = 'GridColumn';
 
 /**
  * Component default class name and class prefix.
@@ -7480,7 +7490,7 @@ const CLASSNAME$P = 'lumx-grid-column';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$M = {};
+const DEFAULT_PROPS$N = {};
 
 /**
  * The GridColumn is a layout component that can display children in a grid
@@ -7488,10 +7498,9 @@ const DEFAULT_PROPS$M = {};
  * with a number of column that reduce when there is not enough space for each item.
  *
  * @param props Component props.
- * @param ref Component ref.
- * @return React element.
+ * @return JSX element.
  */
-const GridColumn = forwardRef((props, ref) => {
+const GridColumn$1 = props => {
   const {
     as: Component = 'div',
     gap,
@@ -7500,12 +7509,13 @@ const GridColumn = forwardRef((props, ref) => {
     children,
     className,
     style = {},
+    ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx(Component, {
     ...forwardedProps,
     ref: ref,
-    className: classNames.join(className, CLASSNAME$P),
+    className: classnames(className, CLASSNAME$P),
     style: {
       ...style,
       ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
@@ -7514,8 +7524,38 @@ const GridColumn = forwardRef((props, ref) => {
     },
     children: children
   });
+};
+GridColumn$1.displayName = COMPONENT_NAME$O;
+GridColumn$1.className = CLASSNAME$P;
+GridColumn$1.defaultProps = DEFAULT_PROPS$N;
+
+/**
+ * Defines the props of the component.
+ */
+
+// Re-export types for backward compatibility
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$M = {};
+
+/**
+ * The GridColumn is a layout component that can display children in a grid
+ * with custom display properties. It also comes with a responsive design,
+ * with a number of column that reduce when there is not enough space for each item.
+ *
+ * @param props Component props.
+ * @param ref Component ref.
+ * @return React element.
+ */
+const GridColumn = forwardRef((props, ref) => {
+  return GridColumn$1({
+    ref,
+    ...props
+  });
 });
-GridColumn.displayName = COMPONENT_NAME$P;
+GridColumn.displayName = COMPONENT_NAME$O;
 GridColumn.className = CLASSNAME$P;
 GridColumn.defaultProps = DEFAULT_PROPS$M;
 
@@ -7621,7 +7661,7 @@ const ImageBlockCaptionPosition = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$O = 'ImageBlock';
+const COMPONENT_NAME$N = 'ImageBlock';
 
 /**
  * Component default class name and class prefix.
@@ -7705,14 +7745,14 @@ const ImageBlock = forwardRef((props, ref) => {
     })]
   });
 });
-ImageBlock.displayName = COMPONENT_NAME$O;
+ImageBlock.displayName = COMPONENT_NAME$N;
 ImageBlock.className = CLASSNAME$O;
 ImageBlock.defaultProps = DEFAULT_PROPS$L;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$N = 'ImageLightbox';
+const COMPONENT_NAME$M = 'ImageLightbox';
 
 /**
  * Component default class name and class prefix.
@@ -8367,7 +8407,7 @@ function useImageLightbox(props) {
         }
       },
       onClick(e) {
-        open(e.target, options);
+        open(e?.target, options);
       }
     }));
   }, []);
@@ -8436,7 +8476,7 @@ const Inner = forwardRef((props, ref) => {
     })
   });
 });
-Inner.displayName = COMPONENT_NAME$N;
+Inner.displayName = COMPONENT_NAME$M;
 Inner.className = CLASSNAME$N;
 
 /**
@@ -8453,7 +8493,7 @@ const ImageLightbox = Object.assign(Inner, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$M = 'InlineList';
+const COMPONENT_NAME$L = 'InlineList';
 
 /**
  * Component default class name and class prefix.
@@ -8518,7 +8558,7 @@ const InlineList = forwardRef((props, ref) => {
     })
   );
 });
-InlineList.displayName = COMPONENT_NAME$M;
+InlineList.displayName = COMPONENT_NAME$L;
 InlineList.className = CLASSNAME$M;
 InlineList.defaultProps = DEFAULT_PROPS$K;
 
@@ -8563,7 +8603,7 @@ InputLabel.defaultProps = InputLabel$1.defaultProps;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$L = 'Lightbox';
+const COMPONENT_NAME$K = 'Lightbox';
 
 /**
  * Component default class name and class prefix.
@@ -8695,13 +8735,13 @@ const Lightbox = forwardRef((props, ref) => {
     })
   });
 });
-Lightbox.displayName = COMPONENT_NAME$L;
+Lightbox.displayName = COMPONENT_NAME$K;
 Lightbox.className = CLASSNAME$L;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$K = 'Link';
+const COMPONENT_NAME$J = 'Link';
 
 /**
  * Component default class name and class prefix.
@@ -8733,7 +8773,7 @@ const Link$1 = props => {
     theme,
     href,
     target,
-    onClick,
+    handleClick,
     ...forwardedProps
   } = props;
   const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
@@ -8781,7 +8821,7 @@ const Link$1 = props => {
   const elementProps = {
     ref,
     className: combinedClassName,
-    onClick: isDisabled ? undefined : onClick,
+    onClick: isDisabled ? undefined : handleClick,
     ...forwardedProps,
     ...disabledProps
   };
@@ -8848,14 +8888,14 @@ const Link = forwardRef((props, ref) => {
     isDisabled: isAnyDisabled
   });
 });
-Link.displayName = COMPONENT_NAME$K;
+Link.displayName = COMPONENT_NAME$J;
 Link.className = CLASSNAME$K;
 Link.defaultProps = DEFAULT_PROPS$J;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$J = 'LinkPreview';
+const COMPONENT_NAME$I = 'LinkPreview';
 
 /**
  * Component default class name and class prefix.
@@ -8959,7 +8999,7 @@ const LinkPreview = forwardRef((props, ref) => {
     })
   });
 });
-LinkPreview.displayName = COMPONENT_NAME$J;
+LinkPreview.displayName = COMPONENT_NAME$I;
 LinkPreview.className = CLASSNAME$J;
 LinkPreview.defaultProps = DEFAULT_PROPS$I;
 
@@ -8980,7 +9020,7 @@ const renderLink = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$I = 'ListItem';
+const COMPONENT_NAME$H = 'ListItem';
 
 /**
  * Component default class name and class prefix.
@@ -9088,14 +9128,14 @@ const ListItem = forwardRef((props, ref) => {
     })
   });
 });
-ListItem.displayName = COMPONENT_NAME$I;
+ListItem.displayName = COMPONENT_NAME$H;
 ListItem.className = CLASSNAME$I;
 ListItem.defaultProps = DEFAULT_PROPS$H;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$H = 'ListDivider';
+const COMPONENT_NAME$G = 'ListDivider';
 
 /**
  * Component default class name and class prefix.
@@ -9120,13 +9160,13 @@ const ListDivider = forwardRef((props, ref) => {
     className: classNames.join(className, CLASSNAME$H)
   });
 });
-ListDivider.displayName = COMPONENT_NAME$H;
+ListDivider.displayName = COMPONENT_NAME$G;
 ListDivider.className = CLASSNAME$H;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$G = 'ListSubheader';
+const COMPONENT_NAME$F = 'ListSubheader';
 
 /**
  * Component default class name and class prefix.
@@ -9153,13 +9193,13 @@ const ListSubheader = forwardRef((props, ref) => {
     children: children
   });
 });
-ListSubheader.displayName = COMPONENT_NAME$G;
+ListSubheader.displayName = COMPONENT_NAME$F;
 ListSubheader.className = CLASSNAME$G;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$F = 'Message';
+const COMPONENT_NAME$E = 'Message';
 
 /**
  * Component default class name and class prefix.
@@ -9236,13 +9276,13 @@ const Message$1 = props => {
     }), isCloseButtonDisplayed && IconButton$1({
       className: element$r('close-button'),
       icon: mdiClose,
-      onClick,
+      handleClick: onClick,
       label: closeButtonLabel,
       emphasis: Emphasis.low
     })]
   });
 };
-Message$1.displayName = COMPONENT_NAME$F;
+Message$1.displayName = COMPONENT_NAME$E;
 Message$1.className = CLASSNAME$F;
 
 /**
@@ -9258,13 +9298,13 @@ const Message = forwardRef((props, ref) => {
     ref
   });
 });
-Message.displayName = COMPONENT_NAME$F;
+Message.displayName = COMPONENT_NAME$E;
 Message.className = CLASSNAME$F;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$E = 'Mosaic';
+const COMPONENT_NAME$D = 'Mosaic';
 
 /**
  * Component default class name and class prefix.
@@ -9343,24 +9383,10 @@ const Mosaic = forwardRef((props, ref) => {
     })
   });
 });
-Mosaic.displayName = COMPONENT_NAME$E;
+Mosaic.displayName = COMPONENT_NAME$D;
 Mosaic.className = CLASSNAME$E;
 Mosaic.defaultProps = DEFAULT_PROPS$G;
 
-/** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
-const forwardRefPolymorphic = React__default.forwardRef;
-
-/**
- * Render clickable element (link, button or custom element)
- * (also does some basic disabled state handling)
- */
-const RawClickable = forwardRefPolymorphic((props, ref) => {
-  return RawClickable$1({
-    ref,
-    ...props
-  });
-});
-
 const NavigationContext = /*#__PURE__*/createContext({
   orientation: Orientation$1.vertical
 });
@@ -9378,7 +9404,7 @@ const ITEM_CLASSNAME = 'lumx-navigation-item';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$D = 'NavigationSection';
+const COMPONENT_NAME$C = 'NavigationSection';
 
 /**
  * Component default class name and class prefix.
@@ -9413,31 +9439,33 @@ const NavigationSection = forwardRef((props, ref) => {
       [`theme-${theme}`]: Boolean(theme)
     })),
     ref: ref,
-    children: [/*#__PURE__*/jsxs(RawClickable, {
-      as: "button",
+    children: [RawClickable({
+      as: 'button',
       ...forwardedProps,
-      "aria-controls": sectionId,
-      "aria-expanded": isOpen,
+      'aria-controls': sectionId,
+      'aria-expanded': isOpen,
       className: itemElement('link'),
       ref: buttonRef,
-      onClick: event => {
+      handleClick: event => {
         setIsOpen(!isOpen);
         event.stopPropagation();
       },
-      children: [icon ? /*#__PURE__*/jsx(Icon, {
-        className: itemElement('icon'),
-        icon: icon,
-        size: Size$1.xs
-      }) : null, /*#__PURE__*/jsx(Text, {
-        as: "span",
-        truncate: true,
-        className: itemElement('label'),
-        ref: ref,
-        children: label
-      }), /*#__PURE__*/jsx(Icon, {
-        className: classNames.join(itemElement('icon'), sectionElement('chevron')),
-        icon: isOpen ? mdiChevronUp : mdiChevronDown
-      })]
+      children: /*#__PURE__*/jsxs(Fragment, {
+        children: [icon ? /*#__PURE__*/jsx(Icon, {
+          className: itemElement('icon'),
+          icon: icon,
+          size: Size$1.xs
+        }) : null, /*#__PURE__*/jsx(Text, {
+          as: "span",
+          truncate: true,
+          className: itemElement('label'),
+          ref: ref,
+          children: label
+        }), /*#__PURE__*/jsx(Icon, {
+          className: classNames.join(itemElement('icon'), sectionElement('chevron')),
+          icon: isOpen ? mdiChevronUp : mdiChevronDown
+        })]
+      })
     }), isOpen && (isDropdown ? /*#__PURE__*/jsx(Popover, {
       anchorRef: buttonRef,
       isOpen: isOpen,
@@ -9470,9 +9498,12 @@ const NavigationSection = forwardRef((props, ref) => {
     }))]
   });
 });
-NavigationSection.displayName = COMPONENT_NAME$D;
+NavigationSection.displayName = COMPONENT_NAME$C;
 NavigationSection.className = CLASSNAME$D;
 
+/** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
+const forwardRefPolymorphic = React__default.forwardRef;
+
 const {
   block: block$z,
   element: element$p
@@ -9489,6 +9520,7 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
     label,
     isCurrentPage,
     as: Element = 'a',
+    onClick,
     ...forwardedProps
   } = props;
   const theme = useTheme();
@@ -9503,26 +9535,29 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
     children: /*#__PURE__*/jsx(Tooltip, {
       label: tooltipLabel,
       placement: Placement.TOP,
-      children: /*#__PURE__*/jsxs(RawClickable, {
+      children: RawClickable({
         as: Element,
         className: element$p('link', {
           'is-selected': isCurrentPage
         }),
-        ref: ref,
-        "aria-current": isCurrentPage ? 'page' : undefined,
+        ref,
+        'aria-current': isCurrentPage ? 'page' : undefined,
         ...forwardedProps,
-        children: [icon ? /*#__PURE__*/jsx(Icon, {
-          className: element$p('icon'),
-          icon: icon,
-          size: Size$1.xs,
-          theme: theme
-        }) : null, /*#__PURE__*/jsx(Text, {
-          as: "span",
-          truncate: true,
-          className: element$p('label'),
-          ref: labelRef,
-          children: label
-        })]
+        handleClick: onClick,
+        children: /*#__PURE__*/jsxs(Fragment, {
+          children: [icon ? /*#__PURE__*/jsx(Icon, {
+            className: element$p('icon'),
+            icon: icon,
+            size: Size$1.xs,
+            theme: theme
+          }) : null, /*#__PURE__*/jsx(Text, {
+            as: "span",
+            truncate: true,
+            className: element$p('label'),
+            ref: labelRef,
+            children: label
+          })]
+        })
       })
     })
   });
@@ -9534,7 +9569,7 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$C = 'Navigation';
+const COMPONENT_NAME$B = 'Navigation';
 
 /**
  * Component default class name and class prefix.
@@ -9581,7 +9616,7 @@ const Navigation = forwardRef((props, ref) => {
     })
   });
 });
-Navigation.displayName = COMPONENT_NAME$C;
+Navigation.displayName = COMPONENT_NAME$B;
 Navigation.className = CLASSNAME$C;
 Navigation.defaultProps = DEFAULT_PROPS$F;
 
@@ -9614,7 +9649,7 @@ const NOTIFICATION_CONFIGURATION = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$B = 'Notification';
+const COMPONENT_NAME$A = 'Notification';
 
 /**
  * Component default class name and class prefix.
@@ -9672,7 +9707,7 @@ const Notification = forwardRef((props, ref) => {
     if (isFunction(onActionClick)) {
       onActionClick();
     }
-    evt.stopPropagation();
+    evt?.stopPropagation();
   };
   if (!type || !isVisible) {
     return null;
@@ -9716,14 +9751,14 @@ const Notification = forwardRef((props, ref) => {
     })
   });
 });
-Notification.displayName = COMPONENT_NAME$B;
+Notification.displayName = COMPONENT_NAME$A;
 Notification.className = CLASSNAME$B;
 Notification.defaultProps = DEFAULT_PROPS$E;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$A = 'PopoverDialog';
+const COMPONENT_NAME$z = 'PopoverDialog';
 
 /**
  * Component default class name and class prefix.
@@ -9774,14 +9809,14 @@ const PopoverDialog = forwardRef((props, ref) => {
     })
   });
 });
-PopoverDialog.displayName = COMPONENT_NAME$A;
+PopoverDialog.displayName = COMPONENT_NAME$z;
 PopoverDialog.className = CLASSNAME$A;
 PopoverDialog.defaultProps = DEFAULT_PROPS$D;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$z = 'PostBlock';
+const COMPONENT_NAME$y = 'PostBlock';
 
 /**
  * Component default class name and class prefix.
@@ -9875,14 +9910,14 @@ const PostBlock = forwardRef((props, ref) => {
     })]
   });
 });
-PostBlock.displayName = COMPONENT_NAME$z;
+PostBlock.displayName = COMPONENT_NAME$y;
 PostBlock.className = CLASSNAME$z;
 PostBlock.defaultProps = DEFAULT_PROPS$C;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$y = 'ProgressLinear';
+const COMPONENT_NAME$x = 'ProgressLinear';
 
 /**
  * Component default class name and class prefix.
@@ -9891,7 +9926,7 @@ const CLASSNAME$y = 'lumx-progress-linear';
 const {
   block: block$v,
   element: element$l
-} = classNames.bem(CLASSNAME$y);
+} = bem(CLASSNAME$y);
 
 /**
  * Component default props.
@@ -9902,20 +9937,19 @@ const DEFAULT_PROPS$B = {};
  * ProgressLinear component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return JSX element.
  */
-const ProgressLinear = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
+const ProgressLinear$1 = props => {
   const {
     className,
-    theme = defaultTheme,
+    theme,
+    ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$v({
+    className: classnames(className, block$v({
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsx("div", {
@@ -9924,15 +9958,41 @@ const ProgressLinear = forwardRef((props, ref) => {
       className: element$l('line2')
     })]
   });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * ProgressLinear component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ProgressLinear = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    theme = defaultTheme,
+    ...otherProps
+  } = props;
+  return ProgressLinear$1({
+    ref,
+    theme,
+    ...otherProps
+  });
 });
-ProgressLinear.displayName = COMPONENT_NAME$y;
+ProgressLinear.displayName = COMPONENT_NAME$x;
 ProgressLinear.className = CLASSNAME$y;
 ProgressLinear.defaultProps = DEFAULT_PROPS$B;
 
+/* eslint-disable react/no-unknown-property */
+
 /**
  * Component display name.
  */
-const COMPONENT_NAME$x = 'ProgressCircular';
+const COMPONENT_NAME$w = 'ProgressCircular';
 
 /**
  * Component default class name and class prefix.
@@ -9941,37 +10001,38 @@ const CLASSNAME$x = 'lumx-progress-circular';
 const {
   block: block$u,
   element: element$k
-} = classNames.bem(CLASSNAME$x);
+} = bem(CLASSNAME$x);
 
 /**
  * Component default props.
  */
 const DEFAULT_PROPS$A = {
-  size: Size$1.m,
+  size: Size.m,
   display: 'block'
 };
 
 /**
- * ProgressCircularProps component.
+ * ProgressCircular component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return JSX element.
  */
-const ProgressCircular = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
+const ProgressCircular$1 = props => {
   const {
     className,
-    theme = defaultTheme,
+    theme,
     size = DEFAULT_PROPS$A.size,
     display = DEFAULT_PROPS$A.display,
+    ref,
+    circleProps,
+    svgProps,
     ...forwardedProps
   } = props;
   const Element = display === 'block' ? 'div' : 'span';
   return /*#__PURE__*/jsxs(Element, {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$u({
+    className: classnames(className, block$u({
       [`theme-${theme}`]: Boolean(theme),
       [`size-${size}`]: Boolean(size),
       [`display-${display}`]: Boolean(display)
@@ -9981,20 +10042,50 @@ const ProgressCircular = forwardRef((props, ref) => {
     }), /*#__PURE__*/jsx(Element, {
       className: element$k('double-bounce2')
     }), /*#__PURE__*/jsx("svg", {
-      className: element$k('svg'),
+      ...svgProps,
       viewBox: "25 25 50 50",
       children: /*#__PURE__*/jsx("circle", {
-        className: element$k('path'),
+        ...circleProps,
         cx: "50",
         cy: "50",
         r: "20",
-        fill: "none",
-        strokeWidth: "5"
+        fill: "none"
       })
     })]
   });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * ProgressCircular component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ProgressCircular = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    theme = defaultTheme,
+    ...otherProps
+  } = props;
+  return ProgressCircular$1({
+    ref,
+    theme,
+    ...otherProps,
+    circleProps: {
+      className: element$k('path'),
+      strokeWidth: '5'
+    },
+    svgProps: {
+      className: element$k('svg')
+    }
+  });
 });
-ProgressCircular.displayName = COMPONENT_NAME$x;
+ProgressCircular.displayName = COMPONENT_NAME$w;
 ProgressCircular.className = CLASSNAME$x;
 ProgressCircular.defaultProps = DEFAULT_PROPS$A;
 
@@ -10010,7 +10101,7 @@ const ProgressVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$w = 'Progress';
+const COMPONENT_NAME$v = 'Progress';
 
 /**
  * Component default class name and class prefix.
@@ -10057,7 +10148,7 @@ const Progress = forwardRef((props, ref) => {
     })]
   });
 });
-Progress.displayName = COMPONENT_NAME$w;
+Progress.displayName = COMPONENT_NAME$v;
 Progress.className = CLASSNAME$w;
 Progress.defaultProps = DEFAULT_PROPS$z;
 
@@ -10316,7 +10407,7 @@ const useRovingTabIndex = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$v = 'ProgressTracker';
+const COMPONENT_NAME$u = 'ProgressTracker';
 
 /**
  * Component default class name and class prefix.
@@ -10384,14 +10475,14 @@ const ProgressTracker = forwardRef((props, ref) => {
     })]
   });
 });
-ProgressTracker.displayName = COMPONENT_NAME$v;
+ProgressTracker.displayName = COMPONENT_NAME$u;
 ProgressTracker.className = CLASSNAME$v;
 ProgressTracker.defaultProps = DEFAULT_PROPS$x;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$u = 'ProgressTrackerStep';
+const COMPONENT_NAME$t = 'ProgressTrackerStep';
 
 /**
  * Component default class name and class prefix.
@@ -10498,14 +10589,14 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
     })]
   });
 });
-ProgressTrackerStep.displayName = COMPONENT_NAME$u;
+ProgressTrackerStep.displayName = COMPONENT_NAME$t;
 ProgressTrackerStep.className = CLASSNAME$u;
 ProgressTrackerStep.defaultProps = DEFAULT_PROPS$w;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$t = 'ProgressTrackerStepPanel';
+const COMPONENT_NAME$s = 'ProgressTrackerStepPanel';
 
 /**
  * Component default class name and class prefix.
@@ -10552,14 +10643,14 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
     children: (!state?.isLazy || isActive) && children
   });
 });
-ProgressTrackerStepPanel.displayName = COMPONENT_NAME$t;
+ProgressTrackerStepPanel.displayName = COMPONENT_NAME$s;
 ProgressTrackerStepPanel.className = CLASSNAME$t;
 ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$v;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$s = 'RadioButton';
+const COMPONENT_NAME$r = 'RadioButton';
 
 /**
  * Component default class name and class prefix.
@@ -10587,7 +10678,7 @@ const RadioButton$1 = props => {
     label,
     name,
     ref,
-    onChange,
+    handleChange,
     theme,
     value,
     inputProps = {},
@@ -10595,9 +10686,9 @@ const RadioButton$1 = props => {
     inputId,
     ...forwardedProps
   } = props;
-  const handleChange = event => {
-    if (onChange) {
-      onChange(value, name, event);
+  const handleOnChange = event => {
+    if (handleChange) {
+      handleChange(value, name, event);
     }
   };
   return /*#__PURE__*/jsxs("div", {
@@ -10619,7 +10710,7 @@ const RadioButton$1 = props => {
         name: name,
         value: value,
         checked: isChecked,
-        onChange: handleChange,
+        onChange: handleOnChange,
         "aria-describedby": helper ? `${inputId}-helper` : undefined,
         ...(inputProps?.readOnly ? {
           readOnly: inputProps.readOnly
@@ -10698,7 +10789,7 @@ const RadioButton = forwardRef((props, ref) => {
     isChecked,
     label,
     name,
-    onChange,
+    handleChange: onChange,
     theme,
     value,
     inputProps: {
@@ -10711,14 +10802,14 @@ const RadioButton = forwardRef((props, ref) => {
     inputId
   });
 });
-RadioButton.displayName = COMPONENT_NAME$s;
+RadioButton.displayName = COMPONENT_NAME$r;
 RadioButton.className = CLASSNAME$s;
 RadioButton.defaultProps = DEFAULT_PROPS$u;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$r = 'RadioGroup';
+const COMPONENT_NAME$q = 'RadioGroup';
 
 /**
  * Component default class name and class prefix.
@@ -10750,7 +10841,7 @@ const RadioGroup$1 = props => {
     children: children
   });
 };
-RadioGroup$1.displayName = COMPONENT_NAME$r;
+RadioGroup$1.displayName = COMPONENT_NAME$q;
 RadioGroup$1.className = CLASSNAME$r;
 RadioGroup$1.defaultProps = DEFAULT_PROPS$t;
 
@@ -10778,7 +10869,7 @@ const RadioGroup = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-RadioGroup.displayName = COMPONENT_NAME$r;
+RadioGroup.displayName = COMPONENT_NAME$q;
 RadioGroup.className = CLASSNAME$r;
 
 /**
@@ -10926,7 +11017,7 @@ const SelectVariant = {
 };
 
 /** The display name of the component. */
-const COMPONENT_NAME$q = 'Select';
+const COMPONENT_NAME$p = 'Select';
 
 /** The default class name and classes prefix for this component. */
 const CLASSNAME$p = 'lumx-select';
@@ -11069,13 +11160,13 @@ const Select = forwardRef((props, ref) => {
     isEmpty: isEmpty$1
   }, ref);
 });
-Select.displayName = COMPONENT_NAME$q;
+Select.displayName = COMPONENT_NAME$p;
 Select.className = CLASSNAME$p;
 Select.defaultProps = DEFAULT_PROPS$s;
 Select.className = CLASSNAME$p;
 
 /** The display name of the component. */
-const COMPONENT_NAME$p = 'Select';
+const COMPONENT_NAME$o = 'Select';
 
 /** The default class name and classes prefix for this component. */
 const CLASSNAME$o = 'lumx-select';
@@ -11222,14 +11313,14 @@ const SelectMultiple = forwardRef((props, ref) => {
     isMultiple: true
   }, ref);
 });
-SelectMultiple.displayName = COMPONENT_NAME$p;
+SelectMultiple.displayName = COMPONENT_NAME$o;
 SelectMultiple.className = CLASSNAME$o;
 SelectMultiple.defaultProps = DEFAULT_PROPS$r;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$o = 'SideNavigation';
+const COMPONENT_NAME$n = 'SideNavigation';
 
 /**
  * Component default class name and class prefix.
@@ -11259,13 +11350,13 @@ const SideNavigation = forwardRef((props, ref) => {
     children: content
   });
 });
-SideNavigation.displayName = COMPONENT_NAME$o;
+SideNavigation.displayName = COMPONENT_NAME$n;
 SideNavigation.className = CLASSNAME$n;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$n = 'SideNavigationItem';
+const COMPONENT_NAME$m = 'SideNavigationItem';
 
 /**
  * Component default class name and class prefix.
@@ -11329,18 +11420,20 @@ const SideNavigationItem = forwardRef((props, ref) => {
     })),
     children: [shouldSplitActions ? /*#__PURE__*/jsxs("div", {
       className: element$d('wrapper'),
-      children: [/*#__PURE__*/jsxs(RawClickable, {
+      children: [RawClickable({
         as: linkAs || (linkProps?.href ? 'a' : 'button'),
         ...linkProps,
         className: element$d('link'),
-        onClick: onClick,
-        children: [icon && /*#__PURE__*/jsx(Icon, {
-          className: element$d('icon'),
-          icon: icon,
-          size: Size$1.xs
-        }), /*#__PURE__*/jsx("span", {
-          children: label
-        })]
+        handleClick: onClick,
+        children: /*#__PURE__*/jsxs(Fragment, {
+          children: [icon && /*#__PURE__*/jsx(Icon, {
+            className: element$d('icon'),
+            icon: icon,
+            size: Size$1.xs
+          }), /*#__PURE__*/jsx("span", {
+            children: label
+          })]
+        })
       }), /*#__PURE__*/jsx(IconButton, {
         ...toggleButtonProps,
         className: element$d('toggle'),
@@ -11350,23 +11443,25 @@ const SideNavigationItem = forwardRef((props, ref) => {
         onClick: onActionClick,
         ...ariaProps
       })]
-    }) : /*#__PURE__*/jsxs(RawClickable, {
+    }) : RawClickable({
       as: linkAs || (linkProps?.href ? 'a' : 'button'),
       ...linkProps,
       className: element$d('link'),
-      onClick: onClick,
+      onClick,
       ...ariaProps,
-      children: [icon && /*#__PURE__*/jsx(Icon, {
-        className: element$d('icon'),
-        icon: icon,
-        size: Size$1.xs
-      }), /*#__PURE__*/jsx("span", {
-        children: label
-      }), hasContent && /*#__PURE__*/jsx(Icon, {
-        className: element$d('chevron'),
-        icon: isOpen ? mdiChevronUp : mdiChevronDown,
-        size: Size$1.xs
-      })]
+      children: /*#__PURE__*/jsxs(Fragment, {
+        children: [icon && /*#__PURE__*/jsx(Icon, {
+          className: element$d('icon'),
+          icon: icon,
+          size: Size$1.xs
+        }), /*#__PURE__*/jsx("span", {
+          children: label
+        }), hasContent && /*#__PURE__*/jsx(Icon, {
+          className: element$d('chevron'),
+          icon: isOpen ? mdiChevronUp : mdiChevronDown,
+          size: Size$1.xs
+        })]
+      })
     }), (closeMode === 'hide' || showChildren) && /*#__PURE__*/jsx("ul", {
       className: element$d('children'),
       id: contentId,
@@ -11374,14 +11469,14 @@ const SideNavigationItem = forwardRef((props, ref) => {
     })]
   });
 });
-SideNavigationItem.displayName = COMPONENT_NAME$n;
+SideNavigationItem.displayName = COMPONENT_NAME$m;
 SideNavigationItem.className = CLASSNAME$m;
 SideNavigationItem.defaultProps = DEFAULT_PROPS$q;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$m = 'SkeletonCircle';
+const COMPONENT_NAME$l = 'SkeletonCircle';
 
 /**
  * Component default class name and class prefix.
@@ -11433,7 +11528,7 @@ const SkeletonRectangleVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$l = 'SkeletonRectangle';
+const COMPONENT_NAME$k = 'SkeletonRectangle';
 
 /**
  * Component default class name and class prefix.
@@ -11489,7 +11584,7 @@ const SkeletonRectangle$1 = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$k = 'SkeletonTypography';
+const COMPONENT_NAME$j = 'SkeletonTypography';
 
 /**
  * Component default class name and class prefix.
@@ -11565,7 +11660,7 @@ const SkeletonCircle = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-SkeletonCircle.displayName = COMPONENT_NAME$m;
+SkeletonCircle.displayName = COMPONENT_NAME$l;
 SkeletonCircle.defaultProps = DEFAULT_PROPS$o;
 SkeletonCircle.className = CLASSNAME$l;
 
@@ -11606,7 +11701,7 @@ const SkeletonRectangle = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-SkeletonRectangle.displayName = COMPONENT_NAME$l;
+SkeletonRectangle.displayName = COMPONENT_NAME$k;
 SkeletonRectangle.className = CLASSNAME$k;
 SkeletonRectangle.defaultProps = DEFAULT_PROPS$n;
 
@@ -11643,7 +11738,7 @@ const SkeletonTypography = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-SkeletonTypography.displayName = COMPONENT_NAME$k;
+SkeletonTypography.displayName = COMPONENT_NAME$j;
 SkeletonTypography.defaultProps = DEFAULT_PROPS$m;
 SkeletonTypography.className = CLASSNAME$j;
 
@@ -11685,7 +11780,7 @@ const clamp = (value, min, max) => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$j = 'Slider';
+const COMPONENT_NAME$i = 'Slider';
 
 /**
  * Component default class name and class prefix.
@@ -11952,7 +12047,7 @@ const Slider = forwardRef((props, ref) => {
     })]
   });
 });
-Slider.displayName = COMPONENT_NAME$j;
+Slider.displayName = COMPONENT_NAME$i;
 Slider.className = CLASSNAME$i;
 Slider.defaultProps = DEFAULT_PROPS$l;
 
@@ -12287,7 +12382,7 @@ const useSlideFocusManagement = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$i = 'SlideshowItemGroup';
+const COMPONENT_NAME$h = 'SlideshowItemGroup';
 
 /**
  * Component default class name and class prefix.
@@ -12326,7 +12421,7 @@ const SlideshowItemGroup = forwardRef((props, ref) => {
     children: children
   });
 });
-SlideshowItemGroup.displayName = COMPONENT_NAME$i;
+SlideshowItemGroup.displayName = COMPONENT_NAME$h;
 SlideshowItemGroup.className = CLASSNAME$h;
 
 /**
@@ -12457,7 +12552,7 @@ Slideshow.defaultProps = DEFAULT_PROPS$k;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$h = 'SlideshowItem';
+const COMPONENT_NAME$g = 'SlideshowItem';
 
 /**
  * Component default class name and class prefix.
@@ -12484,7 +12579,7 @@ const SlideshowItem = forwardRef((props, ref) => {
     children: children
   });
 });
-SlideshowItem.displayName = COMPONENT_NAME$h;
+SlideshowItem.displayName = COMPONENT_NAME$g;
 SlideshowItem.className = CLASSNAME$g;
 
 const isTouchDevice = () => 'ontouchstart' in window;
@@ -12547,7 +12642,7 @@ function usePaginationVisibleRange(activeIndex, slideCount) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$g = 'SlideshowControls';
+const COMPONENT_NAME$f = 'SlideshowControls';
 
 /**
  * Component default class name and class prefix.
@@ -12637,7 +12732,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
       className: element$9('navigation'),
       color: theme === Theme$1.dark ? 'light' : 'dark',
       emphasis: Emphasis$1.low,
-      onClick: onPreviousClick
+      onClick: () => onPreviousClick?.()
     }), /*#__PURE__*/jsx("div", {
       ref: paginationRef,
       className: element$9('pagination'),
@@ -12684,11 +12779,11 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
       className: element$9('navigation'),
       color: theme === Theme$1.dark ? 'light' : 'dark',
       emphasis: Emphasis$1.low,
-      onClick: onNextClick
+      onClick: () => onNextClick?.()
     })]
   });
 });
-InternalSlideshowControls.displayName = COMPONENT_NAME$g;
+InternalSlideshowControls.displayName = COMPONENT_NAME$f;
 InternalSlideshowControls.className = CLASSNAME$f;
 InternalSlideshowControls.defaultProps = DEFAULT_PROPS$j;
 const SlideshowControls = Object.assign(InternalSlideshowControls, {
@@ -12808,7 +12903,7 @@ const useSlideScroll = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$f = 'Slideshow';
+const COMPONENT_NAME$e = 'Slideshow';
 
 /**
  * Component default class name and class prefix.
@@ -12916,13 +13011,13 @@ const Slides = forwardRef((props, ref) => {
     }), afterSlides]
   });
 });
-Slides.displayName = COMPONENT_NAME$f;
+Slides.displayName = COMPONENT_NAME$e;
 Slides.className = CLASSNAME$e;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$e = 'Switch';
+const COMPONENT_NAME$d = 'Switch';
 
 /**
  * Component default class name and class prefix.
@@ -12957,7 +13052,7 @@ const Switch$1 = props => {
     label,
     name,
     ref,
-    onChange,
+    handleChange,
     theme,
     value,
     inputProps = {},
@@ -12966,9 +13061,9 @@ const Switch$1 = props => {
     position = DEFAULT_PROPS$h.position,
     ...forwardedProps
   } = props;
-  const handleChange = event => {
-    if (onChange) {
-      onChange(!isChecked, value, name, event);
+  const handleOnChange = event => {
+    if (handleChange) {
+      handleChange(!isChecked, value, name, event);
     }
   };
   return /*#__PURE__*/jsxs("div", {
@@ -12992,7 +13087,7 @@ const Switch$1 = props => {
         name: name,
         value: value,
         checked: Boolean(isChecked),
-        onChange: handleChange,
+        onChange: handleOnChange,
         "aria-describedby": helper ? `${inputId}-helper` : undefined,
         "aria-checked": Boolean(isChecked),
         ...(inputProps?.readOnly ? {
@@ -13076,7 +13171,7 @@ const Switch = forwardRef((props, ref) => {
     isChecked,
     label: children,
     name,
-    onChange,
+    handleChange: onChange,
     position,
     theme,
     value,
@@ -13090,14 +13185,14 @@ const Switch = forwardRef((props, ref) => {
     inputId
   });
 });
-Switch.displayName = COMPONENT_NAME$e;
+Switch.displayName = COMPONENT_NAME$d;
 Switch.className = CLASSNAME$d;
 Switch.defaultProps = DEFAULT_PROPS$g;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$d = 'Table';
+const COMPONENT_NAME$c = 'Table';
 
 /**
  * Component default class name and class prefix.
@@ -13170,14 +13265,14 @@ const Table = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-Table.displayName = COMPONENT_NAME$d;
+Table.displayName = COMPONENT_NAME$c;
 Table.className = CLASSNAME$c;
 Table.defaultProps = DEFAULT_PROPS$f;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$c = 'TableBody';
+const COMPONENT_NAME$b = 'TableBody';
 
 /**
  * Component default class name and class prefix.
@@ -13227,7 +13322,7 @@ const TableBody = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-TableBody.displayName = COMPONENT_NAME$c;
+TableBody.displayName = COMPONENT_NAME$b;
 TableBody.className = CLASSNAME$b;
 
 const ThOrder = {
@@ -13249,7 +13344,7 @@ const TableCellVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$b = 'TableCell';
+const COMPONENT_NAME$a = 'TableCell';
 
 /**
  * Component default class name and class prefix.
@@ -13278,7 +13373,7 @@ const TableCell$1 = props => {
     className,
     icon,
     isSortable,
-    onHeaderClick,
+    handleClick,
     ref,
     sortOrder,
     variant = DEFAULT_PROPS$e.variant,
@@ -13286,10 +13381,10 @@ const TableCell$1 = props => {
   } = props;
 
   // Use button if clickable
-  const Wrapper = onHeaderClick ? 'button' : 'div';
+  const Wrapper = handleClick ? 'button' : 'div';
   const wrapperProps = Wrapper === 'button' ? {
     type: 'button',
-    onClick: onHeaderClick
+    onClick: handleClick
   } : undefined;
 
   // ARIA sort
@@ -13356,23 +13451,23 @@ const TableCell$1 = props => {
  */
 const TableCell = forwardRef((props, ref) => {
   const {
-    children,
+    onHeaderClick,
     ...otherProps
   } = props;
   return TableCell$1({
     ref,
-    children,
-    ...otherProps
+    ...otherProps,
+    handleClick: onHeaderClick
   });
 });
-TableCell.displayName = COMPONENT_NAME$b;
+TableCell.displayName = COMPONENT_NAME$a;
 TableCell.className = CLASSNAME$a;
 TableCell.defaultProps = DEFAULT_PROPS$e;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$a = 'TableHeader';
+const COMPONENT_NAME$9 = 'TableHeader';
 
 /**
  * Component default class name and class prefix.
@@ -13427,14 +13522,14 @@ const TableHeader = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-TableHeader.displayName = COMPONENT_NAME$a;
+TableHeader.displayName = COMPONENT_NAME$9;
 TableHeader.className = CLASSNAME$9;
 TableHeader.defaultProps = DEFAULT_PROPS$d;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$9 = 'TableRow';
+const COMPONENT_NAME$8 = 'TableRow';
 
 /**
  * Component default class name and class prefix.
@@ -13517,7 +13612,7 @@ const TableRow = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-TableRow.displayName = COMPONENT_NAME$9;
+TableRow.displayName = COMPONENT_NAME$8;
 TableRow.className = CLASSNAME$8;
 TableRow.defaultProps = DEFAULT_PROPS$c;
 
@@ -13601,7 +13696,7 @@ let TabListLayout = /*#__PURE__*/function (TabListLayout) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$8 = 'TabList';
+const COMPONENT_NAME$7 = 'TabList';
 
 /**
  * Component default props.
@@ -13654,14 +13749,14 @@ const TabList = forwardRef((props, ref) => {
     })
   });
 });
-TabList.displayName = COMPONENT_NAME$8;
+TabList.displayName = COMPONENT_NAME$7;
 TabList.className = TABS_CLASSNAME;
 TabList.defaultProps = DEFAULT_PROPS$a;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$7 = 'Tab';
+const COMPONENT_NAME$6 = 'Tab';
 
 /**
  * Component default class name and class prefix.
@@ -13751,14 +13846,14 @@ const Tab = forwardRef((props, ref) => {
     })]
   });
 });
-Tab.displayName = COMPONENT_NAME$7;
+Tab.displayName = COMPONENT_NAME$6;
 Tab.className = CLASSNAME$7;
 Tab.defaultProps = DEFAULT_PROPS$9;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$6 = 'TabPanel';
+const COMPONENT_NAME$5 = 'TabPanel';
 
 /**
  * Component default class name and class prefix.
@@ -13805,14 +13900,14 @@ const TabPanel = forwardRef((props, ref) => {
     children: (!state?.isLazy || isActive) && children
   });
 });
-TabPanel.displayName = COMPONENT_NAME$6;
+TabPanel.displayName = COMPONENT_NAME$5;
 TabPanel.className = CLASSNAME$6;
 TabPanel.defaultProps = DEFAULT_PROPS$8;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$5 = 'TextField';
+const COMPONENT_NAME$4 = 'TextField';
 
 /**
  * Component default class name and class prefix.
@@ -14050,9 +14145,9 @@ const TextField = forwardRef((props, ref) => {
    * @param evt On clear event.
    */
   const handleClear = evt => {
-    evt.nativeEvent.preventDefault();
-    evt.nativeEvent.stopPropagation();
-    evt.currentTarget.blur();
+    evt?.nativeEvent.preventDefault();
+    evt?.nativeEvent.stopPropagation();
+    (evt?.currentTarget).blur();
     onChange('');
     if (onClear) {
       onClear(evt);
@@ -14176,7 +14271,7 @@ const TextField = forwardRef((props, ref) => {
     })]
   });
 });
-TextField.displayName = COMPONENT_NAME$5;
+TextField.displayName = COMPONENT_NAME$4;
 TextField.className = CLASSNAME$5;
 TextField.defaultProps = DEFAULT_PROPS$5;
 
@@ -14327,7 +14422,7 @@ function calculateFocusPointStyle({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$4 = 'Thumbnail';
+const COMPONENT_NAME$3 = 'Thumbnail';
 
 /**
  * Component default class name and class prefix.
@@ -14380,6 +14475,8 @@ const Thumbnail$1 = props => {
     variant,
     linkProps,
     linkAs,
+    handleClick,
+    handleKeyPress,
     ...forwardedProps
   } = props;
   const isLoading = isLoadingProp || loadingState === 'isLoading';
@@ -14395,7 +14492,7 @@ const Thumbnail$1 = props => {
     imageErrorStyle.display = 'none';
   }
   const isLink = Boolean(linkProps?.href || linkAs);
-  const isClickable = !isAnyDisabled && Boolean(isLink || !!forwardedProps.onClick);
+  const isClickable = !isAnyDisabled && Boolean(isLink || !!handleClick || !!handleKeyPress);
   const wrapperProps = {
     ...forwardedProps
   };
@@ -14473,11 +14570,13 @@ const Thumbnail$1 = props => {
 
   /** Render `RawClickable` as a function since it is a core component which needs to be treated as such */
   if (isClickable) {
-    return RawClickable$1({
+    return RawClickable({
       ref,
       ...wrapperProps,
       className: wrapperClassName,
-      children: innerImage
+      children: innerImage,
+      handleClick,
+      handleKeyPress
     });
   }
   return /*#__PURE__*/jsx("div", {
@@ -14584,6 +14683,8 @@ const Thumbnail = forwardRef((props, ref) => {
     focusPoint,
     image,
     imgRef: propImgRef,
+    onClick,
+    onKeyPress,
     ...forwardedProps
   } = otherProps;
   const [imgElement, setImgElement] = useState();
@@ -14603,13 +14704,15 @@ const Thumbnail = forwardRef((props, ref) => {
     focusPointStyle,
     loadingState,
     imgRef: useMergeRefs(setImgElement, propImgRef),
+    handleClick: onClick,
+    handleKeyPress: onKeyPress,
     image,
     badge: badge && /*#__PURE__*/React__default.cloneElement(badge, {
       className: classNames.join(element$4('badge'), badge.props.className)
     })
   });
 });
-Thumbnail.displayName = COMPONENT_NAME$4;
+Thumbnail.displayName = COMPONENT_NAME$3;
 Thumbnail.className = CLASSNAME$4;
 Thumbnail.defaultProps = DEFAULT_PROPS$4;
 
@@ -14653,7 +14756,7 @@ const ThumbnailObjectFit = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$3 = 'Toolbar';
+const TOOLBAR_NAME = 'Toolbar';
 
 /**
  * Component default class name and class prefix.
@@ -14662,7 +14765,7 @@ const CLASSNAME$3 = 'lumx-toolbar';
 const {
   block: block$3,
   element: element$3
-} = classNames.bem(CLASSNAME$3);
+} = bem(CLASSNAME$3);
 
 /**
  * Component default props.
@@ -14673,21 +14776,21 @@ const DEFAULT_PROPS$3 = {};
  * Toolbar component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return JSX element.
  */
-const Toolbar = forwardRef((props, ref) => {
+const Toolbar$1 = props => {
   const {
     after,
     before,
     className,
     label,
+    ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$3({
+    className: classnames(className, block$3({
       'has-after': Boolean(after),
       'has-before': Boolean(before),
       'has-label': Boolean(label)
@@ -14703,8 +14806,26 @@ const Toolbar = forwardRef((props, ref) => {
       children: after
     })]
   });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Toolbar component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Toolbar = forwardRef((props, ref) => {
+  return Toolbar$1({
+    ref,
+    ...props
+  });
 });
-Toolbar.displayName = COMPONENT_NAME$3;
+Toolbar.displayName = TOOLBAR_NAME;
 Toolbar.className = CLASSNAME$3;
 Toolbar.defaultProps = DEFAULT_PROPS$3;
 
@@ -15304,5 +15425,5 @@ UserBlock.displayName = COMPONENT_NAME;
 UserBlock.className = CLASSNAME;
 UserBlock.defaultProps = DEFAULT_PROPS;
 
-export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1d as CLASSNAME, COMPONENT_NAME$1e as COMPONENT_NAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$15 as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
+export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1d as CLASSNAME, COMPONENT_NAME$1d as COMPONENT_NAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$16 as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
 //# sourceMappingURL=index.js.map