@lumx/react 4.3.2-alpha.3 → 4.3.2-alpha.30

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/index.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,7 +1019,7 @@ const BadgeWrapper = forwardRef((props, ref) => {
     ref
   });
 });
-BadgeWrapper.displayName = COMPONENT_NAME$1g;
+BadgeWrapper.displayName = COMPONENT_NAME$1f;
 BadgeWrapper.className = CLASSNAME$1e;
 
 /**
@@ -1070,7 +1068,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
@@ -1168,7 +1166,7 @@ const ButtonRoot = props => {
     children
   });
 };
-ButtonRoot.displayName = COMPONENT_NAME$1f;
+ButtonRoot.displayName = COMPONENT_NAME$1e;
 ButtonRoot.defaultProps = {};
 
 /**
@@ -1178,7 +1176,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 +1189,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$15 = {
+const DEFAULT_PROPS$16 = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1205,10 +1203,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 +1221,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.
@@ -1291,11 +1289,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 +1308,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$14 = {};
+const DEFAULT_PROPS$15 = {};
 
 /**
  * Icon component.
@@ -1388,14 +1386,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 +1403,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 +1416,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 +1439,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.
@@ -1478,14 +1476,14 @@ const IconButton = forwardRef((props, ref) => {
     })
   });
 });
-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 +1493,7 @@ const CLASSNAME$1a = 'lumx-button-group';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$12 = {};
+const DEFAULT_PROPS$13 = {};
 
 /**
  * ButtonGroup component.
@@ -1515,9 +1513,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 +1530,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 +1568,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 +1584,7 @@ const INPUT_HELPER_CONFIGURATION = {
   }
 };
 
-const COMPONENT_NAME$19 = 'InputHelper';
+const COMPONENT_NAME$18 = 'InputHelper';
 const InputHelperClassName = 'lumx-input-helper';
 
 /**
@@ -1601,7 +1599,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$10 = {
+const DEFAULT_PROPS$11 = {
   kind: Kind.info
 };
 
@@ -1612,7 +1610,7 @@ function InputHelper$1(props) {
   const {
     children,
     className,
-    kind = DEFAULT_PROPS$10.kind,
+    kind = DEFAULT_PROPS$11.kind,
     theme,
     ref,
     ...forwardedProps
@@ -1630,9 +1628,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 +1641,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.
@@ -1747,7 +1745,7 @@ const Checkbox$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$$ = {};
+const DEFAULT_PROPS$10 = {};
 
 /**
  * Checkbox component.
@@ -1807,9 +1805,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 +1828,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 +1842,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$_ = {
+const DEFAULT_PROPS$$ = {
   size: Size$1.m
 };
 
@@ -1874,7 +1872,7 @@ const Chip = forwardRef((props, ref) => {
     onAfterClick,
     onBeforeClick,
     onClick,
-    size = DEFAULT_PROPS$_.size,
+    size = DEFAULT_PROPS$$.size,
     theme = defaultTheme,
     href,
     onKeyDown,
@@ -1944,9 +1942,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 +2000,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 +2033,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 +2233,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 +2247,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Y = {
+const DEFAULT_PROPS$Z = {
   variant: CommentBlockVariant.indented
 };
 
@@ -2279,7 +2277,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 +2344,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 +2366,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 +2600,7 @@ const {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$13 = 'DatePickerControlled';
+const COMPONENT_NAME$12 = 'DatePickerControlled';
 
 /**
  * DatePickerControlled component.
@@ -2792,7 +2790,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
     })]
   });
 });
-DatePickerControlled.displayName = COMPONENT_NAME$13;
+DatePickerControlled.displayName = COMPONENT_NAME$12;
 DatePickerControlled.className = CLASSNAME$12;
 
 /**
@@ -2835,7 +2833,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 +2847,7 @@ const useBooleanState = defaultValue => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$12 = 'DatePickerField';
+const COMPONENT_NAME$11 = 'DatePickerField';
 
 /**
  * DatePickerField component.
@@ -2938,7 +2936,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 +3437,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 +3451,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$X = {
+const DEFAULT_PROPS$Y = {
   size: Size$1.big,
   disableBodyScroll: true
 };
@@ -3484,11 +3482,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 +3624,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 +3670,7 @@ const Divider$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$W = {};
+const DEFAULT_PROPS$X = {};
 
 /**
  * Divider component.
@@ -3693,14 +3691,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 +3735,7 @@ const DragHandle = forwardRef((props, ref) => {
     })
   });
 });
-DragHandle.displayName = COMPONENT_NAME$$;
+DragHandle.displayName = COMPONENT_NAME$_;
 DragHandle.className = CLASSNAME$$;
 
 const INITIAL_INDEX = -1;
@@ -3907,7 +3905,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 +3918,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$V = {
+const DEFAULT_PROPS$W = {
   tabIndex: -1
 };
 
@@ -3939,7 +3937,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 +3951,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 +4072,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 +6384,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 +6398,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$U = {
+const DEFAULT_PROPS$V = {
   elevation: 3,
   placement: Placement.AUTO,
   focusAnchorOnClose: true,
@@ -6417,24 +6415,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 +6504,7 @@ const _InnerPopover = forwardRef((props, ref) => {
     })
   }) : null;
 });
-_InnerPopover.displayName = COMPONENT_NAME$Z;
+_InnerPopover.displayName = COMPONENT_NAME$Y;
 
 /**
  * Popover component.
@@ -6518,9 +6516,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 +6564,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 +6578,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$T = {
+const DEFAULT_PROPS$U = {
   closeOnClick: true,
   closeOnClickAway: true,
   closeOnEscape: true,
@@ -6603,18 +6601,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 +6656,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 +6677,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$S = {
+const DEFAULT_PROPS$T = {
   closeMode: 'unmount'
 };
 const isDragHandle = isComponent(DragHandle);
@@ -6697,7 +6695,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 +6810,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 +6878,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 +6889,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 +6953,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 +6973,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Q = {
+const DEFAULT_PROPS$R = {
   gap: Size$1.big,
   orientation: Orientation$1.horizontal
 };
@@ -7005,8 +7003,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 +7056,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 +7096,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 +7106,7 @@ const CLASSNAME$T = 'lumx-heading';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$P = {};
+const DEFAULT_PROPS$Q = {};
 
 /**
  * Get Heading component common props
@@ -7196,7 +7194,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 +7207,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$O = {};
+const DEFAULT_PROPS$P = {};
 
 /**
  * Text component common props
@@ -7294,9 +7292,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 +7329,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 +7369,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 +7382,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$N = {
+const DEFAULT_PROPS$O = {
   orientation: Orientation$1.horizontal,
   wrap: 'nowrap'
 };
@@ -7402,9 +7400,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 +7418,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 +7462,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 +7478,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 +7486,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 +7497,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 +7512,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 +7649,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 +7733,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.
@@ -8436,7 +8464,7 @@ const Inner = forwardRef((props, ref) => {
     })
   });
 });
-Inner.displayName = COMPONENT_NAME$N;
+Inner.displayName = COMPONENT_NAME$M;
 Inner.className = CLASSNAME$N;
 
 /**
@@ -8453,7 +8481,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 +8546,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 +8591,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 +8723,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.
@@ -8848,14 +8876,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 +8987,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 +9008,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 +9116,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 +9148,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 +9181,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.
@@ -9242,7 +9270,7 @@ const Message$1 = props => {
     })]
   });
 };
-Message$1.displayName = COMPONENT_NAME$F;
+Message$1.displayName = COMPONENT_NAME$E;
 Message$1.className = CLASSNAME$F;
 
 /**
@@ -9258,13 +9286,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,7 +9371,7 @@ const Mosaic = forwardRef((props, ref) => {
     })
   });
 });
-Mosaic.displayName = COMPONENT_NAME$E;
+Mosaic.displayName = COMPONENT_NAME$D;
 Mosaic.className = CLASSNAME$E;
 Mosaic.defaultProps = DEFAULT_PROPS$G;
 
@@ -9378,7 +9406,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.
@@ -9470,7 +9498,7 @@ const NavigationSection = forwardRef((props, ref) => {
     }))]
   });
 });
-NavigationSection.displayName = COMPONENT_NAME$D;
+NavigationSection.displayName = COMPONENT_NAME$C;
 NavigationSection.className = CLASSNAME$D;
 
 const {
@@ -9534,7 +9562,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 +9609,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 +9642,7 @@ const NOTIFICATION_CONFIGURATION = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$B = 'Notification';
+const COMPONENT_NAME$A = 'Notification';
 
 /**
  * Component default class name and class prefix.
@@ -9716,14 +9744,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 +9802,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 +9903,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.
@@ -9925,14 +9953,14 @@ const ProgressLinear = forwardRef((props, ref) => {
     })]
   });
 });
-ProgressLinear.displayName = COMPONENT_NAME$y;
+ProgressLinear.displayName = COMPONENT_NAME$x;
 ProgressLinear.className = CLASSNAME$y;
 ProgressLinear.defaultProps = DEFAULT_PROPS$B;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$x = 'ProgressCircular';
+const COMPONENT_NAME$w = 'ProgressCircular';
 
 /**
  * Component default class name and class prefix.
@@ -9994,7 +10022,7 @@ const ProgressCircular = forwardRef((props, ref) => {
     })]
   });
 });
-ProgressCircular.displayName = COMPONENT_NAME$x;
+ProgressCircular.displayName = COMPONENT_NAME$w;
 ProgressCircular.className = CLASSNAME$x;
 ProgressCircular.defaultProps = DEFAULT_PROPS$A;
 
@@ -10010,7 +10038,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 +10085,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 +10344,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 +10412,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 +10526,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 +10580,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.
@@ -10711,14 +10739,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 +10778,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 +10806,7 @@ const RadioGroup = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-RadioGroup.displayName = COMPONENT_NAME$r;
+RadioGroup.displayName = COMPONENT_NAME$q;
 RadioGroup.className = CLASSNAME$r;
 
 /**
@@ -10926,7 +10954,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 +11097,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 +11250,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 +11287,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.
@@ -11374,14 +11402,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 +11461,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 +11517,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 +11593,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 +11634,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 +11671,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 +11713,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 +11980,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 +12315,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 +12354,7 @@ const SlideshowItemGroup = forwardRef((props, ref) => {
     children: children
   });
 });
-SlideshowItemGroup.displayName = COMPONENT_NAME$i;
+SlideshowItemGroup.displayName = COMPONENT_NAME$h;
 SlideshowItemGroup.className = CLASSNAME$h;
 
 /**
@@ -12457,7 +12485,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 +12512,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 +12575,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 +12665,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
       className: element$9('navigation'),
       color: theme === Theme$1.dark ? 'light' : 'dark',
       emphasis: Emphasis$1.low,
-      onClick: onPreviousClick
+      onClick: () => onPreviousClick?.()
     }), /*#__PURE__*/jsx("div", {
       ref: paginationRef,
       className: element$9('pagination'),
@@ -12684,11 +12712,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 +12836,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 +12944,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.
@@ -13090,14 +13118,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 +13198,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 +13255,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 +13277,7 @@ const TableCellVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$b = 'TableCell';
+const COMPONENT_NAME$a = 'TableCell';
 
 /**
  * Component default class name and class prefix.
@@ -13284,6 +13312,10 @@ const TableCell$1 = props => {
     variant = DEFAULT_PROPS$e.variant,
     ...forwardedProps
   } = props;
+  console.log({
+    onHeaderClick,
+    isSortable
+  });
 
   // Use button if clickable
   const Wrapper = onHeaderClick ? 'button' : 'div';
@@ -13365,14 +13397,14 @@ const TableCell = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-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 +13459,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 +13549,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 +13633,7 @@ let TabListLayout = /*#__PURE__*/function (TabListLayout) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$8 = 'TabList';
+const COMPONENT_NAME$7 = 'TabList';
 
 /**
  * Component default props.
@@ -13654,14 +13686,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 +13783,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 +13837,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.
@@ -14176,7 +14208,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 +14359,7 @@ function calculateFocusPointStyle({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$4 = 'Thumbnail';
+const COMPONENT_NAME$3 = 'Thumbnail';
 
 /**
  * Component default class name and class prefix.
@@ -14609,7 +14641,7 @@ const Thumbnail = forwardRef((props, ref) => {
     })
   });
 });
-Thumbnail.displayName = COMPONENT_NAME$4;
+Thumbnail.displayName = COMPONENT_NAME$3;
 Thumbnail.className = CLASSNAME$4;
 Thumbnail.defaultProps = DEFAULT_PROPS$4;
 
@@ -14653,7 +14685,7 @@ const ThumbnailObjectFit = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$3 = 'Toolbar';
+const TOOLBAR_NAME = 'Toolbar';
 
 /**
  * Component default class name and class prefix.
@@ -14662,7 +14694,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 +14705,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 +14735,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 +15354,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