@lumx/react 4.3.2-alpha.8 → 4.4.0

package/index.js

@@ -9,48 +9,48 @@ 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';
 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 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';
+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.
@@ -217,7 +217,7 @@ const AlertDialog = forwardRef((props, ref) => {
     })]
   });
 });
-AlertDialog.displayName = COMPONENT_NAME$1l;
+AlertDialog.displayName = COMPONENT_NAME$1k;
 AlertDialog.className = CLASSNAME$1j;
 AlertDialog.defaultProps = DEFAULT_PROPS$1a;
 
@@ -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.
@@ -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;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1j = 'AutocompleteMultiple';
+const COMPONENT_NAME$1i = 'AutocompleteMultiple';
 
 /**
  * Component default class name and class prefix.
@@ -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;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1i = 'Avatar';
+const COMPONENT_NAME$1h = 'Avatar';
 
 /**
  * Component default class name and class prefix.
@@ -625,7 +625,7 @@ const Avatar = forwardRef((props, ref) => {
     })]
   });
 });
-Avatar.displayName = COMPONENT_NAME$1i;
+Avatar.displayName = COMPONENT_NAME$1h;
 Avatar.className = CLASSNAME$1g;
 Avatar.defaultProps = DEFAULT_PROPS$17;
 
@@ -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.
@@ -965,7 +963,7 @@ 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;
 
@@ -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.
@@ -1223,7 +1223,7 @@ 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;
 
@@ -1257,6 +1257,11 @@ const Button = forwardRef((props, ref) => {
     disabledStateProps,
     otherProps
   } = useDisableStateProps(props);
+  const {
+    onClick,
+    onKeyPress,
+    ...restOfOtherProps
+  } = otherProps;
   const {
     leftIcon,
     rightIcon,
@@ -1266,8 +1271,10 @@ const Button = forwardRef((props, ref) => {
     ref,
     theme: defaultTheme,
     ...disabledStateProps,
-    ...otherProps,
+    ...restOfOtherProps,
     'aria-disabled': isAnyDisabled,
+    handleClick: onClick,
+    handleKeyPress: onKeyPress,
     children: /*#__PURE__*/jsxs(Fragment, {
       children: [leftIcon && !isEmpty(leftIcon) &&
       /*#__PURE__*/
@@ -1291,11 +1298,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;
 
-const COMPONENT_NAME$1d = 'Icon';
+const COMPONENT_NAME$1c = 'Icon';
 const IconClassName = 'lumx-icon';
 
 /**
@@ -1388,14 +1395,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;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1c = 'IconButton';
+const COMPONENT_NAME$1b = 'IconButton';
 
 /**
  * Component default class name and class prefix.
@@ -1441,7 +1448,7 @@ 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;
 
@@ -1465,6 +1472,11 @@ const IconButton = forwardRef((props, ref) => {
     disabledStateProps,
     otherProps
   } = useDisableStateProps(forwardedProps);
+  const {
+    onClick,
+    onKeyPress,
+    ...restOfOtherProps
+  } = otherProps;
   return /*#__PURE__*/jsx(Tooltip, {
     label: hideTooltip ? '' : label,
     ...tooltipProps,
@@ -1472,20 +1484,22 @@ const IconButton = forwardRef((props, ref) => {
       ref,
       theme: defaultTheme,
       ...disabledStateProps,
-      ...otherProps,
+      ...restOfOtherProps,
+      handleClick: onClick,
+      handleKeyPress: onKeyPress,
       'aria-disabled': isAnyDisabled,
       label
     })
   });
 });
-IconButton.displayName = COMPONENT_NAME$1c;
+IconButton.displayName = COMPONENT_NAME$1b;
 IconButton.className = CLASSNAME$1b;
 IconButton.defaultProps = DEFAULT_PROPS$13;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1b = 'ButtonGroup';
+const COMPONENT_NAME$1a = 'ButtonGroup';
 
 /**
  * Component default class name and class prefix.
@@ -1515,7 +1529,7 @@ 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;
 
@@ -1532,11 +1546,11 @@ 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;
 
-const COMPONENT_NAME$1a = 'InputLabel';
+const COMPONENT_NAME$19 = 'InputLabel';
 const InputLabelClassName = 'lumx-input-label';
 const CLASSNAME$19 = InputLabelClassName;
 const {
@@ -1570,7 +1584,7 @@ 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;
 
@@ -1586,7 +1600,7 @@ const INPUT_HELPER_CONFIGURATION = {
   }
 };
 
-const COMPONENT_NAME$19 = 'InputHelper';
+const COMPONENT_NAME$18 = 'InputHelper';
 const InputHelperClassName = 'lumx-input-helper';
 
 /**
@@ -1630,7 +1644,7 @@ 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;
 
@@ -1643,7 +1657,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 +1685,7 @@ const Checkbox$1 = props => {
     label,
     name,
     ref,
-    onChange,
+    handleChange,
     theme,
     value,
     inputProps = {},
@@ -1680,9 +1694,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 +1719,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 ? {
@@ -1794,7 +1808,7 @@ const Checkbox = forwardRef((props, ref) => {
     isChecked,
     label,
     name,
-    onChange,
+    handleChange: onChange,
     theme,
     value,
     inputProps: {
@@ -1807,7 +1821,7 @@ const Checkbox = forwardRef((props, ref) => {
     inputId
   });
 });
-Checkbox.displayName = COMPONENT_NAME$18;
+Checkbox.displayName = COMPONENT_NAME$17;
 Checkbox.className = CLASSNAME$17;
 Checkbox.defaultProps = DEFAULT_PROPS$$;
 
@@ -1830,7 +1844,7 @@ function useStopPropagation(handler) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$17 = 'Chip';
+const COMPONENT_NAME$16 = 'Chip';
 
 /**
  * Component default class name and class prefix.
@@ -1944,7 +1958,7 @@ const Chip = forwardRef((props, ref) => {
     })
   );
 });
-Chip.displayName = COMPONENT_NAME$17;
+Chip.displayName = COMPONENT_NAME$16;
 Chip.className = CLASSNAME$16;
 Chip.defaultProps = DEFAULT_PROPS$_;
 
@@ -2007,7 +2021,7 @@ const DEFAULT_PROPS$Z = {};
 /**
  * Component display name.
  */
-const COMPONENT_NAME$16 = 'ChipGroup';
+const COMPONENT_NAME$15 = 'ChipGroup';
 
 /**
  * Component default class name and class prefix.
@@ -2035,7 +2049,7 @@ 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;
 const ChipGroup = Object.assign(InternalChipGroup, {
@@ -2235,7 +2249,7 @@ const CommentBlockVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$15 = 'CommentBlock';
+const COMPONENT_NAME$14 = 'CommentBlock';
 
 /**
  * Component default class name and class prefix.
@@ -2346,7 +2360,7 @@ const CommentBlock = forwardRef((props, ref) => {
     })]
   });
 });
-CommentBlock.displayName = COMPONENT_NAME$15;
+CommentBlock.displayName = COMPONENT_NAME$14;
 CommentBlock.className = CLASSNAME$13;
 CommentBlock.defaultProps = DEFAULT_PROPS$Y;
 
@@ -2368,7 +2382,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 +2616,7 @@ const {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$13 = 'DatePickerControlled';
+const COMPONENT_NAME$12 = 'DatePickerControlled';
 
 /**
  * DatePickerControlled component.
@@ -2792,7 +2806,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
     })]
   });
 });
-DatePickerControlled.displayName = COMPONENT_NAME$13;
+DatePickerControlled.displayName = COMPONENT_NAME$12;
 DatePickerControlled.className = CLASSNAME$12;
 
 /**
@@ -2835,7 +2849,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 +2863,7 @@ const useBooleanState = defaultValue => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$12 = 'DatePickerField';
+const COMPONENT_NAME$11 = 'DatePickerField';
 
 /**
  * DatePickerField component.
@@ -2938,7 +2952,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 +3453,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.
@@ -3626,14 +3640,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;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$10 = 'Divider';
+const COMPONENT_NAME$$ = 'Divider';
 
 /**
  * Component default class name and class prefix.
@@ -3693,14 +3707,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;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$$ = 'DragHandle';
+const COMPONENT_NAME$_ = 'DragHandle';
 
 /**
  * Component default class name and class prefix.
@@ -3737,7 +3751,7 @@ const DragHandle = forwardRef((props, ref) => {
     })
   });
 });
-DragHandle.displayName = COMPONENT_NAME$$;
+DragHandle.displayName = COMPONENT_NAME$_;
 DragHandle.className = CLASSNAME$$;
 
 const INITIAL_INDEX = -1;
@@ -3907,7 +3921,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.
@@ -3953,7 +3967,7 @@ const InternalList = forwardRef((props, ref) => {
     children: children
   });
 });
-InternalList.displayName = COMPONENT_NAME$_;
+InternalList.displayName = COMPONENT_NAME$Z;
 InternalList.className = CLASSNAME$_;
 InternalList.defaultProps = DEFAULT_PROPS$V;
 const List = Object.assign(InternalList, {
@@ -6386,7 +6400,7 @@ function usePopoverStyle({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Z = 'Popover';
+const COMPONENT_NAME$Y = 'Popover';
 
 /**
  * Component default class name and class prefix.
@@ -6506,7 +6520,7 @@ const _InnerPopover = forwardRef((props, ref) => {
     })
   }) : null;
 });
-_InnerPopover.displayName = COMPONENT_NAME$Z;
+_InnerPopover.displayName = COMPONENT_NAME$Y;
 
 /**
  * Popover component.
@@ -6518,7 +6532,7 @@ _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;
 
@@ -6566,7 +6580,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.
@@ -6658,14 +6672,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;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$X = 'ExpansionPanel';
+const COMPONENT_NAME$W = 'ExpansionPanel';
 
 /**
  * Component default class name and class prefix.
@@ -6812,11 +6826,11 @@ const ExpansionPanel = forwardRef((props, ref) => {
     })]
   });
 });
-ExpansionPanel.displayName = COMPONENT_NAME$X;
+ExpansionPanel.displayName = COMPONENT_NAME$W;
 ExpansionPanel.className = CLASSNAME$X;
 ExpansionPanel.defaultProps = DEFAULT_PROPS$S;
 
-const COMPONENT_NAME$W = 'Flag';
+const COMPONENT_NAME$V = 'Flag';
 const CLASSNAME$W = 'lumx-flag';
 const DEFAULT_PROPS$R = {};
 const {
@@ -6880,7 +6894,7 @@ 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;
 
@@ -6891,7 +6905,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 +6969,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.
@@ -7058,7 +7072,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     })]
   });
 });
-BaseGenericBlock.displayName = COMPONENT_NAME$U;
+BaseGenericBlock.displayName = COMPONENT_NAME$T;
 BaseGenericBlock.className = CLASSNAME$U;
 BaseGenericBlock.defaultProps = DEFAULT_PROPS$Q;
 const GenericBlock = Object.assign(BaseGenericBlock, {
@@ -7098,7 +7112,7 @@ const defaultContext = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$T = 'Heading';
+const COMPONENT_NAME$S = 'Heading';
 
 /**
  * Component default class name and class prefix.
@@ -7196,7 +7210,7 @@ function wrapChildrenIconWithSpaces(children) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$S = 'Text';
+const COMPONENT_NAME$R = 'Text';
 
 /**
  * Component default class name and class prefix.
@@ -7294,7 +7308,7 @@ 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;
 
@@ -7331,7 +7345,7 @@ 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;
 
@@ -7371,7 +7385,7 @@ const HeadingLevelProvider = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$R = 'Grid';
+const COMPONENT_NAME$Q = 'Grid';
 
 /**
  * Component default class name and class prefix.
@@ -7420,14 +7434,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;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Q = 'GridItem';
+const COMPONENT_NAME$P = 'GridItem';
 
 /**
  * Component default class name and class prefix.
@@ -7464,13 +7478,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.
@@ -7488,10 +7502,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 +7513,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,10 +7528,40 @@ const GridColumn = forwardRef((props, ref) => {
     },
     children: children
   });
+};
+GridColumn$1.displayName = COMPONENT_NAME$O;
+GridColumn$1.className = CLASSNAME$P;
+GridColumn$1.defaultProps = DEFAULT_PROPS$M;
+
+/**
+ * Defines the props of the component.
+ */
+
+// Re-export types for backward compatibility
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$L = {};
+
+/**
+ * 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;
+GridColumn.defaultProps = DEFAULT_PROPS$L;
 
 /**
  * Icon component.
@@ -7621,7 +7665,7 @@ const ImageBlockCaptionPosition = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$O = 'ImageBlock';
+const COMPONENT_NAME$N = 'ImageBlock';
 
 /**
  * Component default class name and class prefix.
@@ -7635,7 +7679,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$L = {
+const DEFAULT_PROPS$K = {
   captionPosition: ImageBlockCaptionPosition.below,
   align: Alignment.left
 };
@@ -7651,9 +7695,9 @@ const ImageBlock = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     actions,
-    align = DEFAULT_PROPS$L.align,
+    align = DEFAULT_PROPS$K.align,
     alt,
-    captionPosition = DEFAULT_PROPS$L.captionPosition,
+    captionPosition = DEFAULT_PROPS$K.captionPosition,
     captionStyle,
     className,
     description,
@@ -7705,14 +7749,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;
+ImageBlock.defaultProps = DEFAULT_PROPS$K;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$N = 'ImageLightbox';
+const COMPONENT_NAME$M = 'ImageLightbox';
 
 /**
  * Component default class name and class prefix.
@@ -8367,7 +8411,7 @@ function useImageLightbox(props) {
         }
       },
       onClick(e) {
-        open(e.target, options);
+        open(e?.target, options);
       }
     }));
   }, []);
@@ -8436,7 +8480,7 @@ const Inner = forwardRef((props, ref) => {
     })
   });
 });
-Inner.displayName = COMPONENT_NAME$N;
+Inner.displayName = COMPONENT_NAME$M;
 Inner.className = CLASSNAME$N;
 
 /**
@@ -8453,7 +8497,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.
@@ -8467,7 +8511,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$K = {};
+const DEFAULT_PROPS$J = {};
 
 /**
  * InlineList component.
@@ -8518,9 +8562,9 @@ const InlineList = forwardRef((props, ref) => {
     })
   );
 });
-InlineList.displayName = COMPONENT_NAME$M;
+InlineList.displayName = COMPONENT_NAME$L;
 InlineList.className = CLASSNAME$M;
-InlineList.defaultProps = DEFAULT_PROPS$K;
+InlineList.defaultProps = DEFAULT_PROPS$J;
 
 /**
  * InputHelper component.
@@ -8563,7 +8607,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,116 +8739,68 @@ const Lightbox = forwardRef((props, ref) => {
     })
   });
 });
-Lightbox.displayName = COMPONENT_NAME$L;
+Lightbox.displayName = COMPONENT_NAME$K;
 Lightbox.className = CLASSNAME$L;
 
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
-const COMPONENT_NAME$K = 'Link';
+const COMPONENT_NAME$J = 'Link';
 
 /**
  * Component default class name and class prefix.
  */
 const CLASSNAME$K = 'lumx-link';
 const {
-  block: block$E,
-  element: element$u
+  block: block$E
 } = bem(CLASSNAME$K);
 
 /**
- * Link component (Core UI).
+ * Link component.
  *
  * @param  props Component props.
  * @return JSX element.
  */
 const Link$1 = props => {
   const {
-    label,
+    children,
     className,
     color: propColor,
     colorVariant: propColorVariant,
-    leftIcon,
-    rightIcon,
     typography: typography$1,
-    as,
+    linkAs,
+    handleClick,
     ref,
-    isDisabled,
-    theme,
     href,
-    target,
-    onClick,
     ...forwardedProps
   } = props;
   const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
-
-  // Determine element type
-  const ElementType = as || (href ? 'a' : 'button');
-
-  // Build disabled props
-  const disabledProps = {};
-  if (isDisabled) {
-    if (ElementType === 'button' || !href && !as) {
-      disabledProps.disabled = true;
-    } else {
-      disabledProps['aria-disabled'] = true;
-      disabledProps.tabIndex = -1;
-    }
-  }
-
-  // Build class name
-  const combinedClassName = classnames(className, block$E({
-    [`color-${color}`]: Boolean(color),
-    [`color-variant-${colorVariant}`]: Boolean(colorVariant),
-    'has-typography': !!typography$1
-  }), typography$1 && typography(typography$1));
-
-  // Build content with proper spacing for icons
-  const content = /*#__PURE__*/jsxs(Fragment, {
-    children: [leftIcon && /*#__PURE__*/jsxs(Fragment, {
-      children: [" ", Icon$1({
-        icon: leftIcon,
-        className: element$u('left-icon')
-      }), " "]
-    }), label && /*#__PURE__*/jsx("span", {
-      className: element$u('content'),
-      children: label
-    }), rightIcon && /*#__PURE__*/jsxs(Fragment, {
-      children: [" ", Icon$1({
-        icon: rightIcon,
-        className: element$u('right-icon')
-      }), " "]
-    })]
-  });
-
-  // Build element props
-  const elementProps = {
+  return RawClickable({
     ref,
-    className: combinedClassName,
-    onClick: isDisabled ? undefined : onClick,
+    as: linkAs || (href ? 'a' : 'button'),
+    href,
     ...forwardedProps,
-    ...disabledProps
-  };
-  if (href) {
-    elementProps.href = href;
-  }
-  if (target) {
-    elementProps.target = target;
-  }
-  return /*#__PURE__*/jsx(ElementType, {
-    ...elementProps,
-    children: content
+    handleClick,
+    children,
+    className: classnames(className, block$E({
+      [`color-${color}`]: Boolean(color),
+      [`color-variant-${colorVariant}`]: Boolean(colorVariant),
+      'has-typography': !!typography$1
+    }), typography$1 && typography(typography$1))
   });
 };
 
-/**
- * Defines the props of the component.
- */
+const {
+  element: element$u
+} = classNames.bem(CLASSNAME$K);
 
 /**
- * Component default props.
+ * Defines the props of the component.
  */
-const DEFAULT_PROPS$J = {};
 
 /**
  * Link component.
@@ -8815,47 +8811,44 @@ const DEFAULT_PROPS$J = {};
  */
 const Link = forwardRef((props, ref) => {
   const {
-    isAnyDisabled,
     disabledStateProps,
     otherProps
   } = useDisableStateProps(props);
   const {
     children,
-    className,
-    color,
-    colorVariant,
     leftIcon,
     rightIcon,
-    typography,
     linkAs,
+    onClick,
     ...forwardedProps
   } = otherProps;
-
-  // Wrap children with spaces if they contain icons
-  const label = wrapChildrenIconWithSpaces(children);
   return Link$1({
     ref,
-    label,
-    className,
-    color,
-    colorVariant,
-    leftIcon,
-    rightIcon,
-    typography,
-    as: linkAs,
-    ...forwardedProps,
     ...disabledStateProps,
-    isDisabled: isAnyDisabled
+    ...forwardedProps,
+    linkAs,
+    handleClick: onClick,
+    children: wrapChildrenIconWithSpaces(/*#__PURE__*/jsxs(Fragment, {
+      children: [leftIcon && /*#__PURE__*/jsx(Icon, {
+        icon: leftIcon,
+        className: element$u('left-icon')
+      }), children && /*#__PURE__*/jsx("span", {
+        className: element$u('content'),
+        children: children
+      }), rightIcon && /*#__PURE__*/jsx(Icon, {
+        icon: rightIcon,
+        className: element$u('right-icon')
+      })]
+    }))
   });
 });
-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 +8952,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 +8973,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 +9081,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 +9113,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 +9146,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 +9229,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 +9251,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 +9336,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 +9357,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 +9392,34 @@ 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
-      })]
+      handleKeyPress: forwardedProps.onKeyPress,
+      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 +9452,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 +9474,8 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
     label,
     isCurrentPage,
     as: Element = 'a',
