@lumx/react 4.0.0 → 4.0.1-alpha.0

package/index.js

@@ -43,6 +43,7 @@ import range from 'lodash/range';
 import { mdiPlayCircleOutline } from '@lumx/icons/esm/play-circle-outline';
 import { mdiPauseCircleOutline } from '@lumx/icons/esm/pause-circle-outline';
 import chunk from 'lodash/chunk';
+import debounce$1 from 'lodash/debounce';
 import ReactDOM from 'react-dom';
 import take from 'lodash/take';
 import isObject from 'lodash/isObject';
@@ -248,7 +249,7 @@ const CLASSNAME$1i = 'lumx-alert-dialog';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$15 = {
+const DEFAULT_PROPS$16 = {
   size: Size.tiny,
   kind: Kind.info
 };
@@ -269,8 +270,8 @@ const AlertDialog = forwardRef((props, ref) => {
     className,
     cancelProps,
     confirmProps,
-    kind = DEFAULT_PROPS$15.kind,
-    size = DEFAULT_PROPS$15.size,
+    kind = DEFAULT_PROPS$16.kind,
+    size = DEFAULT_PROPS$16.size,
     dialogProps,
     children,
     ...forwardedProps
@@ -359,7 +360,7 @@ const AlertDialog = forwardRef((props, ref) => {
 });
 AlertDialog.displayName = COMPONENT_NAME$1k;
 AlertDialog.className = CLASSNAME$1i;
-AlertDialog.defaultProps = DEFAULT_PROPS$15;
+AlertDialog.defaultProps = DEFAULT_PROPS$16;
 
 /**
  * Hook focusing an element when defined and `focus` boolean `true`.
@@ -460,7 +461,7 @@ const CLASSNAME$1h = 'lumx-autocomplete';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$14 = {
+const DEFAULT_PROPS$15 = {
   anchorToInput: false,
   closeOnClick: false,
   closeOnClickAway: true,
@@ -482,13 +483,13 @@ const Autocomplete = forwardRef((props, ref) => {
     otherProps
   } = useDisableStateProps(props);
   const {
-    anchorToInput = DEFAULT_PROPS$14.anchorToInput,
+    anchorToInput = DEFAULT_PROPS$15.anchorToInput,
     children,
     chips,
     className,
-    closeOnClick = DEFAULT_PROPS$14.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$14.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$14.closeOnEscape,
+    closeOnClick = DEFAULT_PROPS$15.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$15.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$15.closeOnEscape,
     error,
     fitToAnchorWidth,
     hasError,
@@ -509,7 +510,7 @@ const Autocomplete = forwardRef((props, ref) => {
     onInfiniteScroll,
     placeholder,
     placement,
-    shouldFocusOnClose = DEFAULT_PROPS$14.shouldFocusOnClose,
+    shouldFocusOnClose = DEFAULT_PROPS$15.shouldFocusOnClose,
     theme = defaultTheme,
     value,
     textFieldProps = {},
@@ -564,7 +565,7 @@ const Autocomplete = forwardRef((props, ref) => {
 });
 Autocomplete.displayName = COMPONENT_NAME$1j;
 Autocomplete.className = CLASSNAME$1h;
-Autocomplete.defaultProps = DEFAULT_PROPS$14;
+Autocomplete.defaultProps = DEFAULT_PROPS$15;
 
 /**
  * Component display name.
@@ -579,7 +580,7 @@ const CLASSNAME$1g = 'lumx-autocomplete-multiple';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$13 = {
+const DEFAULT_PROPS$14 = {
   closeOnClickAway: true,
   closeOnEscape: true,
   selectedChipRender(choice, index, onClear, isDisabled) {
@@ -619,8 +620,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     chipsAlignment,
     className,
-    closeOnClickAway = DEFAULT_PROPS$13.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$13.closeOnEscape,
+    closeOnClickAway = DEFAULT_PROPS$14.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$14.closeOnEscape,
     fitToAnchorWidth,
     hasError,
     helper,
@@ -642,12 +643,12 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     onKeyDown,
     placeholder,
     placement,
-    selectedChipRender = DEFAULT_PROPS$13.selectedChipRender,
+    selectedChipRender = DEFAULT_PROPS$14.selectedChipRender,
     shouldFocusOnClose,
     theme = defaultTheme,
     type,
     value,
-    values = DEFAULT_PROPS$13.values,
+    values = DEFAULT_PROPS$14.values,
     ...forwardedProps
   } = otherProps;
   return /*#__PURE__*/jsx(Autocomplete, {
@@ -689,7 +690,7 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
 });
 AutocompleteMultiple.displayName = COMPONENT_NAME$1i;
 AutocompleteMultiple.className = CLASSNAME$1g;
-AutocompleteMultiple.defaultProps = DEFAULT_PROPS$13;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS$14;
 
 /**
  * Component display name.
@@ -704,7 +705,7 @@ const CLASSNAME$1f = 'lumx-avatar';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$12 = {
+const DEFAULT_PROPS$13 = {
   size: Size.m
 };
 
@@ -727,7 +728,7 @@ const Avatar = forwardRef((props, ref) => {
     linkAs,
     onClick,
     onKeyPress,
-    size = DEFAULT_PROPS$12.size,
+    size = DEFAULT_PROPS$13.size,
     theme = defaultTheme,
     thumbnailProps,
     ...forwardedProps
@@ -763,7 +764,7 @@ const Avatar = forwardRef((props, ref) => {
 });
 Avatar.displayName = COMPONENT_NAME$1h;
 Avatar.className = CLASSNAME$1f;
-Avatar.defaultProps = DEFAULT_PROPS$12;
+Avatar.defaultProps = DEFAULT_PROPS$13;
 
 /**
  * Component display name.
@@ -778,7 +779,7 @@ const CLASSNAME$1e = 'lumx-badge';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$11 = {
+const DEFAULT_PROPS$12 = {
   color: ColorPalette.primary
 };
 
@@ -793,7 +794,7 @@ const Badge = forwardRef((props, ref) => {
   const {
     children,
     className,
-    color = DEFAULT_PROPS$11.color,
+    color = DEFAULT_PROPS$12.color,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
@@ -808,7 +809,7 @@ const Badge = forwardRef((props, ref) => {
 });
 Badge.displayName = COMPONENT_NAME$1g;
 Badge.className = CLASSNAME$1e;
-Badge.defaultProps = DEFAULT_PROPS$11;
+Badge.defaultProps = DEFAULT_PROPS$12;
 
 /**
  * Component default class name and class prefix.
@@ -1028,7 +1029,7 @@ const CLASSNAME$1c = 'lumx-button';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$10 = {
+const DEFAULT_PROPS$11 = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1045,10 +1046,10 @@ const Button = forwardRef((props, ref) => {
   const {
     children,
     className,
-    emphasis = DEFAULT_PROPS$10.emphasis,
+    emphasis = DEFAULT_PROPS$11.emphasis,
     leftIcon,
     rightIcon,
-    size = DEFAULT_PROPS$10.size,
+    size = DEFAULT_PROPS$11.size,
     theme = defaultTheme,
     ...forwardedProps
   } = props;
@@ -1092,7 +1093,7 @@ const Button = forwardRef((props, ref) => {
 });
 Button.displayName = COMPONENT_NAME$1e;
 Button.className = CLASSNAME$1c;
-Button.defaultProps = DEFAULT_PROPS$10;
+Button.defaultProps = DEFAULT_PROPS$11;
 
 /**
  * Component display name.
@@ -1107,7 +1108,7 @@ const CLASSNAME$1b = 'lumx-icon-button';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$$ = {
+const DEFAULT_PROPS$10 = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1122,11 +1123,11 @@ const DEFAULT_PROPS$$ = {
 const IconButton = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme.light;
   const {
-    emphasis = DEFAULT_PROPS$$.emphasis,
+    emphasis = DEFAULT_PROPS$10.emphasis,
     image,
     icon,
     label,
-    size = DEFAULT_PROPS$$.size,
+    size = DEFAULT_PROPS$10.size,
     theme = defaultTheme,
     tooltipProps,
     hideTooltip,
@@ -1158,7 +1159,7 @@ const IconButton = forwardRef((props, ref) => {
 });
 IconButton.displayName = COMPONENT_NAME$1d;
 IconButton.className = CLASSNAME$1b;
-IconButton.defaultProps = DEFAULT_PROPS$$;
+IconButton.defaultProps = DEFAULT_PROPS$10;
 
 /**
  * Component display name.
@@ -1173,7 +1174,7 @@ const CLASSNAME$1a = 'lumx-button-group';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$_ = {};
+const DEFAULT_PROPS$$ = {};
 
 /**
  * ButtonGroup component.
@@ -1197,7 +1198,7 @@ const ButtonGroup = forwardRef((props, ref) => {
 });
 ButtonGroup.displayName = COMPONENT_NAME$1c;
 ButtonGroup.className = CLASSNAME$1a;
-ButtonGroup.defaultProps = DEFAULT_PROPS$_;
+ButtonGroup.defaultProps = DEFAULT_PROPS$$;
 
 /**
  * Intermediate state of checkbox.
@@ -1221,7 +1222,7 @@ const CLASSNAME$19 = 'lumx-checkbox';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Z = {};
+const DEFAULT_PROPS$_ = {};
 
 /**
  * Checkbox component.
@@ -1321,7 +1322,7 @@ const Checkbox = forwardRef((props, ref) => {
 });
 Checkbox.displayName = COMPONENT_NAME$1b;
 Checkbox.className = CLASSNAME$19;
-Checkbox.defaultProps = DEFAULT_PROPS$Z;
+Checkbox.defaultProps = DEFAULT_PROPS$_;
 
 /**
  * Wrap mouse event handler to stop event propagation.
@@ -1352,7 +1353,7 @@ const CLASSNAME$18 = 'lumx-chip';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Y = {
+const DEFAULT_PROPS$Z = {
   size: Size.m
 };
 
@@ -1382,7 +1383,7 @@ const Chip = forwardRef((props, ref) => {
     onAfterClick,
     onBeforeClick,
     onClick,
-    size = DEFAULT_PROPS$Y.size,
+    size = DEFAULT_PROPS$Z.size,
     theme = defaultTheme,
     href,
     onKeyDown,
@@ -1455,7 +1456,7 @@ const Chip = forwardRef((props, ref) => {
 });
 Chip.displayName = COMPONENT_NAME$1a;
 Chip.className = CLASSNAME$18;
-Chip.defaultProps = DEFAULT_PROPS$Y;
+Chip.defaultProps = DEFAULT_PROPS$Z;
 
 const INITIAL_STATE_ACTIVE_CHIP = -1;
 
@@ -1511,7 +1512,7 @@ const useChipGroupNavigation = (chips, onChipDeleted, initialActiveChip = INITIA
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$X = {};
+const DEFAULT_PROPS$Y = {};
 
 /**
  * Component display name.
@@ -1546,7 +1547,7 @@ const InternalChipGroup = forwardRef((props, ref) => {
 });
 InternalChipGroup.displayName = COMPONENT_NAME$19;
 InternalChipGroup.className = CLASSNAME$17;
-InternalChipGroup.defaultProps = DEFAULT_PROPS$X;
+InternalChipGroup.defaultProps = DEFAULT_PROPS$Y;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
 });
@@ -1576,7 +1577,7 @@ const CLASSNAME$16 = 'lumx-comment-block';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$W = {
+const DEFAULT_PROPS$X = {
   variant: CommentBlockVariant.indented
 };
 
@@ -1606,7 +1607,7 @@ const CommentBlock = forwardRef((props, ref) => {
     onMouseLeave,
     text,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$W.variant,
+    variant = DEFAULT_PROPS$X.variant,
     ...forwardedProps
   } = props;
   const hasChildren = Children.count(children) > 0;
@@ -1676,7 +1677,7 @@ const CommentBlock = forwardRef((props, ref) => {
 });
 CommentBlock.displayName = COMPONENT_NAME$18;
 CommentBlock.className = CLASSNAME$16;
-CommentBlock.defaultProps = DEFAULT_PROPS$W;
+CommentBlock.defaultProps = DEFAULT_PROPS$X;
 
 /**
  * Add a number of months from a date while resetting the day to prevent month length mismatches.
@@ -2769,7 +2770,7 @@ const CLASSNAME$14 = 'lumx-dialog';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$V = {
+const DEFAULT_PROPS$W = {
   size: Size.big,
   disableBodyScroll: true
 };
@@ -2800,11 +2801,11 @@ const Dialog = forwardRef((props, ref) => {
     parentElement,
     contentRef,
     preventAutoClose,
-    size = DEFAULT_PROPS$V.size,
+    size = DEFAULT_PROPS$W.size,
     zIndex,
     dialogProps,
     onVisibilityChange,
-    disableBodyScroll = DEFAULT_PROPS$V.disableBodyScroll,
+    disableBodyScroll = DEFAULT_PROPS$W.disableBodyScroll,
     preventCloseOnClick,
     preventCloseOnEscape,
     ...forwardedProps
@@ -2937,7 +2938,7 @@ const Dialog = forwardRef((props, ref) => {
 });
 Dialog.displayName = COMPONENT_NAME$14;
 Dialog.className = CLASSNAME$14;
-Dialog.defaultProps = DEFAULT_PROPS$V;
+Dialog.defaultProps = DEFAULT_PROPS$W;
 
 /**
  * Component display name.
@@ -2952,7 +2953,7 @@ const CLASSNAME$13 = 'lumx-divider';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$U = {};
+const DEFAULT_PROPS$V = {};
 
 /**
  * Divider component.
@@ -2979,7 +2980,7 @@ const Divider = forwardRef((props, ref) => {
 });
 Divider.displayName = COMPONENT_NAME$13;
 Divider.className = CLASSNAME$13;
-Divider.defaultProps = DEFAULT_PROPS$U;
+Divider.defaultProps = DEFAULT_PROPS$V;
 
 /**
  * Component display name.
@@ -3199,7 +3200,7 @@ const CLASSNAME$11 = 'lumx-list';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$T = {
+const DEFAULT_PROPS$U = {
   tabIndex: -1
 };
 
@@ -3218,7 +3219,7 @@ const InternalList = forwardRef((props, ref) => {
     isClickable,
     itemPadding,
     onListItemSelected,
-    tabIndex = DEFAULT_PROPS$T.tabIndex,
+    tabIndex = DEFAULT_PROPS$U.tabIndex,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("ul", {
@@ -3234,7 +3235,7 @@ const InternalList = forwardRef((props, ref) => {
 });
 InternalList.displayName = COMPONENT_NAME$11;
 InternalList.className = CLASSNAME$11;
-InternalList.defaultProps = DEFAULT_PROPS$T;
+InternalList.defaultProps = DEFAULT_PROPS$U;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
 });
@@ -5675,7 +5676,7 @@ const CLASSNAME$10 = 'lumx-popover';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$S = {
+const DEFAULT_PROPS$T = {
   elevation: 3,
   placement: Placement.AUTO,
   focusAnchorOnClose: true,
@@ -5692,24 +5693,24 @@ const _InnerPopover = forwardRef((props, ref) => {
     className,
     closeOnClickAway,
     closeOnEscape,
-    elevation = DEFAULT_PROPS$S.elevation,
+    elevation = DEFAULT_PROPS$T.elevation,
     focusElement,
     hasArrow,
     isOpen,
     onClose,
     parentElement,
-    usePortal = DEFAULT_PROPS$S.usePortal,
-    focusAnchorOnClose = DEFAULT_PROPS$S.focusAnchorOnClose,
+    usePortal = DEFAULT_PROPS$T.usePortal,
+    focusAnchorOnClose = DEFAULT_PROPS$T.focusAnchorOnClose,
     withFocusTrap,
     boundaryRef,
     fitToAnchorWidth,
     fitWithinViewportHeight,
     focusTrapZoneElement,
     offset,
-    placement = DEFAULT_PROPS$S.placement,
+    placement = DEFAULT_PROPS$T.placement,
     style,
     theme,
-    zIndex = DEFAULT_PROPS$S.zIndex,
+    zIndex = DEFAULT_PROPS$T.zIndex,
     ...forwardedProps
   } = props;
   const popoverRef = useRef(null);
@@ -5795,7 +5796,7 @@ const Popover = skipRender(
 () => Boolean(DOCUMENT), _InnerPopover);
 Popover.displayName = COMPONENT_NAME$10;
 Popover.className = CLASSNAME$10;
-Popover.defaultProps = DEFAULT_PROPS$S;
+Popover.defaultProps = DEFAULT_PROPS$T;
 
 // The error margin in px we want to have for triggering infinite scroll
 const SCROLL_TRIGGER_MARGIN = 5;
@@ -5851,7 +5852,7 @@ const CLASSNAME$$ = 'lumx-dropdown';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$R = {
+const DEFAULT_PROPS$S = {
   closeOnClick: true,
   closeOnClickAway: true,
   closeOnEscape: true,
@@ -5874,18 +5875,18 @@ const Dropdown = forwardRef((props, ref) => {
     anchorRef,
     children,
     className,
-    closeOnClick = DEFAULT_PROPS$R.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$R.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$R.closeOnEscape,
-    fitToAnchorWidth = DEFAULT_PROPS$R.fitToAnchorWidth,
-    fitWithinViewportHeight = DEFAULT_PROPS$R.fitWithinViewportHeight,
+    closeOnClick = DEFAULT_PROPS$S.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$S.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$S.closeOnEscape,
+    fitToAnchorWidth = DEFAULT_PROPS$S.fitToAnchorWidth,
+    fitWithinViewportHeight = DEFAULT_PROPS$S.fitWithinViewportHeight,
     isOpen,
     offset,
-    focusAnchorOnClose = DEFAULT_PROPS$R.focusAnchorOnClose,
+    focusAnchorOnClose = DEFAULT_PROPS$S.focusAnchorOnClose,
     onClose,
     onInfiniteScroll,
-    placement = DEFAULT_PROPS$R.placement,
-    shouldFocusOnOpen = DEFAULT_PROPS$R.shouldFocusOnOpen,
+    placement = DEFAULT_PROPS$S.placement,
+    shouldFocusOnOpen = DEFAULT_PROPS$S.shouldFocusOnOpen,
     zIndex,
     ...forwardedProps
   } = props;
@@ -5931,7 +5932,7 @@ const Dropdown = forwardRef((props, ref) => {
 });
 Dropdown.displayName = COMPONENT_NAME$$;
 Dropdown.className = CLASSNAME$$;
-Dropdown.defaultProps = DEFAULT_PROPS$R;
+Dropdown.defaultProps = DEFAULT_PROPS$S;
 
 /**
  * Component display name.
@@ -5946,7 +5947,7 @@ const CLASSNAME$_ = 'lumx-expansion-panel';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Q = {
+const DEFAULT_PROPS$R = {
   closeMode: 'unmount'
 };
 const isDragHandle = isComponent(DragHandle);
@@ -5964,7 +5965,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme.light;
   const {
     className,
-    closeMode = DEFAULT_PROPS$Q.closeMode,
+    closeMode = DEFAULT_PROPS$R.closeMode,
     children: anyChildren,
     hasBackground,
     hasHeaderDivider,
@@ -6082,11 +6083,11 @@ const ExpansionPanel = forwardRef((props, ref) => {
 });
 ExpansionPanel.displayName = COMPONENT_NAME$_;
 ExpansionPanel.className = CLASSNAME$_;
-ExpansionPanel.defaultProps = DEFAULT_PROPS$Q;
+ExpansionPanel.defaultProps = DEFAULT_PROPS$R;
 
 const COMPONENT_NAME$Z = 'Flag';
 const CLASSNAME$Z = 'lumx-flag';
-const DEFAULT_PROPS$P = {};
+const DEFAULT_PROPS$Q = {};
 
 /**
  * Flag component.
@@ -6131,7 +6132,7 @@ const Flag = forwardRef((props, ref) => {
 });
 Flag.displayName = COMPONENT_NAME$Z;
 Flag.className = CLASSNAME$Z;
-Flag.defaultProps = DEFAULT_PROPS$P;
+Flag.defaultProps = DEFAULT_PROPS$Q;
 
 /**
  * Component display name.
@@ -6194,7 +6195,7 @@ const CLASSNAME$X = 'lumx-generic-block';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$O = {
+const DEFAULT_PROPS$P = {
   gap: Size.big,
   orientation: Orientation.horizontal
 };
@@ -6224,8 +6225,8 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     children,
     actions,
     actionsProps,
-    gap = DEFAULT_PROPS$O.gap,
-    orientation = DEFAULT_PROPS$O.orientation,
+    gap = DEFAULT_PROPS$P.gap,
+    orientation = DEFAULT_PROPS$P.orientation,
     contentProps,
     ...forwardedProps
   } = props;
@@ -6279,7 +6280,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
 });
 BaseGenericBlock.displayName = COMPONENT_NAME$X;
 BaseGenericBlock.className = CLASSNAME$X;
-BaseGenericBlock.defaultProps = DEFAULT_PROPS$O;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS$P;
 const GenericBlock = Object.assign(BaseGenericBlock, {
   Figure,
   Content,
@@ -6360,7 +6361,7 @@ const CLASSNAME$W = 'lumx-text';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$N = {};
+const DEFAULT_PROPS$O = {};
 
 /**
  * Text component.
@@ -6422,7 +6423,7 @@ const Text = forwardRef((props, ref) => {
 });
 Text.displayName = COMPONENT_NAME$W;
 Text.className = CLASSNAME$W;
-Text.defaultProps = DEFAULT_PROPS$N;
+Text.defaultProps = DEFAULT_PROPS$O;
 
 /** The maximum authorized heading level. */
 const MAX_HEADING_LEVEL = 6;
@@ -6469,7 +6470,7 @@ const CLASSNAME$V = 'lumx-heading';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$M = {};
+const DEFAULT_PROPS$N = {};
 
 /**
  * Renders a heading component.
@@ -6498,7 +6499,7 @@ const Heading = forwardRef((props, ref) => {
 });
 Heading.displayName = COMPONENT_NAME$V;
 Heading.className = CLASSNAME$V;
-Heading.defaultProps = DEFAULT_PROPS$M;
+Heading.defaultProps = DEFAULT_PROPS$N;
 
 /**
  * Provide a new heading level context.
@@ -6536,7 +6537,7 @@ const CLASSNAME$U = 'lumx-grid';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$L = {
+const DEFAULT_PROPS$M = {
   orientation: Orientation.horizontal,
   wrap: 'nowrap'
 };
@@ -6554,9 +6555,9 @@ const Grid = forwardRef((props, ref) => {
     className,
     gutter,
     hAlign,
-    orientation = DEFAULT_PROPS$L.orientation,
+    orientation = DEFAULT_PROPS$M.orientation,
     vAlign,
-    wrap = DEFAULT_PROPS$L.wrap,
+    wrap = DEFAULT_PROPS$M.wrap,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
@@ -6577,7 +6578,7 @@ const Grid = forwardRef((props, ref) => {
 });
 Grid.displayName = COMPONENT_NAME$U;
 Grid.className = CLASSNAME$U;
-Grid.defaultProps = DEFAULT_PROPS$L;
+Grid.defaultProps = DEFAULT_PROPS$M;
 
 /**
  * Component display name.
@@ -6633,7 +6634,7 @@ const CLASSNAME$S = 'lumx-grid-column';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$K = {};
+const DEFAULT_PROPS$L = {};
 
 /**
  * The GridColumn is a layout component that can display children in a grid
@@ -6670,7 +6671,7 @@ const GridColumn = forwardRef((props, ref) => {
 });
 GridColumn.displayName = COMPONENT_NAME$S;
 GridColumn.className = CLASSNAME$S;
-GridColumn.defaultProps = DEFAULT_PROPS$K;
+GridColumn.defaultProps = DEFAULT_PROPS$L;
 
 /** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
 function resolveColorWithVariants(colorWithVariants, colorVariant) {
@@ -6692,7 +6693,7 @@ const CLASSNAME$R = 'lumx-icon';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$J = {};
+const DEFAULT_PROPS$K = {};
 
 /**
  * Icon component.
@@ -6770,7 +6771,7 @@ const Icon = forwardRef((props, ref) => {
 });
 Icon.displayName = COMPONENT_NAME$R;
 Icon.className = CLASSNAME$R;
-Icon.defaultProps = DEFAULT_PROPS$J;
+Icon.defaultProps = DEFAULT_PROPS$K;
 
 /** Internal component used to render image captions */
 const ImageCaption = props => {
@@ -6865,7 +6866,7 @@ const CLASSNAME$Q = 'lumx-image-block';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$I = {
+const DEFAULT_PROPS$J = {
   captionPosition: ImageBlockCaptionPosition.below,
   align: Alignment.left
 };
@@ -6881,9 +6882,9 @@ const ImageBlock = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme.light;
   const {
     actions,
-    align = DEFAULT_PROPS$I.align,
+    align = DEFAULT_PROPS$J.align,
     alt,
-    captionPosition = DEFAULT_PROPS$I.captionPosition,
+    captionPosition = DEFAULT_PROPS$J.captionPosition,
     captionStyle,
     className,
     description,
@@ -6937,7 +6938,7 @@ const ImageBlock = forwardRef((props, ref) => {
 });
 ImageBlock.displayName = COMPONENT_NAME$Q;
 ImageBlock.className = CLASSNAME$Q;
-ImageBlock.defaultProps = DEFAULT_PROPS$I;
+ImageBlock.defaultProps = DEFAULT_PROPS$J;
 
 /**
  * Component display name.
@@ -7687,7 +7688,7 @@ const CLASSNAME$O = 'lumx-inline-list';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$H = {};
+const DEFAULT_PROPS$I = {};
 
 /**
  * InlineList component.
@@ -7738,7 +7739,7 @@ const InlineList = forwardRef((props, ref) => {
 });
 InlineList.displayName = COMPONENT_NAME$O;
 InlineList.className = CLASSNAME$O;
-InlineList.defaultProps = DEFAULT_PROPS$H;
+InlineList.defaultProps = DEFAULT_PROPS$I;
 
 const INPUT_HELPER_CONFIGURATION = {
   error: {
@@ -7765,7 +7766,7 @@ const CLASSNAME$N = 'lumx-input-helper';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$G = {
+const DEFAULT_PROPS$H = {
   kind: Kind.info
 };
 
@@ -7781,7 +7782,7 @@ const InputHelper = forwardRef((props, ref) => {
   const {
     children,
     className,
-    kind = DEFAULT_PROPS$G.kind,
+    kind = DEFAULT_PROPS$H.kind,
     theme = defaultTheme,
     ...forwardedProps
   } = props;
@@ -7801,7 +7802,7 @@ const InputHelper = forwardRef((props, ref) => {
 });
 InputHelper.displayName = COMPONENT_NAME$N;
 InputHelper.className = CLASSNAME$N;
-InputHelper.defaultProps = DEFAULT_PROPS$G;
+InputHelper.defaultProps = DEFAULT_PROPS$H;
 
 /**
  * Component display name.
@@ -7816,7 +7817,7 @@ const CLASSNAME$M = 'lumx-input-label';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$F = {};
+const DEFAULT_PROPS$G = {};
 
 /**
  * InputLabel component.
@@ -7851,7 +7852,7 @@ const InputLabel = forwardRef((props, ref) => {
 });
 InputLabel.displayName = COMPONENT_NAME$M;
 InputLabel.className = CLASSNAME$M;
-InputLabel.defaultProps = DEFAULT_PROPS$F;
+InputLabel.defaultProps = DEFAULT_PROPS$G;
 
 /**
  * Component display name.
@@ -8063,7 +8064,7 @@ const CLASSNAME$J = 'lumx-link-preview';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$E = {
+const DEFAULT_PROPS$F = {
   size: Size.regular,
   titleHeading: 'h2'
 };
@@ -8083,11 +8084,11 @@ const LinkPreview = forwardRef((props, ref) => {
     link,
     linkAs,
     linkProps,
-    size = DEFAULT_PROPS$E.size,
+    size = DEFAULT_PROPS$F.size,
     theme = defaultTheme,
     thumbnailProps,
     title,
-    titleHeading = DEFAULT_PROPS$E.titleHeading,
+    titleHeading = DEFAULT_PROPS$F.titleHeading,
     ...forwardedProps
   } = props;
   // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
@@ -8155,7 +8156,7 @@ const LinkPreview = forwardRef((props, ref) => {
 });
 LinkPreview.displayName = COMPONENT_NAME$J;
 LinkPreview.className = CLASSNAME$J;
-LinkPreview.defaultProps = DEFAULT_PROPS$E;
+LinkPreview.defaultProps = DEFAULT_PROPS$F;
 
 /**
  * Render link with default <a> HTML component or a custom one provided by `linkAs`.
@@ -8184,7 +8185,7 @@ const CLASSNAME$I = 'lumx-list-item';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$D = {
+const DEFAULT_PROPS$E = {
   size: Size.regular
 };
 
@@ -8223,7 +8224,7 @@ const ListItem = forwardRef((props, ref) => {
     linkProps = {},
     linkRef,
     onItemSelected,
-    size = DEFAULT_PROPS$D.size,
+    size = DEFAULT_PROPS$E.size,
     ...forwardedProps
   } = otherProps;
   const role = linkAs || linkProps.href ? 'link' : 'button';
@@ -8282,7 +8283,7 @@ const ListItem = forwardRef((props, ref) => {
 });
 ListItem.displayName = COMPONENT_NAME$I;
 ListItem.className = CLASSNAME$I;
-ListItem.defaultProps = DEFAULT_PROPS$D;
+ListItem.defaultProps = DEFAULT_PROPS$E;
 
 /**
  * Component display name.
@@ -8447,7 +8448,7 @@ const CLASSNAME$E = 'lumx-mosaic';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$C = {};
+const DEFAULT_PROPS$D = {};
 
 /**
  * Mosaic component.
@@ -8516,7 +8517,7 @@ const Mosaic = forwardRef((props, ref) => {
 });
 Mosaic.displayName = COMPONENT_NAME$E;
 Mosaic.className = CLASSNAME$E;
-Mosaic.defaultProps = DEFAULT_PROPS$C;
+Mosaic.defaultProps = DEFAULT_PROPS$D;
 
 const NavigationContext = /*#__PURE__*/createContext({
   orientation: Orientation.vertical
@@ -8685,7 +8686,7 @@ const CLASSNAME$C = 'lumx-navigation';
 /**
  * Component default props
  */
-const DEFAULT_PROPS$B = {
+const DEFAULT_PROPS$C = {
   orientation: Orientation.vertical
 };
 const Navigation = forwardRef((props, ref) => {
@@ -8694,7 +8695,7 @@ const Navigation = forwardRef((props, ref) => {
     children,
     className,
     theme = defaultTheme,
-    orientation = DEFAULT_PROPS$B.orientation,
+    orientation = DEFAULT_PROPS$C.orientation,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx(ThemeProvider, {
@@ -8721,7 +8722,7 @@ const Navigation = forwardRef((props, ref) => {
 });
 Navigation.displayName = COMPONENT_NAME$C;
 Navigation.className = CLASSNAME$C;
-Navigation.defaultProps = DEFAULT_PROPS$B;
+Navigation.defaultProps = DEFAULT_PROPS$C;
 
 // Sub components
 Navigation.Section = NavigationSection;
@@ -8762,7 +8763,7 @@ const CLASSNAME$B = 'lumx-notification';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$A = {
+const DEFAULT_PROPS$B = {
   zIndex: 9999,
   usePortal: true
 };
@@ -8786,8 +8787,8 @@ const Notification = forwardRef((props, ref) => {
     onClick,
     theme = defaultTheme,
     type,
-    zIndex = DEFAULT_PROPS$A.zIndex,
-    usePortal = DEFAULT_PROPS$A.usePortal,
+    zIndex = DEFAULT_PROPS$B.zIndex,
+    usePortal = DEFAULT_PROPS$B.usePortal,
     style,
     ...forwardedProps
   } = props;
@@ -8853,7 +8854,7 @@ const Notification = forwardRef((props, ref) => {
 });
 Notification.displayName = COMPONENT_NAME$B;
 Notification.className = CLASSNAME$B;
-Notification.defaultProps = DEFAULT_PROPS$A;
+Notification.defaultProps = DEFAULT_PROPS$B;
 
 /**
  * Component display name.
@@ -8868,7 +8869,7 @@ const CLASSNAME$A = 'lumx-popover-dialog';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$z = {};
+const DEFAULT_PROPS$A = {};
 
 /**
  * PopoverDialog component.
@@ -8911,7 +8912,7 @@ const PopoverDialog = forwardRef((props, ref) => {
 });
 PopoverDialog.displayName = COMPONENT_NAME$A;
 PopoverDialog.className = CLASSNAME$A;
-PopoverDialog.defaultProps = DEFAULT_PROPS$z;
+PopoverDialog.defaultProps = DEFAULT_PROPS$A;
 
 /**
  * Component display name.
@@ -8926,7 +8927,7 @@ const CLASSNAME$z = 'lumx-post-block';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$y = {
+const DEFAULT_PROPS$z = {
   orientation: Orientation.horizontal
 };
 
@@ -8946,7 +8947,7 @@ const PostBlock = forwardRef((props, ref) => {
     className,
     meta,
     onClick,
-    orientation = DEFAULT_PROPS$y.orientation,
+    orientation = DEFAULT_PROPS$z.orientation,
     tags,
     text,
     theme = defaultTheme,
@@ -9009,7 +9010,7 @@ const PostBlock = forwardRef((props, ref) => {
 });
 PostBlock.displayName = COMPONENT_NAME$z;
 PostBlock.className = CLASSNAME$z;
-PostBlock.defaultProps = DEFAULT_PROPS$y;
+PostBlock.defaultProps = DEFAULT_PROPS$z;
 
 /**
  * Component display name.
@@ -9024,7 +9025,7 @@ const CLASSNAME$y = 'lumx-progress-linear';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$x = {};
+const DEFAULT_PROPS$y = {};
 
 /**
  * ProgressLinear component.
@@ -9056,7 +9057,7 @@ const ProgressLinear = forwardRef((props, ref) => {
 });
 ProgressLinear.displayName = COMPONENT_NAME$y;
 ProgressLinear.className = CLASSNAME$y;
-ProgressLinear.defaultProps = DEFAULT_PROPS$x;
+ProgressLinear.defaultProps = DEFAULT_PROPS$y;
 
 /**
  * Component display name.
@@ -9071,7 +9072,7 @@ const CLASSNAME$x = 'lumx-progress-circular';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$w = {
+const DEFAULT_PROPS$x = {
   size: Size.m,
   display: 'block'
 };
@@ -9088,8 +9089,8 @@ const ProgressCircular = forwardRef((props, ref) => {
   const {
     className,
     theme = defaultTheme,
-    size = DEFAULT_PROPS$w.size,
-    display = DEFAULT_PROPS$w.display,
+    size = DEFAULT_PROPS$x.size,
+    display = DEFAULT_PROPS$x.display,
     ...forwardedProps
   } = props;
   const Element = display === 'block' ? 'div' : 'span';
@@ -9122,7 +9123,7 @@ const ProgressCircular = forwardRef((props, ref) => {
 });
 ProgressCircular.displayName = COMPONENT_NAME$x;
 ProgressCircular.className = CLASSNAME$x;
-ProgressCircular.defaultProps = DEFAULT_PROPS$w;
+ProgressCircular.defaultProps = DEFAULT_PROPS$x;
 
 const ProgressVariant = {
   linear: 'linear',
@@ -9146,7 +9147,7 @@ const CLASSNAME$w = 'lumx-progress';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$v = {
+const DEFAULT_PROPS$w = {
   variant: ProgressVariant.circular
 };
 
@@ -9163,7 +9164,7 @@ const Progress = forwardRef((props, ref) => {
   const {
     className,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$v.variant,
+    variant = DEFAULT_PROPS$w.variant,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsxs("div", {
@@ -9183,7 +9184,7 @@ const Progress = forwardRef((props, ref) => {
 });
 Progress.displayName = COMPONENT_NAME$w;
 Progress.className = CLASSNAME$w;
-Progress.defaultProps = DEFAULT_PROPS$v;
+Progress.defaultProps = DEFAULT_PROPS$w;
 
 const INIT_STATE = {
   isLazy: true,
@@ -9310,7 +9311,7 @@ const useTabProviderContextState = () => {
   return context?.[0];
 };
 
-const DEFAULT_PROPS$u = {
+const DEFAULT_PROPS$v = {
   isLazy: INIT_STATE.isLazy,
   shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
 };
@@ -9339,7 +9340,7 @@ const ProgressTrackerProvider = props => {
     dispatch({
       type: 'update',
       payload: {
-        ...DEFAULT_PROPS$u,
+        ...DEFAULT_PROPS$v,
         ...propState,
         activeTabIndex: propState.activeStepIndex || INIT_STATE.activeTabIndex
       }
@@ -9362,7 +9363,7 @@ const ProgressTrackerProvider = props => {
     children: children
   });
 };
-ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$u;
+ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$v;
 
 const useRovingTabIndex = ({
   parentRef,
@@ -9450,7 +9451,7 @@ const CLASSNAME$v = 'lumx-progress-tracker';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$t = {};
+const DEFAULT_PROPS$u = {};
 
 /**
  * ProgressTracker component.
@@ -9506,7 +9507,7 @@ const ProgressTracker = forwardRef((props, ref) => {
 });
 ProgressTracker.displayName = COMPONENT_NAME$v;
 ProgressTracker.className = CLASSNAME$v;
-ProgressTracker.defaultProps = DEFAULT_PROPS$t;
+ProgressTracker.defaultProps = DEFAULT_PROPS$u;
 
 /**
  * Component display name.
@@ -9521,7 +9522,7 @@ const CLASSNAME$u = 'lumx-progress-tracker-step';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$s = {};
+const DEFAULT_PROPS$t = {};
 
 /**
  * ProgressTrackerStep component.
@@ -9617,7 +9618,7 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
 });
 ProgressTrackerStep.displayName = COMPONENT_NAME$u;
 ProgressTrackerStep.className = CLASSNAME$u;
-ProgressTrackerStep.defaultProps = DEFAULT_PROPS$s;
+ProgressTrackerStep.defaultProps = DEFAULT_PROPS$t;
 
 /**
  * Component display name.
@@ -9632,7 +9633,7 @@ const CLASSNAME$t = `lumx-step-panel`;
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$r = {};
+const DEFAULT_PROPS$s = {};
 
 /**
  * ProgressTrackerStepPanel component.
@@ -9669,7 +9670,7 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
 });
 ProgressTrackerStepPanel.displayName = COMPONENT_NAME$t;
 ProgressTrackerStepPanel.className = CLASSNAME$t;
-ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$r;
+ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$s;
 
 /**
  * Component display name.
@@ -9684,7 +9685,7 @@ const CLASSNAME$s = 'lumx-radio-button';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$q = {};
+const DEFAULT_PROPS$r = {};
 
 /**
  * RadioButton component.
@@ -9773,7 +9774,7 @@ const RadioButton = forwardRef((props, ref) => {
 });
 RadioButton.displayName = COMPONENT_NAME$s;
 RadioButton.className = CLASSNAME$s;
-RadioButton.defaultProps = DEFAULT_PROPS$q;
+RadioButton.defaultProps = DEFAULT_PROPS$r;
 
 /**
  * Component display name.
@@ -9956,7 +9957,7 @@ const COMPONENT_NAME$q = 'Select';
 const CLASSNAME$p = 'lumx-select';
 
 /** The default value of props. */
-const DEFAULT_PROPS$p = {
+const DEFAULT_PROPS$q = {
   selectedValueRender: choice => choice,
   variant: SelectVariant.input
 };
@@ -10077,7 +10078,7 @@ const Select = forwardRef((props, ref) => {
   const isEmpty$1 = isEmpty(props.value);
   const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty$1;
   return WithSelectContext(SelectField, {
-    ...DEFAULT_PROPS$p,
+    ...DEFAULT_PROPS$q,
     ...props,
     className: classNames$1.join(props.className, handleBasicClasses({
       hasInputClear,
@@ -10090,7 +10091,7 @@ const Select = forwardRef((props, ref) => {
 });
 Select.displayName = COMPONENT_NAME$q;
 Select.className = CLASSNAME$p;
-Select.defaultProps = DEFAULT_PROPS$p;
+Select.defaultProps = DEFAULT_PROPS$q;
 Select.className = CLASSNAME$p;
 
 /** The display name of the component. */
@@ -10100,7 +10101,7 @@ const COMPONENT_NAME$p = 'Select';
 const CLASSNAME$o = 'lumx-select';
 
 /** The default value of props. */
-const DEFAULT_PROPS$o = {
+const DEFAULT_PROPS$p = {
   selectedChipRender(choice, index, onClear, isDisabled, theme) {
     const onClick = event => onClear && onClear(event, choice);
     return /*#__PURE__*/jsx(Chip, {
@@ -10224,7 +10225,7 @@ const SelectMultipleField = props => {
  */
 const SelectMultiple = forwardRef((props, ref) => {
   return WithSelectContext(SelectMultipleField, {
-    ...DEFAULT_PROPS$o,
+    ...DEFAULT_PROPS$p,
     ...props,
     className: classNames$1.join(props.className, handleBasicClasses({
       hasMultiple: !props.isEmpty,
@@ -10236,7 +10237,7 @@ const SelectMultiple = forwardRef((props, ref) => {
 });
 SelectMultiple.displayName = COMPONENT_NAME$p;
 SelectMultiple.className = CLASSNAME$o;
-SelectMultiple.defaultProps = DEFAULT_PROPS$o;
+SelectMultiple.defaultProps = DEFAULT_PROPS$p;
 
 /**
  * Component display name.
@@ -10287,7 +10288,7 @@ const CLASSNAME$m = 'lumx-side-navigation-item';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$n = {
+const DEFAULT_PROPS$o = {
   emphasis: Emphasis.high,
   closeMode: 'unmount'
 };
@@ -10303,7 +10304,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
   const {
     children,
     className,
-    emphasis = DEFAULT_PROPS$n.emphasis,
+    emphasis = DEFAULT_PROPS$o.emphasis,
     icon,
     isOpen,
     isSelected,
@@ -10313,7 +10314,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
     onActionClick,
     onClick,
     toggleButtonProps,
-    closeMode = DEFAULT_PROPS$n.closeMode,
+    closeMode = DEFAULT_PROPS$o.closeMode,
     ...forwardedProps
   } = props;
   const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
@@ -10385,9 +10386,9 @@ const SideNavigationItem = forwardRef((props, ref) => {
 });
 SideNavigationItem.displayName = COMPONENT_NAME$n;
 SideNavigationItem.className = CLASSNAME$m;
-SideNavigationItem.defaultProps = DEFAULT_PROPS$n;
+SideNavigationItem.defaultProps = DEFAULT_PROPS$o;
 
-const DEFAULT_PROPS$m = {};
+const DEFAULT_PROPS$n = {};
 
 /**
  * Component display name.
@@ -10427,7 +10428,7 @@ const SkeletonCircle = forwardRef((props, ref) => {
   });
 });
 SkeletonCircle.displayName = COMPONENT_NAME$m;
-SkeletonCircle.defaultProps = DEFAULT_PROPS$m;
+SkeletonCircle.defaultProps = DEFAULT_PROPS$n;
 SkeletonCircle.className = CLASSNAME$l;
 
 const SkeletonRectangleVariant = {
@@ -10440,7 +10441,7 @@ const SkeletonRectangleVariant = {
  * Defines the props of the component.
  */
 
-const DEFAULT_PROPS$l = {
+const DEFAULT_PROPS$m = {
   variant: SkeletonRectangleVariant.squared
 };
 
@@ -10468,7 +10469,7 @@ const SkeletonRectangle = forwardRef((props, ref) => {
     className,
     height,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$l.variant,
+    variant = DEFAULT_PROPS$m.variant,
     width,
     color,
     ...forwardedProps
@@ -10492,9 +10493,9 @@ const SkeletonRectangle = forwardRef((props, ref) => {
 });
 SkeletonRectangle.displayName = COMPONENT_NAME$l;
 SkeletonRectangle.className = CLASSNAME$k;
-SkeletonRectangle.defaultProps = DEFAULT_PROPS$l;
+SkeletonRectangle.defaultProps = DEFAULT_PROPS$m;
 
-const DEFAULT_PROPS$k = {};
+const DEFAULT_PROPS$l = {};
 
 /**
  * Component display name.
@@ -10542,7 +10543,7 @@ const SkeletonTypography = forwardRef((props, ref) => {
   });
 });
 SkeletonTypography.displayName = COMPONENT_NAME$k;
-SkeletonTypography.defaultProps = DEFAULT_PROPS$k;
+SkeletonTypography.defaultProps = DEFAULT_PROPS$l;
 SkeletonTypography.className = CLASSNAME$j;
 
 const useEnhancedEffect = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
@@ -10593,7 +10594,7 @@ const CLASSNAME$i = 'lumx-slider';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$j = {
+const DEFAULT_PROPS$k = {
   precision: 0,
   steps: 0
 };
@@ -10644,8 +10645,8 @@ const Slider = forwardRef((props, ref) => {
     name,
     onChange,
     onMouseDown,
-    precision = DEFAULT_PROPS$j.precision,
-    steps = DEFAULT_PROPS$j.steps,
+    precision = DEFAULT_PROPS$k.precision,
+    steps = DEFAULT_PROPS$k.steps,
     theme = defaultTheme,
     value,
     ...forwardedProps
@@ -10841,7 +10842,7 @@ const Slider = forwardRef((props, ref) => {
 });
 Slider.displayName = COMPONENT_NAME$j;
 Slider.className = CLASSNAME$i;
-Slider.defaultProps = DEFAULT_PROPS$j;
+Slider.defaultProps = DEFAULT_PROPS$k;
 
 /**
  * Making setInterval Declarative with React Hooks.
@@ -11204,7 +11205,10 @@ SlideshowItemGroup.className = CLASSNAME$h;
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$i = DEFAULT_OPTIONS;
+const DEFAULT_PROPS$j = {
+  ...DEFAULT_OPTIONS,
+  mode: 'transform'
+};
 
 /**
  * Slideshow component.
@@ -11217,18 +11221,19 @@ const Slideshow = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme.light;
   const {
     activeIndex,
-    autoPlay = DEFAULT_PROPS$i.autoPlay,
+    autoPlay = DEFAULT_PROPS$j.autoPlay,
     children,
     className,
     fillHeight,
     groupBy = DEFAULT_OPTIONS.groupBy,
-    interval = DEFAULT_PROPS$i.interval,
+    interval = DEFAULT_PROPS$j.interval,
     onChange,
     slideshowControlsProps,
     theme = defaultTheme,
     id,
     slidesId,
     slideGroupLabel,
+    mode = DEFAULT_PROPS$j.mode,
     ...forwardedProps
   } = props;
   // Number of slideshow items.
@@ -11250,7 +11255,7 @@ const Slideshow = forwardRef((props, ref) => {
     toggleForcePause
   } = SlideshowControls.useSlideshowControls({
     activeIndex,
-    defaultActiveIndex: DEFAULT_PROPS$i.activeIndex,
+    defaultActiveIndex: DEFAULT_PROPS$j.activeIndex,
     autoPlay: Boolean(autoPlay),
     itemsCount,
     groupBy,
@@ -11266,6 +11271,8 @@ const Slideshow = forwardRef((props, ref) => {
   });
   const showControls = slideshowControlsProps && slidesCount > 1;
   return /*#__PURE__*/jsx(Slides, {
+    mode: mode,
+    onChange: mode === 'scroll-snap' ? onPaginationClick : undefined,
     activeIndex: currentIndex,
     id: slideshowId,
     className: className,
@@ -11315,7 +11322,7 @@ const Slideshow = forwardRef((props, ref) => {
   });
 });
 Slideshow.displayName = 'Slideshow';
-Slideshow.defaultProps = DEFAULT_PROPS$i;
+Slideshow.defaultProps = DEFAULT_PROPS$j;
 
 /**
  * Component display name.
@@ -11420,7 +11427,7 @@ const CLASSNAME$f = 'lumx-slideshow-controls';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$h = {
+const DEFAULT_PROPS$i = {
   activeIndex: 0
 };
 
@@ -11434,7 +11441,7 @@ const DEFAULT_PROPS$h = {
 const InternalSlideshowControls = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme.light;
   const {
-    activeIndex = DEFAULT_PROPS$h.activeIndex,
+    activeIndex = DEFAULT_PROPS$i.activeIndex,
     className,
     nextButtonProps,
     onNextClick,
@@ -11552,12 +11559,62 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
 });
 InternalSlideshowControls.displayName = COMPONENT_NAME$g;
 InternalSlideshowControls.className = CLASSNAME$f;
-InternalSlideshowControls.defaultProps = DEFAULT_PROPS$h;
+InternalSlideshowControls.defaultProps = DEFAULT_PROPS$i;
 const SlideshowControls = Object.assign(InternalSlideshowControls, {
   useSlideshowControls,
   useSlideshowControlsDefaultOptions: DEFAULT_OPTIONS
 });
 
+/**
+ * Hook to handle scroll synchronization for the Slideshow component.
+ * It syncs the scroll position with the active index and vice-versa.
+ */
+const useSlideScroll = ({
+  enabled,
+  activeIndex,
+  wrapperRef,
+  onChange
+}) => {
+  const isAutoScrollRef = React__default.useRef(false);
+
+  // Sync State -> DOM (Programmatic Navigation)
+  React__default.useEffect(() => {
+    if (!enabled || !wrapperRef.current) return;
+    const wrapper = wrapperRef.current;
+    const targetElement = wrapper.children[activeIndex];
+    if (!targetElement) return;
+    isAutoScrollRef.current = true;
+    wrapper.scrollTo({
+      left: targetElement.offsetLeft,
+      behavior: !isReducedMotion() ? 'smooth' : undefined
+    });
+  }, [activeIndex, enabled, wrapperRef]);
+
+  // Sync DOM -> State (User Interaction)
+  React__default.useEffect(() => {
+    if (!enabled || !wrapperRef.current) return undefined;
+    const wrapper = wrapperRef.current;
+    const handleScroll = debounce$1(() => {
+      const {
+        scrollLeft,
+        clientWidth
+      } = wrapper;
+      const newIndex = Math.round(scrollLeft / clientWidth);
+
+      // Skip onChange when scroll triggered in previous useEffect
+      if (!isAutoScrollRef.current) {
+        onChange?.(newIndex);
+      }
+      isAutoScrollRef.current = false;
+    }, 100);
+    wrapper.addEventListener('scroll', handleScroll);
+    return () => {
+      wrapper.removeEventListener('scroll', handleScroll);
+      handleScroll.cancel();
+    };
+  }, [enabled, onChange, wrapperRef, activeIndex]);
+};
+
 /**
  * Component display name.
  */
@@ -11568,6 +11625,13 @@ const COMPONENT_NAME$f = 'Slideshow';
  */
 const CLASSNAME$e = 'lumx-slideshow';
 
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$h = {
+  mode: 'transform'
+};
+
 /**
  * Slides component.
  *
@@ -11591,16 +11655,24 @@ const Slides = forwardRef((props, ref) => {
     afterSlides,
     hasControls,
     slideGroupLabel,
+    mode = DEFAULT_PROPS$h.mode,
+    onChange,
     ...forwardedProps
   } = props;
   const wrapperRef = React__default.useRef(null);
   const startIndexVisible = activeIndex;
   const endIndexVisible = startIndexVisible + 1;
+  useSlideScroll({
+    activeIndex,
+    enabled: mode === 'scroll-snap',
+    wrapperRef,
+    onChange
+  });
 
   // Inline style of wrapper element.
-  const wrapperStyle = {
+  const wrapperStyle = mode === 'transform' ? {
     transform: `translateX(-${FULL_WIDTH_PERCENT * activeIndex}%)`
-  };
+  } : undefined;
   const groups = React__default.useMemo(() => {
     const childrenArray = Children.toArray(children);
     return groupBy && groupBy > 1 ? chunk(childrenArray, groupBy) : childrenArray;
@@ -11625,7 +11697,7 @@ const Slides = forwardRef((props, ref) => {
       "aria-live": isAutoPlaying ? 'off' : 'polite',
       children: /*#__PURE__*/jsx("div", {
         ref: wrapperRef,
-        className: `${CLASSNAME$e}__wrapper`,
+        className: `${CLASSNAME$e}__wrapper ${CLASSNAME$e}__wrapper--mode-${mode}`,
         style: wrapperStyle,
         children: groups.map((group, index) => /*#__PURE__*/jsx(SlideshowItemGroup, {
           id: slidesId && buildSlideShowGroupId(slidesId, index),