+    onClick,
+    onKeyPress,
     ...forwardedProps
   } = props;
   const theme = useTheme();
@@ -9503,26 +9490,30 @@ 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,
+        handleKeyPress: onKeyPress,
+        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 +9525,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 +9572,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 +9605,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 +9663,7 @@ const Notification = forwardRef((props, ref) => {
     if (isFunction(onActionClick)) {
       onActionClick();
     }
-    evt.stopPropagation();
+    evt?.stopPropagation();
   };
   if (!type || !isVisible) {
     return null;
@@ -9716,14 +9707,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 +9765,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 +9866,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 +9882,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 +9893,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 +9914,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 +9957,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 +9998,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 +10057,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 +10104,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 +10363,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 +10431,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 +10545,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 +10599,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 +10634,7 @@ const RadioButton$1 = props => {
     label,
     name,
     ref,
-    onChange,
+    handleChange,
     theme,
     value,
     inputProps = {},
@@ -10595,9 +10642,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 +10666,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 +10745,7 @@ const RadioButton = forwardRef((props, ref) => {
     isChecked,
     label,
     name,
-    onChange,
+    handleChange: onChange,
     theme,
     value,
     inputProps: {
@@ -10711,14 +10758,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 +10797,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 +10825,7 @@ const RadioGroup = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-RadioGroup.displayName = COMPONENT_NAME$r;
+RadioGroup.displayName = COMPONENT_NAME$q;
 RadioGroup.className = CLASSNAME$r;
 
 /**
@@ -10926,7 +10973,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 +11116,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 +11269,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 +11306,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 +11376,21 @@ 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,
+        handleKeyPress: linkProps?.onKeyPress,
+        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 +11400,26 @@ 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,
+      handleClick: onClick,
+      handleKeyPress: linkProps?.onKeyPress,
       ...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 +11427,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 +11486,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 +11542,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 +11618,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 +11659,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 +11696,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 +11738,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 +12005,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 +12340,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 +12379,7 @@ const SlideshowItemGroup = forwardRef((props, ref) => {
     children: children
   });
 });
-SlideshowItemGroup.displayName = COMPONENT_NAME$i;
+SlideshowItemGroup.displayName = COMPONENT_NAME$h;
 SlideshowItemGroup.className = CLASSNAME$h;
 
 /**
@@ -12457,7 +12510,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 +12537,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 +12600,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 +12690,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 +12737,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 +12861,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 +12969,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 +13010,7 @@ const Switch$1 = props => {
     label,
     name,
     ref,
-    onChange,
+    handleChange,
     theme,
     value,
     inputProps = {},
@@ -12966,9 +13019,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 +13045,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 +13129,7 @@ const Switch = forwardRef((props, ref) => {
     isChecked,
     label: children,
     name,
-    onChange,
+    handleChange: onChange,
     position,
     theme,
     value,
@@ -13090,14 +13143,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 +13223,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 +13280,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 +13302,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 +13331,7 @@ const TableCell$1 = props => {
     className,
     icon,
     isSortable,
-    onHeaderClick,
+    handleClick,
     ref,
     sortOrder,
     variant = DEFAULT_PROPS$e.variant,
@@ -13286,10 +13339,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 +13409,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 +13480,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 +13570,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 +13654,7 @@ let TabListLayout = /*#__PURE__*/function (TabListLayout) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$8 = 'TabList';
+const COMPONENT_NAME$7 = 'TabList';
 
 /**
  * Component default props.
@@ -13654,14 +13707,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 +13804,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 +13858,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 +14103,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 +14229,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 +14380,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 +14433,8 @@ const Thumbnail$1 = props => {
     variant,
     linkProps,
     linkAs,
+    handleClick,
+    handleKeyPress,
     ...forwardedProps
   } = props;
   const isLoading = isLoadingProp || loadingState === 'isLoading';
@@ -14395,7 +14450,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 +14528,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 +14641,8 @@ const Thumbnail = forwardRef((props, ref) => {
     focusPoint,
     image,
     imgRef: propImgRef,
+    onClick,
+    onKeyPress,
     ...forwardedProps
   } = otherProps;
   const [imgElement, setImgElement] = useState();
@@ -14603,13 +14662,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 +14714,7 @@ const ThumbnailObjectFit = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$3 = 'Toolbar';
+const TOOLBAR_NAME = 'Toolbar';
 
 /**
  * Component default class name and class prefix.
@@ -14662,7 +14723,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 +14734,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 +14764,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 +15383,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$15 as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
 //# sourceMappingURL=index.js.map