@lumx/react 3.20.1-alpha.44 → 3.20.1-alpha.46

package/index.js

@@ -1,4 +1,4 @@
-import { Kind, Size, ColorPalette, Emphasis, Theme, AspectRatio, VISUALLY_HIDDEN, DIALOG_TRANSITION_DURATION, Orientation, Typography, Alignment, ColorVariant, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
+import { Kind, Size, ColorPalette, Emphasis, Theme, AspectRatio, DIALOG_TRANSITION_DURATION, Orientation, Typography, Alignment, ColorVariant, 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';
@@ -8,8 +8,8 @@ import { mdiAlertCircle } from '@lumx/icons/esm/alert-circle';
 import { mdiCheckCircle } from '@lumx/icons/esm/check-circle';
 import { mdiInformation } from '@lumx/icons/esm/information';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { u as useDisabledStateContext, b as useClassnames, P as Portal, C as ClickAwayProvider } from './_internal/useClassnames.js';
-import { cls, onEnterPressed, onEscapePressed, resolveColorWithVariants, onButtonPressed, detectHorizontalSwipe } from '@lumx/core/js/utils';
+import { u as useDisabledStateContext, b as useClassnames, P as Portal, C as ClickAwayProvider } from './_internal/D-QVluBy.js';
+import { cls, onEnterPressed, onEscapePressed, onButtonPressed, detectHorizontalSwipe } from '@lumx/core/js/utils';
 import last from 'lodash/last';
 import pull from 'lodash/pull';
 import get from 'lodash/get';
@@ -127,17 +127,17 @@ const CONFIG$1 = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1l = 'AlertDialog';
+const COMPONENT_NAME$1k = 'AlertDialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1k = 'lumx-alert-dialog';
+const CLASSNAME$1i = 'lumx-alert-dialog';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$13 = {
+const DEFAULT_PROPS$15 = {
   size: Size.tiny,
   kind: Kind.info
 };
@@ -158,8 +158,8 @@ const AlertDialog = forwardRef((props, ref) => {
     className,
     cancelProps,
     confirmProps,
-    kind = DEFAULT_PROPS$13.kind,
-    size = DEFAULT_PROPS$13.size,
+    kind = DEFAULT_PROPS$15.kind,
+    size = DEFAULT_PROPS$15.size,
     dialogProps,
     children,
     ...forwardedProps
@@ -172,7 +172,7 @@ const AlertDialog = forwardRef((props, ref) => {
   } = CONFIG$1[kind] || {};
   const {
     block
-  } = useClassnames(CLASSNAME$1k);
+  } = useClassnames(CLASSNAME$1i);
 
   // Define a unique ID to target title and description for aria attributes.
   const generatedId = useId();
@@ -248,9 +248,9 @@ const AlertDialog = forwardRef((props, ref) => {
     })]
   });
 });
-AlertDialog.displayName = COMPONENT_NAME$1l;
-AlertDialog.className = CLASSNAME$1k;
-AlertDialog.defaultProps = DEFAULT_PROPS$13;
+AlertDialog.displayName = COMPONENT_NAME$1k;
+AlertDialog.className = CLASSNAME$1i;
+AlertDialog.defaultProps = DEFAULT_PROPS$15;
 
 /**
  * Hook focusing an element when defined and `focus` boolean `true`.
@@ -309,17 +309,17 @@ function useTheme() {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1k = 'Autocomplete';
+const COMPONENT_NAME$1j = 'Autocomplete';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1j = 'lumx-autocomplete';
+const CLASSNAME$1h = 'lumx-autocomplete';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$12 = {
+const DEFAULT_PROPS$14 = {
   anchorToInput: false,
   closeOnClick: false,
   closeOnClickAway: true,
@@ -341,13 +341,13 @@ const Autocomplete = forwardRef((props, ref) => {
     otherProps
   } = useDisableStateProps(props);
   const {
-    anchorToInput = DEFAULT_PROPS$12.anchorToInput,
+    anchorToInput = DEFAULT_PROPS$14.anchorToInput,
     children,
     chips,
     className,
-    closeOnClick = DEFAULT_PROPS$12.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$12.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$12.closeOnEscape,
+    closeOnClick = DEFAULT_PROPS$14.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$14.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$14.closeOnEscape,
     error,
     fitToAnchorWidth,
     hasError,
@@ -368,7 +368,7 @@ const Autocomplete = forwardRef((props, ref) => {
     onInfiniteScroll,
     placeholder,
     placement,
-    shouldFocusOnClose = DEFAULT_PROPS$12.shouldFocusOnClose,
+    shouldFocusOnClose = DEFAULT_PROPS$14.shouldFocusOnClose,
     theme = defaultTheme,
     value,
     textFieldProps = {},
@@ -377,7 +377,7 @@ const Autocomplete = forwardRef((props, ref) => {
   } = otherProps;
   const {
     block
-  } = useClassnames(CLASSNAME$1j);
+  } = useClassnames(CLASSNAME$1h);
   const inputAnchorRef = useRef(null);
   const textFieldRef = useRef(null);
   useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);
@@ -424,24 +424,24 @@ const Autocomplete = forwardRef((props, ref) => {
     })]
   });
 });
-Autocomplete.displayName = COMPONENT_NAME$1k;
-Autocomplete.className = CLASSNAME$1j;
-Autocomplete.defaultProps = DEFAULT_PROPS$12;
+Autocomplete.displayName = COMPONENT_NAME$1j;
+Autocomplete.className = CLASSNAME$1h;
+Autocomplete.defaultProps = DEFAULT_PROPS$14;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1j = 'AutocompleteMultiple';
+const COMPONENT_NAME$1i = 'AutocompleteMultiple';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1i = 'lumx-autocomplete-multiple';
+const CLASSNAME$1g = 'lumx-autocomplete-multiple';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$11 = {
+const DEFAULT_PROPS$13 = {
   closeOnClickAway: true,
   closeOnEscape: true,
   selectedChipRender(choice, index, onClear, isDisabled) {
@@ -481,8 +481,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     chipsAlignment,
     className,
-    closeOnClickAway = DEFAULT_PROPS$11.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$11.closeOnEscape,
+    closeOnClickAway = DEFAULT_PROPS$13.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$13.closeOnEscape,
     fitToAnchorWidth,
     hasError,
     helper,
@@ -504,17 +504,17 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     onKeyDown,
     placeholder,
     placement,
-    selectedChipRender = DEFAULT_PROPS$11.selectedChipRender,
+    selectedChipRender = DEFAULT_PROPS$13.selectedChipRender,
     shouldFocusOnClose,
     theme = defaultTheme,
     type,
     value,
-    values = DEFAULT_PROPS$11.values,
+    values = DEFAULT_PROPS$13.values,
     ...forwardedProps
   } = otherProps;
   const {
     block
-  } = useClassnames(CLASSNAME$1i);
+  } = useClassnames(CLASSNAME$1g);
   return /*#__PURE__*/jsx(Autocomplete, {
     ref: ref,
     ...forwardedProps,
@@ -552,24 +552,24 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     children: children
   });
 });
-AutocompleteMultiple.displayName = COMPONENT_NAME$1j;
-AutocompleteMultiple.className = CLASSNAME$1i;
-AutocompleteMultiple.defaultProps = DEFAULT_PROPS$11;
+AutocompleteMultiple.displayName = COMPONENT_NAME$1i;
+AutocompleteMultiple.className = CLASSNAME$1g;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS$13;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1i = 'Avatar';
+const COMPONENT_NAME$1h = 'Avatar';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1h = 'lumx-avatar';
+const CLASSNAME$1f = 'lumx-avatar';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$10 = {
+const DEFAULT_PROPS$12 = {
   size: Size.m
 };
 
@@ -592,7 +592,7 @@ const Avatar = forwardRef((props, ref) => {
     linkAs,
     onClick,
     onKeyPress,
-    size = DEFAULT_PROPS$10.size,
+    size = DEFAULT_PROPS$12.size,
     theme = defaultTheme,
     thumbnailProps,
     ...forwardedProps
@@ -600,7 +600,7 @@ const Avatar = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$1h);
+  } = useClassnames(CLASSNAME$1f);
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
@@ -629,24 +629,24 @@ const Avatar = forwardRef((props, ref) => {
     })]
   });
 });
-Avatar.displayName = COMPONENT_NAME$1i;
-Avatar.className = CLASSNAME$1h;
-Avatar.defaultProps = DEFAULT_PROPS$10;
+Avatar.displayName = COMPONENT_NAME$1h;
+Avatar.className = CLASSNAME$1f;
+Avatar.defaultProps = DEFAULT_PROPS$12;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1h = 'Badge';
+const COMPONENT_NAME$1g = 'Badge';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1g = 'lumx-badge';
+const CLASSNAME$1e = 'lumx-badge';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$$ = {
+const DEFAULT_PROPS$11 = {
   color: ColorPalette.primary
 };
 
@@ -661,12 +661,12 @@ const Badge = forwardRef((props, ref) => {
   const {
     children,
     className,
-    color = DEFAULT_PROPS$$.color,
+    color = DEFAULT_PROPS$11.color,
     ...forwardedProps
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$1g);
+  } = useClassnames(CLASSNAME$1e);
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
@@ -676,14 +676,14 @@ const Badge = forwardRef((props, ref) => {
     children: children
   });
 });
-Badge.displayName = COMPONENT_NAME$1h;
-Badge.className = CLASSNAME$1g;
-Badge.defaultProps = DEFAULT_PROPS$$;
+Badge.displayName = COMPONENT_NAME$1g;
+Badge.className = CLASSNAME$1e;
+Badge.defaultProps = DEFAULT_PROPS$11;
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1f = 'lumx-badge-wrapper';
+const CLASSNAME$1d = 'lumx-badge-wrapper';
 const BadgeWrapper = forwardRef((props, ref) => {
   const {
     badge,
@@ -694,7 +694,7 @@ const BadgeWrapper = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$1f);
+  } = useClassnames(CLASSNAME$1d);
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
@@ -706,7 +706,7 @@ const BadgeWrapper = forwardRef((props, ref) => {
   });
 });
 BadgeWrapper.displayName = 'BadgeWrapper';
-BadgeWrapper.className = CLASSNAME$1f;
+BadgeWrapper.className = CLASSNAME$1d;
 
 /**
  * Properties of a component to use to determine it's name.
@@ -779,7 +779,7 @@ const RawClickable = forwardRefPolymorphic((props, ref) => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1g = 'ButtonRoot';
+const COMPONENT_NAME$1f = 'ButtonRoot';
 const BUTTON_WRAPPER_CLASSNAME = `lumx-button-wrapper`;
 const BUTTON_CLASSNAME = `lumx-button`;
 const wrapperBlock = cls.bem.block(BUTTON_WRAPPER_CLASSNAME);
@@ -882,7 +882,7 @@ const ButtonRoot = forwardRef((props, ref) => {
     children: children
   });
 });
-ButtonRoot.displayName = COMPONENT_NAME$1g;
+ButtonRoot.displayName = COMPONENT_NAME$1f;
 ButtonRoot.defaultProps = {};
 
 const ButtonEmphasis = Emphasis;
@@ -894,17 +894,17 @@ const ButtonEmphasis = Emphasis;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1f = 'Button';
+const COMPONENT_NAME$1e = 'Button';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1e = 'lumx-button';
+const CLASSNAME$1c = 'lumx-button';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$_ = {
+const DEFAULT_PROPS$10 = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -921,16 +921,16 @@ const Button = forwardRef((props, ref) => {
   const {
     children,
     className,
-    emphasis = DEFAULT_PROPS$_.emphasis,
+    emphasis = DEFAULT_PROPS$10.emphasis,
     leftIcon,
     rightIcon,
-    size = DEFAULT_PROPS$_.size,
+    size = DEFAULT_PROPS$10.size,
     theme = defaultTheme,
     ...forwardedProps
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$1e);
+  } = useClassnames(CLASSNAME$1c);
   const buttonClassName = block({
     'has-left-icon': Boolean(leftIcon),
     'has-right-icon': Boolean(rightIcon)
@@ -964,24 +964,24 @@ const Button = forwardRef((props, ref) => {
     })]
   });
 });
-Button.displayName = COMPONENT_NAME$1f;
-Button.className = CLASSNAME$1e;
-Button.defaultProps = DEFAULT_PROPS$_;
+Button.displayName = COMPONENT_NAME$1e;
+Button.className = CLASSNAME$1c;
+Button.defaultProps = DEFAULT_PROPS$10;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1e = 'IconButton';
+const COMPONENT_NAME$1d = 'IconButton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1d = 'lumx-icon-button';
+const CLASSNAME$1b = 'lumx-icon-button';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Z = {
+const DEFAULT_PROPS$$ = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -996,11 +996,11 @@ const DEFAULT_PROPS$Z = {
 const IconButton = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme.light;
   const {
-    emphasis = DEFAULT_PROPS$Z.emphasis,
+    emphasis = DEFAULT_PROPS$$.emphasis,
     image,
     icon,
     label,
-    size = DEFAULT_PROPS$Z.size,
+    size = DEFAULT_PROPS$$.size,
     theme = defaultTheme,
     tooltipProps,
     hideTooltip,
@@ -1030,24 +1030,24 @@ const IconButton = forwardRef((props, ref) => {
     })
   });
 });
-IconButton.displayName = COMPONENT_NAME$1e;
-IconButton.className = CLASSNAME$1d;
-IconButton.defaultProps = DEFAULT_PROPS$Z;
+IconButton.displayName = COMPONENT_NAME$1d;
+IconButton.className = CLASSNAME$1b;
+IconButton.defaultProps = DEFAULT_PROPS$$;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1d = 'ButtonGroup';
+const COMPONENT_NAME$1c = 'ButtonGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1c = 'lumx-button-group';
+const CLASSNAME$1a = 'lumx-button-group';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Y = {};
+const DEFAULT_PROPS$_ = {};
 
 /**
  * ButtonGroup component.
@@ -1064,7 +1064,7 @@ const ButtonGroup = forwardRef((props, ref) => {
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$1c);
+  } = useClassnames(CLASSNAME$1a);
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
@@ -1072,9 +1072,9 @@ const ButtonGroup = forwardRef((props, ref) => {
     children: children
   });
 });
-ButtonGroup.displayName = COMPONENT_NAME$1d;
-ButtonGroup.className = CLASSNAME$1c;
-ButtonGroup.defaultProps = DEFAULT_PROPS$Y;
+ButtonGroup.displayName = COMPONENT_NAME$1c;
+ButtonGroup.className = CLASSNAME$1a;
+ButtonGroup.defaultProps = DEFAULT_PROPS$_;
 
 const INTERMEDIATE_STATE = 'intermediate';
 
@@ -1085,17 +1085,17 @@ const INTERMEDIATE_STATE = 'intermediate';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1c = 'Checkbox';
+const COMPONENT_NAME$1b = 'Checkbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1b = 'lumx-checkbox';
+const CLASSNAME$19 = 'lumx-checkbox';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$X = {};
+const DEFAULT_PROPS$Z = {};
 
 /**
  * Checkbox component.
@@ -1129,7 +1129,7 @@ const Checkbox = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$1b);
+  } = useClassnames(CLASSNAME$19);
   const localInputRef = React__default.useRef(null);
   const generatedInputId = useId();
   const inputId = id || generatedInputId;
@@ -1196,9 +1196,9 @@ const Checkbox = forwardRef((props, ref) => {
     })]
   });
 });
-Checkbox.displayName = COMPONENT_NAME$1c;
-Checkbox.className = CLASSNAME$1b;
-Checkbox.defaultProps = DEFAULT_PROPS$X;
+Checkbox.displayName = COMPONENT_NAME$1b;
+Checkbox.className = CLASSNAME$19;
+Checkbox.defaultProps = DEFAULT_PROPS$Z;
 
 /**
  * Wrap mouse event handler to stop event propagation.
@@ -1219,17 +1219,17 @@ function useStopPropagation(handler) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1b = 'Chip';
+const COMPONENT_NAME$1a = 'Chip';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1a = 'lumx-chip';
+const CLASSNAME$18 = 'lumx-chip';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$W = {
+const DEFAULT_PROPS$Y = {
   size: Size.m
 };
 
@@ -1259,7 +1259,7 @@ const Chip = forwardRef((props, ref) => {
     onAfterClick,
     onBeforeClick,
     onClick,
-    size = DEFAULT_PROPS$W.size,
+    size = DEFAULT_PROPS$Y.size,
     theme = defaultTheme,
     href,
     onKeyDown,
@@ -1268,7 +1268,7 @@ const Chip = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$1a);
+  } = useClassnames(CLASSNAME$18);
   const hasAfterClick = isFunction(onAfterClick);
   const hasBeforeClick = isFunction(onBeforeClick);
   const hasOnClick = isFunction(props.onClick);
@@ -1333,9 +1333,9 @@ const Chip = forwardRef((props, ref) => {
     })
   );
 });
-Chip.displayName = COMPONENT_NAME$1b;
-Chip.className = CLASSNAME$1a;
-Chip.defaultProps = DEFAULT_PROPS$W;
+Chip.displayName = COMPONENT_NAME$1a;
+Chip.className = CLASSNAME$18;
+Chip.defaultProps = DEFAULT_PROPS$Y;
 
 const INITIAL_STATE_ACTIVE_CHIP = -1;
 
@@ -1391,17 +1391,17 @@ const useChipGroupNavigation = (chips, onChipDeleted, initialActiveChip = INITIA
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$V = {};
+const DEFAULT_PROPS$X = {};
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1a = 'ChipGroup';
+const COMPONENT_NAME$19 = 'ChipGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$19 = 'lumx-chip-group';
+const CLASSNAME$17 = 'lumx-chip-group';
 
 /**
  * ChipGroup component.
@@ -1419,7 +1419,7 @@ const InternalChipGroup = forwardRef((props, ref) => {
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$19);
+  } = useClassnames(CLASSNAME$17);
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
@@ -1427,9 +1427,9 @@ const InternalChipGroup = forwardRef((props, ref) => {
     children: children
   });
 });
-InternalChipGroup.displayName = COMPONENT_NAME$1a;
-InternalChipGroup.className = CLASSNAME$19;
-InternalChipGroup.defaultProps = DEFAULT_PROPS$V;
+InternalChipGroup.displayName = COMPONENT_NAME$19;
+InternalChipGroup.className = CLASSNAME$17;
+InternalChipGroup.defaultProps = DEFAULT_PROPS$X;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
 });
@@ -1449,17 +1449,17 @@ const CommentBlockVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$19 = 'CommentBlock';
+const COMPONENT_NAME$18 = 'CommentBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$18 = 'lumx-comment-block';
+const CLASSNAME$16 = 'lumx-comment-block';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$U = {
+const DEFAULT_PROPS$W = {
   variant: CommentBlockVariant.indented
 };
 
@@ -1489,14 +1489,14 @@ const CommentBlock = forwardRef((props, ref) => {
     onMouseLeave,
     text,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$U.variant,
+    variant = DEFAULT_PROPS$W.variant,
     ...forwardedProps
   } = props;
   const hasChildren = Children.count(children) > 0;
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$18);
+  } = useClassnames(CLASSNAME$16);
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     className: block({
@@ -1560,9 +1560,9 @@ const CommentBlock = forwardRef((props, ref) => {
     })]
   });
 });
-CommentBlock.displayName = COMPONENT_NAME$19;
-CommentBlock.className = CLASSNAME$18;
-CommentBlock.defaultProps = DEFAULT_PROPS$U;
+CommentBlock.displayName = COMPONENT_NAME$18;
+CommentBlock.className = CLASSNAME$16;
+CommentBlock.defaultProps = DEFAULT_PROPS$W;
 
 /**
  * Add a number of months from a date while resetting the day to prevent month length mismatches.
@@ -1582,12 +1582,12 @@ const isDateValid = date => date instanceof Date && !Number.isNaN(date.getTime()
 /**
  * Component display name.
  */
-const COMPONENT_NAME$18 = 'DatePicker';
+const COMPONENT_NAME$17 = 'DatePicker';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$17 = 'lumx-date-picker';
+const CLASSNAME$15 = 'lumx-date-picker';
 
 /** Get first day of week for locale from the browser API */
 const getFromBrowser = locale => {
@@ -1805,25 +1805,10 @@ function formatDayNumber(locale, date) {
   return formattedDate;
 }
 
-/**
- * Optional global `window` instance (not defined when running SSR).
- */
-const WINDOW = typeof window !== 'undefined' ? window : undefined;
-
-/**
- * Optional global `document` instance (not defined when running SSR).
- */
-const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
-
-/**
- * Check if we are running in a true browser
- */
-const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.includes('jsdom');
-
 /**
  * Component display name.
  */
-const COMPONENT_NAME$17 = 'DatePickerControlled';
+const COMPONENT_NAME$16 = 'DatePickerControlled';
 
 /**
  * DatePickerControlled component.
@@ -1858,7 +1843,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$17);
+  } = useClassnames(CLASSNAME$15);
   const selectedYear = selectedMonth.getFullYear();
   const formattedYear = selectedMonth.toLocaleDateString(locale, {
     year: 'numeric'
@@ -1931,7 +1916,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
       label: /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsx("span", {
           "aria-live": labelAriaLive,
-          className: onMonthChange ? VISUALLY_HIDDEN : '',
+          className: onMonthChange ? cls.visuallyHidden() : undefined,
           dir: "auto",
           children: monthYear
         }), onMonthChange && /*#__PURE__*/jsx(FlexBox, {
@@ -1988,7 +1973,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
             const isToday = !isOutOfRange && date && isSameDay(date, new Date());
             const isSelected = date && value && isSameDay(value, date);
             return /*#__PURE__*/jsx("div", {
-              className: element(`days-wrapper`),
+              className: element(`day-wrapper`),
               children: date && /*#__PURE__*/jsxs(Button, {
                 ref: isSelected || !value && isToday ? todayOrSelectedDateRef : null,
                 className: element(`month-day`, {
@@ -2002,7 +1987,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
                   "aria-hidden": true,
                   children: formatDayNumber(locale, date)
                 }), /*#__PURE__*/jsx("span", {
-                  className: VISUALLY_HIDDEN,
+                  className: cls.visuallyHidden(),
                   children: date.toLocaleDateString(locale, {
                     day: 'numeric',
                     month: 'long',
@@ -2017,8 +2002,8 @@ const DatePickerControlled = forwardRef((props, ref) => {
     })]
   });
 });
-DatePickerControlled.displayName = COMPONENT_NAME$17;
-DatePickerControlled.className = CLASSNAME$17;
+DatePickerControlled.displayName = COMPONENT_NAME$16;
+DatePickerControlled.className = CLASSNAME$15;
 
 /**
  * DatePicker component.
@@ -2060,8 +2045,8 @@ const DatePicker = forwardRef((props, ref) => {
     onMonthChange: setSelectedMonth
   });
 });
-DatePicker.displayName = COMPONENT_NAME$18;
-DatePicker.className = CLASSNAME$17;
+DatePicker.displayName = COMPONENT_NAME$17;
+DatePicker.className = CLASSNAME$15;
 
 const useBooleanState = defaultValue => {
   const [booleanValue, setBoolean] = useState(defaultValue);
@@ -2074,7 +2059,7 @@ const useBooleanState = defaultValue => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$16 = 'DatePickerField';
+const COMPONENT_NAME$15 = 'DatePickerField';
 
 /**
  * DatePickerField component.
@@ -2163,7 +2148,22 @@ const DatePickerField = forwardRef((props, ref) => {
     }) : null]
   });
 });
-DatePickerField.displayName = COMPONENT_NAME$16;
+DatePickerField.displayName = COMPONENT_NAME$15;
+
+/**
+ * Optional global `window` instance (not defined when running SSR).
+ */
+const WINDOW = typeof window !== 'undefined' ? window : undefined;
+
+/**
+ * Optional global `document` instance (not defined when running SSR).
+ */
+const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
+
+/**
+ * Check if we are running in a true browser
+ */
+const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.includes('jsdom');
 
 /**
  * Keep track of listeners, only the last registered listener gets activated at any point (previously registered
@@ -2649,17 +2649,17 @@ const isFooter$1 = isComponent('footer');
 /**
  * Component display name.
  */
-const COMPONENT_NAME$15 = 'Dialog';
+const COMPONENT_NAME$14 = 'Dialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$16 = 'lumx-dialog';
+const CLASSNAME$14 = 'lumx-dialog';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$T = {
+const DEFAULT_PROPS$V = {
   size: Size.big,
   disableBodyScroll: true
 };
@@ -2690,11 +2690,11 @@ const Dialog = forwardRef((props, ref) => {
     parentElement,
     contentRef,
     preventAutoClose,
-    size = DEFAULT_PROPS$T.size,
+    size = DEFAULT_PROPS$V.size,
     zIndex,
     dialogProps,
     onVisibilityChange,
-    disableBodyScroll = DEFAULT_PROPS$T.disableBodyScroll,
+    disableBodyScroll = DEFAULT_PROPS$V.disableBodyScroll,
     preventCloseOnClick,
     preventCloseOnEscape,
     ...forwardedProps
@@ -2703,7 +2703,7 @@ const Dialog = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$16);
+  } = useClassnames(CLASSNAME$14);
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const previousOpen = React__default.useRef(isOpen);
@@ -2833,24 +2833,24 @@ const Dialog = forwardRef((props, ref) => {
     })
   }) : null;
 });
-Dialog.displayName = COMPONENT_NAME$15;
-Dialog.className = CLASSNAME$16;
-Dialog.defaultProps = DEFAULT_PROPS$T;
+Dialog.displayName = COMPONENT_NAME$14;
+Dialog.className = CLASSNAME$14;
+Dialog.defaultProps = DEFAULT_PROPS$V;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$14 = 'Divider';
+const COMPONENT_NAME$13 = 'Divider';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$15 = 'lumx-divider';
+const CLASSNAME$13 = 'lumx-divider';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$S = {};
+const DEFAULT_PROPS$U = {};
 
 /**
  * Divider component.
@@ -2868,7 +2868,7 @@ const Divider = forwardRef((props, ref) => {
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$15);
+  } = useClassnames(CLASSNAME$13);
   return /*#__PURE__*/jsx("hr", {
     ref: ref,
     ...forwardedProps,
@@ -2877,19 +2877,19 @@ const Divider = forwardRef((props, ref) => {
     }, className)
   });
 });
-Divider.displayName = COMPONENT_NAME$14;
-Divider.className = CLASSNAME$15;
-Divider.defaultProps = DEFAULT_PROPS$S;
+Divider.displayName = COMPONENT_NAME$13;
+Divider.className = CLASSNAME$13;
+Divider.defaultProps = DEFAULT_PROPS$U;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$13 = 'DragHandle';
+const COMPONENT_NAME$12 = 'DragHandle';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$14 = 'lumx-drag-handle';
+const CLASSNAME$12 = 'lumx-drag-handle';
 
 /**
  * DragHandle component.
@@ -2907,7 +2907,7 @@ const DragHandle = forwardRef((props, ref) => {
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$14);
+  } = useClassnames(CLASSNAME$12);
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
@@ -2921,8 +2921,8 @@ const DragHandle = forwardRef((props, ref) => {
     })
   });
 });
-DragHandle.displayName = COMPONENT_NAME$13;
-DragHandle.className = CLASSNAME$14;
+DragHandle.displayName = COMPONENT_NAME$12;
+DragHandle.className = CLASSNAME$12;
 
 const INITIAL_INDEX = -1;
 
@@ -3091,17 +3091,17 @@ const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNav
 /**
  * Component display name.
  */
-const COMPONENT_NAME$12 = 'List';
+const COMPONENT_NAME$11 = 'List';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$13 = 'lumx-list';
+const CLASSNAME$11 = 'lumx-list';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$R = {
+const DEFAULT_PROPS$T = {
   tabIndex: -1
 };
 
@@ -3120,12 +3120,12 @@ const InternalList = forwardRef((props, ref) => {
     isClickable,
     itemPadding,
     onListItemSelected,
-    tabIndex = DEFAULT_PROPS$R.tabIndex,
+    tabIndex = DEFAULT_PROPS$T.tabIndex,
     ...forwardedProps
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$13);
+  } = useClassnames(CLASSNAME$11);
   const padding = itemPadding ?? (isClickable ? Size.big : undefined);
   return /*#__PURE__*/jsx("ul", {
     ...forwardedProps,
@@ -3137,9 +3137,9 @@ const InternalList = forwardRef((props, ref) => {
     children: children
   });
 });
-InternalList.displayName = COMPONENT_NAME$12;
-InternalList.className = CLASSNAME$13;
-InternalList.defaultProps = DEFAULT_PROPS$R;
+InternalList.displayName = COMPONENT_NAME$11;
+InternalList.className = CLASSNAME$11;
+InternalList.defaultProps = DEFAULT_PROPS$T;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
 });
@@ -5574,17 +5574,17 @@ function usePopoverStyle({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$11 = 'Popover';
+const COMPONENT_NAME$10 = 'Popover';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$12 = 'lumx-popover';
+const CLASSNAME$10 = 'lumx-popover';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Q = {
+const DEFAULT_PROPS$S = {
   elevation: 3,
   placement: Placement.AUTO,
   focusAnchorOnClose: true,
@@ -5597,7 +5597,7 @@ const _InnerPopover = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$12);
+  } = useClassnames(CLASSNAME$10);
   const {
     anchorRef,
     as: Component = 'div',
@@ -5605,24 +5605,24 @@ const _InnerPopover = forwardRef((props, ref) => {
     className,
     closeOnClickAway,
     closeOnEscape,
-    elevation = DEFAULT_PROPS$Q.elevation,
+    elevation = DEFAULT_PROPS$S.elevation,
     focusElement,
     hasArrow,
     isOpen,
     onClose,
     parentElement,
-    usePortal = DEFAULT_PROPS$Q.usePortal,
-    focusAnchorOnClose = DEFAULT_PROPS$Q.focusAnchorOnClose,
+    usePortal = DEFAULT_PROPS$S.usePortal,
+    focusAnchorOnClose = DEFAULT_PROPS$S.focusAnchorOnClose,
     withFocusTrap,
     boundaryRef,
     fitToAnchorWidth,
     fitWithinViewportHeight,
     focusTrapZoneElement,
     offset,
-    placement = DEFAULT_PROPS$Q.placement,
+    placement = DEFAULT_PROPS$S.placement,
     style,
     theme,
-    zIndex = DEFAULT_PROPS$Q.zIndex,
+    zIndex = DEFAULT_PROPS$S.zIndex,
     ...forwardedProps
   } = props;
   const popoverRef = useRef(null);
@@ -5693,7 +5693,7 @@ const _InnerPopover = forwardRef((props, ref) => {
     })
   }) : null;
 });
-_InnerPopover.displayName = COMPONENT_NAME$11;
+_InnerPopover.displayName = COMPONENT_NAME$10;
 
 /**
  * Popover component.
@@ -5705,9 +5705,9 @@ _InnerPopover.displayName = COMPONENT_NAME$11;
 const Popover = skipRender(
 // Skip render in SSR
 () => Boolean(DOCUMENT), _InnerPopover);
-Popover.displayName = COMPONENT_NAME$11;
-Popover.className = CLASSNAME$12;
-Popover.defaultProps = DEFAULT_PROPS$Q;
+Popover.displayName = COMPONENT_NAME$10;
+Popover.className = CLASSNAME$10;
+Popover.defaultProps = DEFAULT_PROPS$S;
 
 // The error margin in px we want to have for triggering infinite scroll
 const SCROLL_TRIGGER_MARGIN = 5;
@@ -5753,17 +5753,17 @@ const useInfiniteScroll = (ref, callback, callbackOnMount = false, scrollTrigger
 /**
  * Component display name.
  */
-const COMPONENT_NAME$10 = 'Dropdown';
+const COMPONENT_NAME$$ = 'Dropdown';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$11 = 'lumx-dropdown';
+const CLASSNAME$$ = 'lumx-dropdown';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$P = {
+const DEFAULT_PROPS$R = {
   closeOnClick: true,
   closeOnClickAway: true,
   closeOnEscape: true,
@@ -5786,18 +5786,18 @@ const Dropdown = forwardRef((props, ref) => {
     anchorRef,
     children,
     className,
-    closeOnClick = DEFAULT_PROPS$P.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$P.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$P.closeOnEscape,
-    fitToAnchorWidth = DEFAULT_PROPS$P.fitToAnchorWidth,
-    fitWithinViewportHeight = DEFAULT_PROPS$P.fitWithinViewportHeight,
+    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,
     isOpen,
     offset,
-    focusAnchorOnClose = DEFAULT_PROPS$P.focusAnchorOnClose,
+    focusAnchorOnClose = DEFAULT_PROPS$R.focusAnchorOnClose,
     onClose,
     onInfiniteScroll,
-    placement = DEFAULT_PROPS$P.placement,
-    shouldFocusOnOpen = DEFAULT_PROPS$P.shouldFocusOnOpen,
+    placement = DEFAULT_PROPS$R.placement,
+    shouldFocusOnOpen = DEFAULT_PROPS$R.shouldFocusOnOpen,
     zIndex,
     ...forwardedProps
   } = props;
@@ -5806,7 +5806,7 @@ const Dropdown = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$11);
+  } = useClassnames(CLASSNAME$$);
   useInfiniteScroll(innerRef, onInfiniteScroll);
   const popperElement = useMemo(() => {
     return !Array.isArray(children) && isComponent(List)(children) ? /*#__PURE__*/cloneElement(children, {
@@ -5845,24 +5845,24 @@ const Dropdown = forwardRef((props, ref) => {
     })
   }) : null;
 });
-Dropdown.displayName = COMPONENT_NAME$10;
-Dropdown.className = CLASSNAME$11;
-Dropdown.defaultProps = DEFAULT_PROPS$P;
+Dropdown.displayName = COMPONENT_NAME$$;
+Dropdown.className = CLASSNAME$$;
+Dropdown.defaultProps = DEFAULT_PROPS$R;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$$ = 'ExpansionPanel';
+const COMPONENT_NAME$_ = 'ExpansionPanel';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$10 = 'lumx-expansion-panel';
+const CLASSNAME$_ = 'lumx-expansion-panel';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$O = {
+const DEFAULT_PROPS$Q = {
   closeMode: 'unmount'
 };
 const isDragHandle = isComponent(DragHandle);
@@ -5880,7 +5880,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme.light;
   const {
     className,
-    closeMode = DEFAULT_PROPS$O.closeMode,
+    closeMode = DEFAULT_PROPS$Q.closeMode,
     children: anyChildren,
     hasBackground,
     hasHeaderDivider,
@@ -5896,7 +5896,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$10);
+  } = useClassnames(CLASSNAME$_);
   const children = Children.toArray(anyChildren);
 
   // Partition children by types.
@@ -6000,13 +6000,13 @@ const ExpansionPanel = forwardRef((props, ref) => {
     })]
   });
 });
-ExpansionPanel.displayName = COMPONENT_NAME$$;
-ExpansionPanel.className = CLASSNAME$10;
-ExpansionPanel.defaultProps = DEFAULT_PROPS$O;
+ExpansionPanel.displayName = COMPONENT_NAME$_;
+ExpansionPanel.className = CLASSNAME$_;
+ExpansionPanel.defaultProps = DEFAULT_PROPS$Q;
 
-const COMPONENT_NAME$_ = 'Flag';
-const CLASSNAME$$ = 'lumx-flag';
-const DEFAULT_PROPS$N = {};
+const COMPONENT_NAME$Z = 'Flag';
+const CLASSNAME$Z = 'lumx-flag';
+const DEFAULT_PROPS$P = {};
 
 /**
  * Flag component.
@@ -6031,7 +6031,7 @@ const Flag = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$$);
+  } = useClassnames(CLASSNAME$Z);
   return /*#__PURE__*/jsxs("div", {
     ...forwardedProps,
     className: block({
@@ -6052,19 +6052,19 @@ const Flag = forwardRef((props, ref) => {
     })]
   });
 });
-Flag.displayName = COMPONENT_NAME$_;
-Flag.className = CLASSNAME$$;
-Flag.defaultProps = DEFAULT_PROPS$N;
+Flag.displayName = COMPONENT_NAME$Z;
+Flag.className = CLASSNAME$Z;
+Flag.defaultProps = DEFAULT_PROPS$P;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Z = 'FlexBox';
+const COMPONENT_NAME$Y = 'FlexBox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$_ = 'lumx-flex-box';
+const CLASSNAME$Y = 'lumx-flex-box';
 
 /**
  * FlexBox component.
@@ -6090,7 +6090,7 @@ const FlexBox = forwardRef((props, ref) => {
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$_);
+  } = useClassnames(CLASSNAME$Y);
   const computedOrientation = orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null);
   const marginAutoModifiers = marginAuto && castArray(marginAuto).reduce((acc, align) => ({
     ...acc,
@@ -6112,23 +6112,23 @@ const FlexBox = forwardRef((props, ref) => {
     children: children
   });
 });
-FlexBox.displayName = COMPONENT_NAME$Z;
-FlexBox.className = CLASSNAME$_;
+FlexBox.displayName = COMPONENT_NAME$Y;
+FlexBox.className = CLASSNAME$Y;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Y = 'GenericBlock';
+const COMPONENT_NAME$X = 'GenericBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Z = 'lumx-generic-block';
+const CLASSNAME$X = 'lumx-generic-block';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$M = {
+const DEFAULT_PROPS$O = {
   gap: Size.big,
   orientation: Orientation.horizontal
 };
@@ -6158,15 +6158,15 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     children,
     actions,
     actionsProps,
-    gap = DEFAULT_PROPS$M.gap,
-    orientation = DEFAULT_PROPS$M.orientation,
+    gap = DEFAULT_PROPS$O.gap,
+    orientation = DEFAULT_PROPS$O.orientation,
     contentProps,
     ...forwardedProps
   } = props;
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$Z);
+  } = useClassnames(CLASSNAME$X);
   const sections = React__default.useMemo(() => {
     // Split children by section type
     const [[figureChild], [contentChild], [actionsChild], ...otherChildren] = partitionMulti(Children.toArray(children), [isFigure, isContent, isActions]);
@@ -6215,9 +6215,9 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     })]
   });
 });
-BaseGenericBlock.displayName = COMPONENT_NAME$Y;
-BaseGenericBlock.className = CLASSNAME$Z;
-BaseGenericBlock.defaultProps = DEFAULT_PROPS$M;
+BaseGenericBlock.displayName = COMPONENT_NAME$X;
+BaseGenericBlock.className = CLASSNAME$X;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS$O;
 const GenericBlock = Object.assign(BaseGenericBlock, {
   Figure,
   Content,
@@ -6256,7 +6256,7 @@ const useOverflowTooltipLabel = content => {
     // Not inside a tooltip
     !parentTooltip && labelElement &&
     // Not inside a visually hidden
-    !labelElement?.closest(`.${VISUALLY_HIDDEN}`) &&
+    !labelElement?.closest(`.${cls.visuallyHidden()}`) &&
     // Text overflows
     labelElement.offsetWidth < labelElement.scrollWidth) {
       // Set tooltip label
@@ -6288,17 +6288,17 @@ function wrapChildrenIconWithSpaces(children) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$X = 'Text';
+const COMPONENT_NAME$W = 'Text';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Y = 'lumx-text';
+const CLASSNAME$W = 'lumx-text';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$L = {};
+const DEFAULT_PROPS$N = {};
 
 /**
  * Text component.
@@ -6323,7 +6323,7 @@ const Text = forwardRef((props, ref) => {
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$Y);
+  } = useClassnames(CLASSNAME$W);
 
   // Truncate mode
   const truncateLinesStyle = typeof truncate === 'object' && truncate.lines > 1 && {
@@ -6361,9 +6361,9 @@ const Text = forwardRef((props, ref) => {
     children: wrapChildrenIconWithSpaces(children)
   });
 });
-Text.displayName = COMPONENT_NAME$X;
-Text.className = CLASSNAME$Y;
-Text.defaultProps = DEFAULT_PROPS$L;
+Text.displayName = COMPONENT_NAME$W;
+Text.className = CLASSNAME$W;
+Text.defaultProps = DEFAULT_PROPS$N;
 
 /** The maximum authorized heading level. */
 const MAX_HEADING_LEVEL = 6;
@@ -6400,17 +6400,17 @@ const useHeadingLevel = () => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$W = 'Heading';
+const COMPONENT_NAME$V = 'Heading';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$X = 'lumx-heading';
+const CLASSNAME$V = 'lumx-heading';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$K = {};
+const DEFAULT_PROPS$M = {};
 
 /**
  * Renders a heading component.
@@ -6429,7 +6429,7 @@ const Heading = forwardRef((props, ref) => {
   } = useHeadingLevel();
   const {
     block
-  } = useClassnames(CLASSNAME$X);
+  } = useClassnames(CLASSNAME$V);
   const computedHeadingElement = as || headingElement;
   return /*#__PURE__*/jsx(Text, {
     ref: ref,
@@ -6440,9 +6440,9 @@ const Heading = forwardRef((props, ref) => {
     children: children
   });
 });
-Heading.displayName = COMPONENT_NAME$W;
-Heading.className = CLASSNAME$X;
-Heading.defaultProps = DEFAULT_PROPS$K;
+Heading.displayName = COMPONENT_NAME$V;
+Heading.className = CLASSNAME$V;
+Heading.defaultProps = DEFAULT_PROPS$M;
 
 /**
  * Provide a new heading level context.
@@ -6470,17 +6470,17 @@ const HeadingLevelProvider = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$V = 'Grid';
+const COMPONENT_NAME$U = 'Grid';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$W = 'lumx-grid';
+const CLASSNAME$U = 'lumx-grid';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$J = {
+const DEFAULT_PROPS$L = {
   orientation: Orientation.horizontal,
   wrap: 'nowrap'
 };
@@ -6498,14 +6498,14 @@ const Grid = forwardRef((props, ref) => {
     className,
     gutter,
     hAlign,
-    orientation = DEFAULT_PROPS$J.orientation,
+    orientation = DEFAULT_PROPS$L.orientation,
     vAlign,
-    wrap = DEFAULT_PROPS$J.wrap,
+    wrap = DEFAULT_PROPS$L.wrap,
     ...forwardedProps
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$W);
+  } = useClassnames(CLASSNAME$U);
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
@@ -6520,19 +6520,19 @@ const Grid = forwardRef((props, ref) => {
     children: children
   });
 });
-Grid.displayName = COMPONENT_NAME$V;
-Grid.className = CLASSNAME$W;
-Grid.defaultProps = DEFAULT_PROPS$J;
+Grid.displayName = COMPONENT_NAME$U;
+Grid.className = CLASSNAME$U;
+Grid.defaultProps = DEFAULT_PROPS$L;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$U = 'GridItem';
+const COMPONENT_NAME$T = 'GridItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$V = 'lumx-grid-item';
+const CLASSNAME$T = 'lumx-grid-item';
 
 /**
  * GridItem component.
@@ -6552,7 +6552,7 @@ const GridItem = forwardRef((props, ref) => {
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$V);
+  } = useClassnames(CLASSNAME$T);
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
@@ -6564,23 +6564,23 @@ const GridItem = forwardRef((props, ref) => {
     children: children
   });
 });
-GridItem.displayName = COMPONENT_NAME$U;
-GridItem.className = CLASSNAME$V;
+GridItem.displayName = COMPONENT_NAME$T;
+GridItem.className = CLASSNAME$T;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$T = 'GridColumn';
+const COMPONENT_NAME$S = 'GridColumn';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$U = 'lumx-grid-column';
+const CLASSNAME$S = 'lumx-grid-column';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$I = {};
+const DEFAULT_PROPS$K = {};
 
 /**
  * The GridColumn is a layout component that can display children in a grid
@@ -6604,7 +6604,7 @@ const GridColumn = forwardRef((props, ref) => {
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$U);
+  } = useClassnames(CLASSNAME$S);
   return /*#__PURE__*/jsx(Component, {
     ...forwardedProps,
     ref: ref,
@@ -6618,24 +6618,31 @@ const GridColumn = forwardRef((props, ref) => {
     children: children
   });
 });
-GridColumn.displayName = COMPONENT_NAME$T;
-GridColumn.className = CLASSNAME$U;
-GridColumn.defaultProps = DEFAULT_PROPS$I;
+GridColumn.displayName = COMPONENT_NAME$S;
+GridColumn.className = CLASSNAME$S;
+GridColumn.defaultProps = DEFAULT_PROPS$K;
+
+/** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
+function resolveColorWithVariants(colorWithVariants, colorVariant) {
+  if (!colorWithVariants) return [undefined, colorVariant];
+  const [color, baseColorVariant] = colorWithVariants.split('-');
+  return [color, colorVariant || baseColorVariant];
+}
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$S = 'Icon';
+const COMPONENT_NAME$R = 'Icon';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$T = 'lumx-icon';
+const CLASSNAME$R = 'lumx-icon';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$H = {};
+const DEFAULT_PROPS$J = {};
 
 /**
  * Icon component.
@@ -6659,7 +6666,7 @@ const Icon = forwardRef((props, ref) => {
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$T);
+  } = useClassnames(CLASSNAME$R);
   const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
 
   // Color
@@ -6716,15 +6723,15 @@ const Icon = forwardRef((props, ref) => {
     })
   });
 });
-Icon.displayName = COMPONENT_NAME$S;
-Icon.className = CLASSNAME$T;
-Icon.defaultProps = DEFAULT_PROPS$H;
+Icon.displayName = COMPONENT_NAME$R;
+Icon.className = CLASSNAME$R;
+Icon.defaultProps = DEFAULT_PROPS$J;
 
 /** Internal component used to render image captions */
 const ImageCaption = props => {
   const defaultTheme = useTheme();
   const {
-    baseClassName,
+    className,
     theme = defaultTheme,
     as = 'figcaption',
     title,
@@ -6732,7 +6739,9 @@ const ImageCaption = props => {
     description,
     descriptionProps,
     tags,
+    tagsProps,
     captionStyle,
+    captionProps,
     align,
     truncate
   } = props;
@@ -6751,12 +6760,9 @@ const ImageCaption = props => {
   } : {
     dangerouslySetInnerHTML: description
   };
-
-  // Create element class name generator if baseClassName is provided
-  const element = baseClassName ? cls.bem.element(baseClassName) : undefined;
   return /*#__PURE__*/jsxs(FlexBox, {
     as: as,
-    className: element?.('wrapper'),
+    className: className,
     style: captionStyle,
     orientation: "vertical",
     vAlign: align,
@@ -6764,25 +6770,23 @@ const ImageCaption = props => {
     gap: "regular",
     children: [(title || description) && /*#__PURE__*/jsxs(Text, {
       as: "p",
-      className: element?.('caption'),
+      ...captionProps,
       truncate: truncate,
       ...baseColor,
       children: [title && /*#__PURE__*/jsx(Text, {
         ...titleProps,
         as: "span",
-        className: element?.('title', undefined, titleProps?.className),
         typography: "subtitle1",
         ...titleColor,
         children: title
       }), ' ', description && /*#__PURE__*/jsx(Text, {
         ...descriptionProps,
         as: "span",
-        className: element?.('description', undefined, descriptionProps?.className),
         typography: "body1",
         ...descriptionContent
       })]
     }), tags && /*#__PURE__*/jsx(FlexBox, {
-      className: element?.('tags'),
+      ...tagsProps,
       orientation: "horizontal",
       vAlign: align,
       children: tags
@@ -6806,17 +6810,17 @@ const ImageBlockCaptionPosition = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$R = 'ImageBlock';
+const COMPONENT_NAME$Q = 'ImageBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$S = 'lumx-image-block';
+const CLASSNAME$Q = 'lumx-image-block';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$G = {
+const DEFAULT_PROPS$I = {
   captionPosition: ImageBlockCaptionPosition.below,
   align: Alignment.left
 };
@@ -6832,9 +6836,9 @@ const ImageBlock = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme.light;
   const {
     actions,
-    align = DEFAULT_PROPS$G.align,
+    align = DEFAULT_PROPS$I.align,
     alt,
-    captionPosition = DEFAULT_PROPS$G.captionPosition,
+    captionPosition = DEFAULT_PROPS$I.captionPosition,
     captionStyle,
     className,
     description,
@@ -6852,7 +6856,7 @@ const ImageBlock = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$S);
+  } = useClassnames(CLASSNAME$Q);
   return /*#__PURE__*/jsxs("figure", {
     ref: ref,
     ...forwardedProps,
@@ -6874,14 +6878,26 @@ const ImageBlock = forwardRef((props, ref) => {
       alt: alt || title
     }), /*#__PURE__*/jsx(ImageCaption, {
       as: "figcaption",
-      baseClassName: CLASSNAME$S,
+      className: element('wrapper'),
       theme: theme,
       title: title,
-      titleProps: titleProps,
+      titleProps: {
+        ...titleProps,
+        className: element('title', [titleProps?.className])
+      },
       description: description,
-      descriptionProps: descriptionProps,
+      descriptionProps: {
+        ...descriptionProps,
+        className: element('description', [descriptionProps?.className])
+      },
       tags: tags,
+      tagsProps: {
+        className: element('tags')
+      },
       captionStyle: captionStyle,
+      captionProps: {
+        className: element('caption')
+      },
       align: align,
       truncate: captionPosition === 'over'
     }), actions && /*#__PURE__*/jsx("div", {
@@ -6890,19 +6906,19 @@ const ImageBlock = forwardRef((props, ref) => {
     })]
   });
 });
-ImageBlock.displayName = COMPONENT_NAME$R;
-ImageBlock.className = CLASSNAME$S;
-ImageBlock.defaultProps = DEFAULT_PROPS$G;
+ImageBlock.displayName = COMPONENT_NAME$Q;
+ImageBlock.className = CLASSNAME$Q;
+ImageBlock.defaultProps = DEFAULT_PROPS$I;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Q = 'ImageLightbox';
+const COMPONENT_NAME$P = 'ImageLightbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$R = 'lumx-image-lightbox';
+const CLASSNAME$P = 'lumx-image-lightbox';
 
 /**
  * Observe element size (only works if it's size depends on the window size).
@@ -7162,7 +7178,7 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
   } = props;
   const {
     element
-  } = useClassnames(CLASSNAME$R);
+  } = useClassnames(CLASSNAME$P);
 
   // Get scroll area size
   const scrollAreaRef = React__default.useRef(null);
@@ -7266,7 +7282,7 @@ const ImageSlideshow = ({
   });
   const {
     element
-  } = useClassnames(CLASSNAME$R);
+  } = useClassnames(CLASSNAME$P);
 
   // Image metadata (caption)
   const title = images[activeIndex]?.title;
@@ -7486,7 +7502,7 @@ function useImageLightbox(props) {
         viewTransitionName: {
           source: currentImageRef,
           target: triggerImageRefs[currentIndex],
-          name: CLASSNAME$R
+          name: CLASSNAME$P
         }
       });
     }
@@ -7538,7 +7554,7 @@ function useImageLightbox(props) {
         viewTransitionName: {
           source: triggerImage,
           target: currentImageRef,
-          name: CLASSNAME$R
+          name: CLASSNAME$P
         }
       });
     }
@@ -7580,7 +7596,7 @@ const Inner = forwardRef((props, ref) => {
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$R);
+  } = useClassnames(CLASSNAME$P);
   const currentPaginationItemRef = React__default.useRef(null);
   const footerRef = React__default.useRef(null);
   const imageRef = React__default.useRef(null);
@@ -7624,8 +7640,8 @@ const Inner = forwardRef((props, ref) => {
     })
   });
 });
-Inner.displayName = COMPONENT_NAME$Q;
-Inner.className = CLASSNAME$R;
+Inner.displayName = COMPONENT_NAME$P;
+Inner.className = CLASSNAME$P;
 
 /**
  * ImageLightbox component.
@@ -7641,17 +7657,17 @@ const ImageLightbox = Object.assign(Inner, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$P = 'InlineList';
+const COMPONENT_NAME$O = 'InlineList';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Q = 'lumx-inline-list';
+const CLASSNAME$O = 'lumx-inline-list';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$F = {};
+const DEFAULT_PROPS$H = {};
 
 /**
  * InlineList component.
@@ -7673,7 +7689,7 @@ const InlineList = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$Q);
+  } = useClassnames(CLASSNAME$O);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-redundant-roles
@@ -7706,9 +7722,9 @@ const InlineList = forwardRef((props, ref) => {
     })
   );
 });
-InlineList.displayName = COMPONENT_NAME$P;
-InlineList.className = CLASSNAME$Q;
-InlineList.defaultProps = DEFAULT_PROPS$F;
+InlineList.displayName = COMPONENT_NAME$O;
+InlineList.className = CLASSNAME$O;
+InlineList.defaultProps = DEFAULT_PROPS$H;
 
 const INPUT_HELPER_CONFIGURATION = {
   error: {
@@ -7725,17 +7741,17 @@ const INPUT_HELPER_CONFIGURATION = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$O = 'InputHelper';
+const COMPONENT_NAME$N = 'InputHelper';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$P = 'lumx-input-helper';
+const CLASSNAME$N = 'lumx-input-helper';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$E = {
+const DEFAULT_PROPS$G = {
   kind: Kind.info
 };
 
@@ -7751,7 +7767,7 @@ const InputHelper = forwardRef((props, ref) => {
   const {
     children,
     className,
-    kind = DEFAULT_PROPS$E.kind,
+    kind = DEFAULT_PROPS$G.kind,
     theme = defaultTheme,
     ...forwardedProps
   } = props;
@@ -7760,7 +7776,7 @@ const InputHelper = forwardRef((props, ref) => {
   } = INPUT_HELPER_CONFIGURATION[kind] || {};
   const {
     block
-  } = useClassnames(CLASSNAME$P);
+  } = useClassnames(CLASSNAME$N);
   return /*#__PURE__*/jsx("p", {
     ref: ref,
     ...forwardedProps,
@@ -7771,24 +7787,24 @@ const InputHelper = forwardRef((props, ref) => {
     children: children
   });
 });
-InputHelper.displayName = COMPONENT_NAME$O;
-InputHelper.className = CLASSNAME$P;
-InputHelper.defaultProps = DEFAULT_PROPS$E;
+InputHelper.displayName = COMPONENT_NAME$N;
+InputHelper.className = CLASSNAME$N;
+InputHelper.defaultProps = DEFAULT_PROPS$G;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$N = 'InputLabel';
+const COMPONENT_NAME$M = 'InputLabel';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$O = 'lumx-input-label';
+const CLASSNAME$M = 'lumx-input-label';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$D = {};
+const DEFAULT_PROPS$F = {};
 
 /**
  * InputLabel component.
@@ -7810,7 +7826,7 @@ const InputLabel = forwardRef((props, ref) => {
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$O);
+  } = useClassnames(CLASSNAME$M);
   return /*#__PURE__*/jsx("label", {
     ref: ref,
     ...forwardedProps,
@@ -7823,19 +7839,19 @@ const InputLabel = forwardRef((props, ref) => {
     children: children
   });
 });
-InputLabel.displayName = COMPONENT_NAME$N;
-InputLabel.className = CLASSNAME$O;
-InputLabel.defaultProps = DEFAULT_PROPS$D;
+InputLabel.displayName = COMPONENT_NAME$M;
+InputLabel.className = CLASSNAME$M;
+InputLabel.defaultProps = DEFAULT_PROPS$F;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$M = 'Lightbox';
+const COMPONENT_NAME$L = 'Lightbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$N = 'lumx-lightbox';
+const CLASSNAME$L = 'lumx-lightbox';
 
 /**
  * Lightbox component.
@@ -7871,7 +7887,7 @@ const Lightbox = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$N);
+  } = useClassnames(CLASSNAME$L);
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const childrenRef = useRef(null);
@@ -7964,18 +7980,18 @@ const Lightbox = forwardRef((props, ref) => {
     })
   });
 });
-Lightbox.displayName = COMPONENT_NAME$M;
-Lightbox.className = CLASSNAME$N;
+Lightbox.displayName = COMPONENT_NAME$L;
+Lightbox.className = CLASSNAME$L;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$L = 'Link';
+const COMPONENT_NAME$K = 'Link';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$M = 'lumx-link';
+const CLASSNAME$K = 'lumx-link';
 
 /**
  * Link component.
@@ -8004,7 +8020,7 @@ const Link = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$M);
+  } = useClassnames(CLASSNAME$K);
   return /*#__PURE__*/jsx(RawClickable, {
     ref: ref,
     as: linkAs || (forwardedProps.href ? 'a' : 'button'),
@@ -8029,23 +8045,23 @@ const Link = forwardRef((props, ref) => {
     }))
   });
 });
-Link.displayName = COMPONENT_NAME$L;
-Link.className = CLASSNAME$M;
+Link.displayName = COMPONENT_NAME$K;
+Link.className = CLASSNAME$K;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$K = 'LinkPreview';
+const COMPONENT_NAME$J = 'LinkPreview';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$L = 'lumx-link-preview';
+const CLASSNAME$J = 'lumx-link-preview';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$C = {
+const DEFAULT_PROPS$E = {
   size: Size.regular,
   titleHeading: 'h2'
 };
@@ -8065,11 +8081,11 @@ const LinkPreview = forwardRef((props, ref) => {
     link,
     linkAs,
     linkProps,
-    size = DEFAULT_PROPS$C.size,
+    size = DEFAULT_PROPS$E.size,
     theme = defaultTheme,
     thumbnailProps,
     title,
-    titleHeading = DEFAULT_PROPS$C.titleHeading,
+    titleHeading = DEFAULT_PROPS$E.titleHeading,
     ...forwardedProps
   } = props;
   // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
@@ -8077,7 +8093,7 @@ const LinkPreview = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$L);
+  } = useClassnames(CLASSNAME$J);
   return /*#__PURE__*/jsx("article", {
     ref: ref,
     ...forwardedProps,
@@ -8138,9 +8154,9 @@ const LinkPreview = forwardRef((props, ref) => {
     })
   });
 });
-LinkPreview.displayName = COMPONENT_NAME$K;
-LinkPreview.className = CLASSNAME$L;
-LinkPreview.defaultProps = DEFAULT_PROPS$C;
+LinkPreview.displayName = COMPONENT_NAME$J;
+LinkPreview.className = CLASSNAME$J;
+LinkPreview.defaultProps = DEFAULT_PROPS$E;
 
 /**
  * Render link with default <a> HTML component or a custom one provided by `linkAs`.
@@ -8159,17 +8175,17 @@ const renderLink = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$J = 'ListItem';
+const COMPONENT_NAME$I = 'ListItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$K = 'lumx-list-item';
+const CLASSNAME$I = 'lumx-list-item';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$B = {
+const DEFAULT_PROPS$D = {
   size: Size.regular
 };
 
@@ -8208,13 +8224,13 @@ const ListItem = forwardRef((props, ref) => {
     linkProps = {},
     linkRef,
     onItemSelected,
-    size = DEFAULT_PROPS$B.size,
+    size = DEFAULT_PROPS$D.size,
     ...forwardedProps
   } = otherProps;
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$K);
+  } = useClassnames(CLASSNAME$I);
   const role = linkAs || linkProps.href ? 'link' : 'button';
   const onKeyDown = useMemo(() => {
     if (onItemSelected && role === 'link') return onEnterPressed(onItemSelected);
@@ -8267,19 +8283,19 @@ const ListItem = forwardRef((props, ref) => {
     })
   });
 });
-ListItem.displayName = COMPONENT_NAME$J;
-ListItem.className = CLASSNAME$K;
-ListItem.defaultProps = DEFAULT_PROPS$B;
+ListItem.displayName = COMPONENT_NAME$I;
+ListItem.className = CLASSNAME$I;
+ListItem.defaultProps = DEFAULT_PROPS$D;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$I = 'ListDivider';
+const COMPONENT_NAME$H = 'ListDivider';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$J = 'lumx-list-divider';
+const CLASSNAME$H = 'lumx-list-divider';
 
 /**
  * ListDivider component.
@@ -8295,25 +8311,25 @@ const ListDivider = forwardRef((props, ref) => {
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$J);
+  } = useClassnames(CLASSNAME$H);
   return /*#__PURE__*/jsx("li", {
     ref: ref,
     ...forwardedProps,
     className: block([className])
   });
 });
-ListDivider.displayName = COMPONENT_NAME$I;
-ListDivider.className = CLASSNAME$J;
+ListDivider.displayName = COMPONENT_NAME$H;
+ListDivider.className = CLASSNAME$H;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$H = 'ListSubheader';
+const COMPONENT_NAME$G = 'ListSubheader';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$I = 'lumx-list-subheader';
+const CLASSNAME$G = 'lumx-list-subheader';
 
 /**
  * ListSubheader component.
@@ -8330,7 +8346,7 @@ const ListSubheader = forwardRef((props, ref) => {
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$I);
+  } = useClassnames(CLASSNAME$G);
   return /*#__PURE__*/jsx("li", {
     ref: ref,
     ...forwardedProps,
@@ -8338,18 +8354,18 @@ const ListSubheader = forwardRef((props, ref) => {
     children: children
   });
 });
-ListSubheader.displayName = COMPONENT_NAME$H;
-ListSubheader.className = CLASSNAME$I;
+ListSubheader.displayName = COMPONENT_NAME$G;
+ListSubheader.className = CLASSNAME$G;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$G = 'Message';
+const COMPONENT_NAME$F = 'Message';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$H = 'lumx-message';
+const CLASSNAME$F = 'lumx-message';
 
 /**
  * Associative map from message kind to color and icon.
@@ -8384,7 +8400,7 @@ const Message = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$H);
+  } = useClassnames(CLASSNAME$F);
   const {
     children,
     className,
@@ -8427,23 +8443,23 @@ const Message = forwardRef((props, ref) => {
     })]
   });
 });
-Message.displayName = COMPONENT_NAME$G;
-Message.className = CLASSNAME$H;
+Message.displayName = COMPONENT_NAME$F;
+Message.className = CLASSNAME$F;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$F = 'Mosaic';
+const COMPONENT_NAME$E = 'Mosaic';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$G = 'lumx-mosaic';
+const CLASSNAME$E = 'lumx-mosaic';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$A = {};
+const DEFAULT_PROPS$C = {};
 
 /**
  * Mosaic component.
@@ -8464,7 +8480,7 @@ const Mosaic = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$G);
+  } = useClassnames(CLASSNAME$E);
   const handleImageClick = useMemo(() => {
     if (!onImageClick) return undefined;
     return (index, onClick) => event => {
@@ -8512,75 +8528,23 @@ const Mosaic = forwardRef((props, ref) => {
     })
   });
 });
-Mosaic.displayName = COMPONENT_NAME$F;
-Mosaic.className = CLASSNAME$G;
-Mosaic.defaultProps = DEFAULT_PROPS$A;
+Mosaic.displayName = COMPONENT_NAME$E;
+Mosaic.className = CLASSNAME$E;
+Mosaic.defaultProps = DEFAULT_PROPS$C;
+
+const NavigationContext = /*#__PURE__*/createContext({
+  orientation: Orientation.vertical
+});
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$E = 'NavigationItem';
+const ITEM_COMPONENT_NAME = 'NavigationItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$F = 'lumx-navigation-item';
-const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
-  const {
-    className,
-    icon,
-    label,
-    isCurrentPage,
-    as: Element = 'a',
-    ...forwardedProps
-  } = props;
-  const theme = useTheme();
-  const {
-    tooltipLabel,
-    labelRef
-  } = useOverflowTooltipLabel(label);
-  const {
-    block,
-    element
-  } = useClassnames(CLASSNAME$F);
-  return /*#__PURE__*/jsx("li", {
-    className: block({
-      [`theme-${theme}`]: Boolean(theme)
-    }, className),
-    children: /*#__PURE__*/jsx(Tooltip, {
-      label: tooltipLabel,
-      placement: Placement.TOP,
-      children: /*#__PURE__*/jsxs(RawClickable, {
-        as: Element,
-        className: element('link', {
-          'is-selected': isCurrentPage
-        }),
-        ref: ref,
-        "aria-current": isCurrentPage ? 'page' : undefined,
-        ...forwardedProps,
-        children: [icon ? /*#__PURE__*/jsx(Icon, {
-          className: element('icon'),
-          icon: icon,
-          size: Size.xs,
-          theme: theme
-        }) : null, /*#__PURE__*/jsx(Text, {
-          as: "span",
-          truncate: true,
-          className: element('label'),
-          ref: labelRef,
-          children: label
-        })]
-      })
-    })
-  });
-}), {
-  displayName: COMPONENT_NAME$E,
-  className: CLASSNAME$F
-});
-
-const NavigationContext = /*#__PURE__*/createContext({
-  orientation: Orientation.vertical
-});
+const ITEM_CLASSNAME = 'lumx-navigation-item';
 
 /**
  * Component display name.
@@ -8590,7 +8554,7 @@ const COMPONENT_NAME$D = 'NavigationSection';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$E = 'lumx-navigation-section';
+const CLASSNAME$D = 'lumx-navigation-section';
 const NavigationSection = forwardRef((props, ref) => {
   const {
     children,
@@ -8607,16 +8571,13 @@ const NavigationSection = forwardRef((props, ref) => {
   } = useContext(NavigationContext) || {};
   const theme = useTheme();
   const isDropdown = orientation === Orientation.horizontal;
-  const {
-    block: itemBlock,
-    element: itemElement
-  } = useClassnames(CLASSNAME$F);
+  const item = useClassnames(ITEM_CLASSNAME);
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$E);
+  } = useClassnames(CLASSNAME$D);
   return /*#__PURE__*/jsxs("li", {
-    className: block([className, itemBlock({
+    className: block([className, item.block({
       [`theme-${theme}`]: Boolean(theme)
     })]),
     ref: ref,
@@ -8625,24 +8586,24 @@ const NavigationSection = forwardRef((props, ref) => {
       ...forwardedProps,
       "aria-controls": sectionId,
       "aria-expanded": isOpen,
-      className: itemElement('link'),
+      className: item.element('link'),
       ref: buttonRef,
       onClick: event => {
         setIsOpen(!isOpen);
         event.stopPropagation();
       },
       children: [icon ? /*#__PURE__*/jsx(Icon, {
-        className: itemElement('icon'),
+        className: item.element('icon'),
         icon: icon,
         size: Size.xs
       }) : null, /*#__PURE__*/jsx(Text, {
         as: "span",
         truncate: true,
-        className: itemElement('label'),
+        className: item.element('label'),
         ref: ref,
         children: label
       }), /*#__PURE__*/jsx(Icon, {
-        className: element('chevron', [itemElement('icon')]),
+        className: element('chevron', [item.element('icon')]),
         icon: isOpen ? mdiChevronUp : mdiChevronDown
       })]
     }), isOpen && (isDropdown ? /*#__PURE__*/jsx(Popover, {
@@ -8678,7 +8639,60 @@ const NavigationSection = forwardRef((props, ref) => {
   });
 });
 NavigationSection.displayName = COMPONENT_NAME$D;
-NavigationSection.className = CLASSNAME$E;
+NavigationSection.className = CLASSNAME$D;
+
+const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
+  const {
+    className,
+    icon,
+    label,
+    isCurrentPage,
+    as: Element = 'a',
+    ...forwardedProps
+  } = props;
+  const theme = useTheme();
+  const {
+    tooltipLabel,
+    labelRef
+  } = useOverflowTooltipLabel(label);
+  const {
+    block,
+    element
+  } = useClassnames(ITEM_CLASSNAME);
+  return /*#__PURE__*/jsx("li", {
+    className: block({
+      [`theme-${theme}`]: Boolean(theme)
+    }, className),
+    children: /*#__PURE__*/jsx(Tooltip, {
+      label: tooltipLabel,
+      placement: Placement.TOP,
+      children: /*#__PURE__*/jsxs(RawClickable, {
+        as: Element,
+        className: element('link', {
+          'is-selected': isCurrentPage
+        }),
+        ref: ref,
+        "aria-current": isCurrentPage ? 'page' : undefined,
+        ...forwardedProps,
+        children: [icon ? /*#__PURE__*/jsx(Icon, {
+          className: element('icon'),
+          icon: icon,
+          size: Size.xs,
+          theme: theme
+        }) : null, /*#__PURE__*/jsx(Text, {
+          as: "span",
+          truncate: true,
+          className: element('label'),
+          ref: labelRef,
+          children: label
+        })]
+      })
+    })
+  });
+}), {
+  displayName: ITEM_COMPONENT_NAME,
+  className: ITEM_CLASSNAME
+});
 
 /**
  * Component display name.
@@ -8688,12 +8702,12 @@ const COMPONENT_NAME$C = 'Navigation';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$D = 'lumx-navigation';
+const CLASSNAME$C = 'lumx-navigation';
 
 /**
  * Component default props
  */
-const DEFAULT_PROPS$z = {
+const DEFAULT_PROPS$B = {
   orientation: Orientation.vertical
 };
 const Navigation = forwardRef((props, ref) => {
@@ -8702,13 +8716,13 @@ const Navigation = forwardRef((props, ref) => {
     children,
     className,
     theme = defaultTheme,
-    orientation = DEFAULT_PROPS$z.orientation,
+    orientation = DEFAULT_PROPS$B.orientation,
     ...forwardedProps
   } = props;
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$D);
+  } = useClassnames(CLASSNAME$C);
   return /*#__PURE__*/jsx(ThemeProvider, {
     value: theme,
     children: /*#__PURE__*/jsx("nav", {
@@ -8731,8 +8745,8 @@ const Navigation = forwardRef((props, ref) => {
   });
 });
 Navigation.displayName = COMPONENT_NAME$C;
-Navigation.className = CLASSNAME$D;
-Navigation.defaultProps = DEFAULT_PROPS$z;
+Navigation.className = CLASSNAME$C;
+Navigation.defaultProps = DEFAULT_PROPS$B;
 
 // Sub components
 Navigation.Section = NavigationSection;
@@ -8768,12 +8782,12 @@ const COMPONENT_NAME$B = 'Notification';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$C = 'lumx-notification';
+const CLASSNAME$B = 'lumx-notification';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$y = {
+const DEFAULT_PROPS$A = {
   zIndex: 9999,
   usePortal: true
 };
@@ -8797,8 +8811,8 @@ const Notification = forwardRef((props, ref) => {
     onClick,
     theme = defaultTheme,
     type,
-    zIndex = DEFAULT_PROPS$y.zIndex,
-    usePortal = DEFAULT_PROPS$y.usePortal,
+    zIndex = DEFAULT_PROPS$A.zIndex,
+    usePortal = DEFAULT_PROPS$A.usePortal,
     style,
     ...forwardedProps
   } = props;
@@ -8816,7 +8830,7 @@ const Notification = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$C);
+  } = useClassnames(CLASSNAME$B);
   const handleCallback = evt => {
     if (isFunction(onActionClick)) {
       onActionClick();
@@ -8866,8 +8880,8 @@ const Notification = forwardRef((props, ref) => {
   });
 });
 Notification.displayName = COMPONENT_NAME$B;
-Notification.className = CLASSNAME$C;
-Notification.defaultProps = DEFAULT_PROPS$y;
+Notification.className = CLASSNAME$B;
+Notification.defaultProps = DEFAULT_PROPS$A;
 
 /**
  * Component display name.
@@ -8877,12 +8891,12 @@ const COMPONENT_NAME$A = 'PopoverDialog';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$B = 'lumx-popover-dialog';
+const CLASSNAME$A = 'lumx-popover-dialog';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$x = {};
+const DEFAULT_PROPS$z = {};
 
 /**
  * PopoverDialog component.
@@ -8903,7 +8917,7 @@ const PopoverDialog = forwardRef((props, ref) => {
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$B);
+  } = useClassnames(CLASSNAME$A);
   return /*#__PURE__*/jsx(Popover, {
     ...forwardedProps,
     ref: ref,
@@ -8927,8 +8941,8 @@ const PopoverDialog = forwardRef((props, ref) => {
   });
 });
 PopoverDialog.displayName = COMPONENT_NAME$A;
-PopoverDialog.className = CLASSNAME$B;
-PopoverDialog.defaultProps = DEFAULT_PROPS$x;
+PopoverDialog.className = CLASSNAME$A;
+PopoverDialog.defaultProps = DEFAULT_PROPS$z;
 
 /**
  * Component display name.
@@ -8938,12 +8952,12 @@ const COMPONENT_NAME$z = 'PostBlock';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$A = 'lumx-post-block';
+const CLASSNAME$z = 'lumx-post-block';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$w = {
+const DEFAULT_PROPS$y = {
   orientation: Orientation.horizontal
 };
 
@@ -8963,7 +8977,7 @@ const PostBlock = forwardRef((props, ref) => {
     className,
     meta,
     onClick,
-    orientation = DEFAULT_PROPS$w.orientation,
+    orientation = DEFAULT_PROPS$y.orientation,
     tags,
     text,
     theme = defaultTheme,
@@ -8974,7 +8988,7 @@ const PostBlock = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$A);
+  } = useClassnames(CLASSNAME$z);
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     className: block({
@@ -9028,8 +9042,8 @@ const PostBlock = forwardRef((props, ref) => {
   });
 });
 PostBlock.displayName = COMPONENT_NAME$z;
-PostBlock.className = CLASSNAME$A;
-PostBlock.defaultProps = DEFAULT_PROPS$w;
+PostBlock.className = CLASSNAME$z;
+PostBlock.defaultProps = DEFAULT_PROPS$y;
 
 /**
  * Component display name.
@@ -9039,12 +9053,12 @@ const COMPONENT_NAME$y = 'ProgressLinear';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$z = 'lumx-progress-linear';
+const CLASSNAME$y = 'lumx-progress-linear';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$v = {};
+const DEFAULT_PROPS$x = {};
 
 /**
  * ProgressLinear component.
@@ -9063,7 +9077,7 @@ const ProgressLinear = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$z);
+  } = useClassnames(CLASSNAME$y);
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
@@ -9078,8 +9092,8 @@ const ProgressLinear = forwardRef((props, ref) => {
   });
 });
 ProgressLinear.displayName = COMPONENT_NAME$y;
-ProgressLinear.className = CLASSNAME$z;
-ProgressLinear.defaultProps = DEFAULT_PROPS$v;
+ProgressLinear.className = CLASSNAME$y;
+ProgressLinear.defaultProps = DEFAULT_PROPS$x;
 
 /**
  * Component display name.
@@ -9089,12 +9103,12 @@ const COMPONENT_NAME$x = 'ProgressCircular';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$y = 'lumx-progress-circular';
+const CLASSNAME$x = 'lumx-progress-circular';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$u = {
+const DEFAULT_PROPS$w = {
   size: Size.m,
   display: 'block'
 };
@@ -9111,15 +9125,15 @@ const ProgressCircular = forwardRef((props, ref) => {
   const {
     className,
     theme = defaultTheme,
-    size = DEFAULT_PROPS$u.size,
-    display = DEFAULT_PROPS$u.display,
+    size = DEFAULT_PROPS$w.size,
+    display = DEFAULT_PROPS$w.display,
     ...forwardedProps
   } = props;
   const Element = display === 'block' ? 'div' : 'span';
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$y);
+  } = useClassnames(CLASSNAME$x);
   return /*#__PURE__*/jsxs(Element, {
     ref: ref,
     ...forwardedProps,
@@ -9147,8 +9161,8 @@ const ProgressCircular = forwardRef((props, ref) => {
   });
 });
 ProgressCircular.displayName = COMPONENT_NAME$x;
-ProgressCircular.className = CLASSNAME$y;
-ProgressCircular.defaultProps = DEFAULT_PROPS$u;
+ProgressCircular.className = CLASSNAME$x;
+ProgressCircular.defaultProps = DEFAULT_PROPS$w;
 
 const ProgressVariant = {
   linear: 'linear',
@@ -9167,12 +9181,12 @@ const COMPONENT_NAME$w = 'Progress';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$x = 'lumx-progress';
+const CLASSNAME$w = 'lumx-progress';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$t = {
+const DEFAULT_PROPS$v = {
   variant: ProgressVariant.circular
 };
 
@@ -9189,12 +9203,12 @@ const Progress = forwardRef((props, ref) => {
   const {
     className,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$t.variant,
+    variant = DEFAULT_PROPS$v.variant,
     ...forwardedProps
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$x);
+  } = useClassnames(CLASSNAME$w);
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
@@ -9210,8 +9224,8 @@ const Progress = forwardRef((props, ref) => {
   });
 });
 Progress.displayName = COMPONENT_NAME$w;
-Progress.className = CLASSNAME$x;
-Progress.defaultProps = DEFAULT_PROPS$t;
+Progress.className = CLASSNAME$w;
+Progress.defaultProps = DEFAULT_PROPS$v;
 
 const INIT_STATE = {
   isLazy: true,
@@ -9338,7 +9352,7 @@ const useTabProviderContextState = () => {
   return context?.[0];
 };
 
-const DEFAULT_PROPS$s = {
+const DEFAULT_PROPS$u = {
   isLazy: INIT_STATE.isLazy,
   shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
 };
@@ -9367,7 +9381,7 @@ const ProgressTrackerProvider = props => {
     dispatch({
       type: 'update',
       payload: {
-        ...DEFAULT_PROPS$s,
+        ...DEFAULT_PROPS$u,
         ...propState,
         activeTabIndex: propState.activeStepIndex || INIT_STATE.activeTabIndex
       }
@@ -9390,7 +9404,7 @@ const ProgressTrackerProvider = props => {
     children: children
   });
 };
-ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$s;
+ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$u;
 
 const useRovingTabIndex = ({
   parentRef,
@@ -9473,12 +9487,12 @@ const COMPONENT_NAME$v = 'ProgressTracker';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$w = 'lumx-progress-tracker';
+const CLASSNAME$v = 'lumx-progress-tracker';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$r = {};
+const DEFAULT_PROPS$t = {};
 
 /**
  * ProgressTracker component.
@@ -9499,7 +9513,7 @@ const ProgressTracker = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$w);
+  } = useClassnames(CLASSNAME$v);
   const stepListRef = React__default.useRef(null);
   useRovingTabIndex({
     parentRef: stepListRef,
@@ -9537,8 +9551,8 @@ const ProgressTracker = forwardRef((props, ref) => {
   });
 });
 ProgressTracker.displayName = COMPONENT_NAME$v;
-ProgressTracker.className = CLASSNAME$w;
-ProgressTracker.defaultProps = DEFAULT_PROPS$r;
+ProgressTracker.className = CLASSNAME$v;
+ProgressTracker.defaultProps = DEFAULT_PROPS$t;
 
 /**
  * Component display name.
@@ -9548,12 +9562,12 @@ const COMPONENT_NAME$u = 'ProgressTrackerStep';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$v = 'lumx-progress-tracker-step';
+const CLASSNAME$u = 'lumx-progress-tracker-step';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$q = {};
+const DEFAULT_PROPS$s = {};
 
 /**
  * ProgressTrackerStep component.
@@ -9587,7 +9601,7 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$v);
+  } = useClassnames(CLASSNAME$u);
   const changeToCurrentTab = useCallback(() => {
     if (isAnyDisabled) {
       return;
@@ -9651,8 +9665,8 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
   });
 });
 ProgressTrackerStep.displayName = COMPONENT_NAME$u;
-ProgressTrackerStep.className = CLASSNAME$v;
-ProgressTrackerStep.defaultProps = DEFAULT_PROPS$q;
+ProgressTrackerStep.className = CLASSNAME$u;
+ProgressTrackerStep.defaultProps = DEFAULT_PROPS$s;
 
 /**
  * Component display name.
@@ -9662,12 +9676,12 @@ const COMPONENT_NAME$t = 'ProgressTrackerStepPanel';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$u = `lumx-step-panel`;
+const CLASSNAME$t = `lumx-step-panel`;
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$p = {};
+const DEFAULT_PROPS$r = {};
 
 /**
  * ProgressTrackerStepPanel component.
@@ -9690,7 +9704,7 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
   const isActive = propIsActive || state?.isActive;
   const {
     block
-  } = useClassnames(CLASSNAME$u);
+  } = useClassnames(CLASSNAME$t);
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
@@ -9705,8 +9719,8 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
   });
 });
 ProgressTrackerStepPanel.displayName = COMPONENT_NAME$t;
-ProgressTrackerStepPanel.className = CLASSNAME$u;
-ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$p;
+ProgressTrackerStepPanel.className = CLASSNAME$t;
+ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$r;
 
 /**
  * Component display name.
@@ -9716,12 +9730,12 @@ const COMPONENT_NAME$s = 'RadioButton';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$t = 'lumx-radio-button';
+const CLASSNAME$s = 'lumx-radio-button';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$o = {};
+const DEFAULT_PROPS$q = {};
 
 /**
  * RadioButton component.
@@ -9755,7 +9769,7 @@ const RadioButton = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$t);
+  } = useClassnames(CLASSNAME$s);
   const generatedInputId = useId();
   const inputId = id || generatedInputId;
   const handleChange = event => {
@@ -9812,8 +9826,8 @@ const RadioButton = forwardRef((props, ref) => {
   });
 });
 RadioButton.displayName = COMPONENT_NAME$s;
-RadioButton.className = CLASSNAME$t;
-RadioButton.defaultProps = DEFAULT_PROPS$o;
+RadioButton.className = CLASSNAME$s;
+RadioButton.defaultProps = DEFAULT_PROPS$q;
 
 /**
  * Component display name.
@@ -9823,7 +9837,7 @@ const COMPONENT_NAME$r = 'RadioGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$s = 'lumx-radio-group';
+const CLASSNAME$r = 'lumx-radio-group';
 
 /**
  * RadioGroup component.
@@ -9840,7 +9854,7 @@ const RadioGroup = forwardRef((props, ref) => {
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$s);
+  } = useClassnames(CLASSNAME$r);
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
@@ -9849,7 +9863,7 @@ const RadioGroup = forwardRef((props, ref) => {
   });
 });
 RadioGroup.displayName = COMPONENT_NAME$r;
-RadioGroup.className = CLASSNAME$s;
+RadioGroup.className = CLASSNAME$r;
 
 /**
  * Listen on element focus to store the focus status.
@@ -9876,13 +9890,13 @@ function useListenFocus(ref) {
 }
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME$r = 'lumx-select';
+const CLASSNAME$q = 'lumx-select';
 const WithSelectContext = (SelectElement, props, ref) => {
   const defaultTheme = useTheme() || Theme.light;
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$r);
+  } = useClassnames(CLASSNAME$q);
   const {
     children,
     className,
@@ -9999,10 +10013,10 @@ const SelectVariant = {
 const COMPONENT_NAME$q = 'Select';
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME$q = 'lumx-select';
+const CLASSNAME$p = 'lumx-select';
 
 /** The default value of props. */
-const DEFAULT_PROPS$n = {
+const DEFAULT_PROPS$p = {
   selectedValueRender: choice => choice,
   variant: SelectVariant.input
 };
@@ -10038,7 +10052,7 @@ const SelectField = props => {
   } = props;
   const {
     element
-  } = useClassnames(CLASSNAME$q);
+  } = useClassnames(CLASSNAME$p);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [variant === SelectVariant.input && /*#__PURE__*/jsxs(Fragment, {
       children: [label && /*#__PURE__*/jsx("div", {
@@ -10065,7 +10079,9 @@ const SelectField = props => {
           icon: icon,
           size: Size.xs
         }), /*#__PURE__*/jsxs("div", {
-          className: element('input-native', [isEmpty && placeholder && element('input-native', 'placeholder')]),
+          className: element('input-native', {
+            placeholder: isEmpty && placeholder
+          }),
           children: [!isEmpty && /*#__PURE__*/jsx("span", {
             children: selectedValueRender?.(value)
           }), isEmpty && placeholder && /*#__PURE__*/jsx("span", {
@@ -10125,9 +10141,11 @@ const SelectField = props => {
 const Select = forwardRef((props, ref) => {
   const isEmpty$1 = isEmpty(props.value);
   const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty$1;
-  const block = cls.bem.block(CLASSNAME$q);
+  const {
+    block
+  } = useClassnames(CLASSNAME$p);
   return WithSelectContext(SelectField, {
-    ...DEFAULT_PROPS$n,
+    ...DEFAULT_PROPS$p,
     ...props,
     className: block({
       'has-input-clear': hasInputClear,
@@ -10138,18 +10156,18 @@ const Select = forwardRef((props, ref) => {
   }, ref);
 });
 Select.displayName = COMPONENT_NAME$q;
-Select.className = CLASSNAME$q;
-Select.defaultProps = DEFAULT_PROPS$n;
-Select.className = CLASSNAME$q;
+Select.className = CLASSNAME$p;
+Select.defaultProps = DEFAULT_PROPS$p;
+Select.className = CLASSNAME$p;
 
 /** The display name of the component. */
 const COMPONENT_NAME$p = 'Select';
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME$p = 'lumx-select';
+const CLASSNAME$o = 'lumx-select';
 
 /** The default value of props. */
-const DEFAULT_PROPS$m = {
+const DEFAULT_PROPS$o = {
   selectedChipRender(choice, index, onClear, isDisabled, theme) {
     const onClick = event => onClear && onClear(event, choice);
     return /*#__PURE__*/jsx(Chip, {
@@ -10172,7 +10190,7 @@ const SelectMultipleField = props => {
   const defaultTheme = useTheme();
   const {
     element
-  } = useClassnames(CLASSNAME$p);
+  } = useClassnames(CLASSNAME$o);
   const {
     anchorRef,
     handleKeyboardNav,
@@ -10279,9 +10297,9 @@ const SelectMultipleField = props => {
 const SelectMultiple = forwardRef((props, ref) => {
   const {
     block
-  } = useClassnames(CLASSNAME$p);
+  } = useClassnames(CLASSNAME$o);
   return WithSelectContext(SelectMultipleField, {
-    ...DEFAULT_PROPS$m,
+    ...DEFAULT_PROPS$o,
     ...props,
     className: block({
       'has-multiple': !props.isEmpty
@@ -10291,8 +10309,8 @@ const SelectMultiple = forwardRef((props, ref) => {
   }, ref);
 });
 SelectMultiple.displayName = COMPONENT_NAME$p;
-SelectMultiple.className = CLASSNAME$p;
-SelectMultiple.defaultProps = DEFAULT_PROPS$m;
+SelectMultiple.className = CLASSNAME$o;
+SelectMultiple.defaultProps = DEFAULT_PROPS$o;
 
 /**
  * Component display name.
@@ -10302,7 +10320,7 @@ const COMPONENT_NAME$o = 'SideNavigation';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$o = 'lumx-side-navigation';
+const CLASSNAME$n = 'lumx-side-navigation';
 
 /**
  * SideNavigation component.
@@ -10321,7 +10339,7 @@ const SideNavigation = forwardRef((props, ref) => {
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$o);
+  } = useClassnames(CLASSNAME$n);
   const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
   return /*#__PURE__*/jsx("ul", {
     ref: ref,
@@ -10331,7 +10349,7 @@ const SideNavigation = forwardRef((props, ref) => {
   });
 });
 SideNavigation.displayName = COMPONENT_NAME$o;
-SideNavigation.className = CLASSNAME$o;
+SideNavigation.className = CLASSNAME$n;
 
 /**
  * Component display name.
@@ -10341,12 +10359,12 @@ const COMPONENT_NAME$n = 'SideNavigationItem';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$n = 'lumx-side-navigation-item';
+const CLASSNAME$m = 'lumx-side-navigation-item';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$l = {
+const DEFAULT_PROPS$n = {
   emphasis: Emphasis.high,
   closeMode: 'unmount'
 };
@@ -10362,7 +10380,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
   const {
     children,
     className,
-    emphasis = DEFAULT_PROPS$l.emphasis,
+    emphasis = DEFAULT_PROPS$n.emphasis,
     icon,
     isOpen,
     isSelected,
@@ -10372,7 +10390,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
     onActionClick,
     onClick,
     toggleButtonProps,
-    closeMode = DEFAULT_PROPS$l.closeMode,
+    closeMode = DEFAULT_PROPS$n.closeMode,
     ...forwardedProps
   } = props;
   const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
@@ -10382,7 +10400,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$n);
+  } = useClassnames(CLASSNAME$m);
   const contentId = useId();
   const ariaProps = {};
   if (hasContent) {
@@ -10446,10 +10464,10 @@ const SideNavigationItem = forwardRef((props, ref) => {
   });
 });
 SideNavigationItem.displayName = COMPONENT_NAME$n;
-SideNavigationItem.className = CLASSNAME$n;
-SideNavigationItem.defaultProps = DEFAULT_PROPS$l;
+SideNavigationItem.className = CLASSNAME$m;
+SideNavigationItem.defaultProps = DEFAULT_PROPS$n;
 
-const DEFAULT_PROPS$k = {};
+const DEFAULT_PROPS$m = {};
 
 /**
  * Component display name.
@@ -10459,7 +10477,7 @@ const COMPONENT_NAME$m = 'SkeletonCircle';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$m = 'lumx-skeleton-circle';
+const CLASSNAME$l = 'lumx-skeleton-circle';
 
 /**
  * SkeletonCircle component.
@@ -10479,7 +10497,7 @@ const SkeletonCircle = forwardRef((props, ref) => {
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$m);
+  } = useClassnames(CLASSNAME$l);
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
@@ -10491,8 +10509,8 @@ const SkeletonCircle = forwardRef((props, ref) => {
   });
 });
 SkeletonCircle.displayName = COMPONENT_NAME$m;
-SkeletonCircle.defaultProps = DEFAULT_PROPS$k;
-SkeletonCircle.className = CLASSNAME$m;
+SkeletonCircle.defaultProps = DEFAULT_PROPS$m;
+SkeletonCircle.className = CLASSNAME$l;
 
 const SkeletonRectangleVariant = {
   squared: 'squared',
@@ -10504,7 +10522,7 @@ const SkeletonRectangleVariant = {
  * Defines the props of the component.
  */
 
-const DEFAULT_PROPS$j = {
+const DEFAULT_PROPS$l = {
   variant: SkeletonRectangleVariant.squared
 };
 
@@ -10516,7 +10534,7 @@ const COMPONENT_NAME$l = 'SkeletonRectangle';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$l = 'lumx-skeleton-rectangle';
+const CLASSNAME$k = 'lumx-skeleton-rectangle';
 
 /**
  * SkeletonRectangle component.
@@ -10532,7 +10550,7 @@ const SkeletonRectangle = forwardRef((props, ref) => {
     className,
     height,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$j.variant,
+    variant = DEFAULT_PROPS$l.variant,
     width,
     color,
     ...forwardedProps
@@ -10540,7 +10558,7 @@ const SkeletonRectangle = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$l);
+  } = useClassnames(CLASSNAME$k);
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
@@ -10558,10 +10576,10 @@ const SkeletonRectangle = forwardRef((props, ref) => {
   });
 });
 SkeletonRectangle.displayName = COMPONENT_NAME$l;
-SkeletonRectangle.className = CLASSNAME$l;
-SkeletonRectangle.defaultProps = DEFAULT_PROPS$j;
+SkeletonRectangle.className = CLASSNAME$k;
+SkeletonRectangle.defaultProps = DEFAULT_PROPS$l;
 
-const DEFAULT_PROPS$i = {};
+const DEFAULT_PROPS$k = {};
 
 /**
  * Component display name.
@@ -10571,7 +10589,7 @@ const COMPONENT_NAME$k = 'SkeletonTypography';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$k = 'lumx-skeleton-typography';
+const CLASSNAME$j = 'lumx-skeleton-typography';
 
 /**
  * SkeletonTypography component.
@@ -10593,7 +10611,7 @@ const SkeletonTypography = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$k);
+  } = useClassnames(CLASSNAME$j);
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
@@ -10612,8 +10630,8 @@ const SkeletonTypography = forwardRef((props, ref) => {
   });
 });
 SkeletonTypography.displayName = COMPONENT_NAME$k;
-SkeletonTypography.defaultProps = DEFAULT_PROPS$i;
-SkeletonTypography.className = CLASSNAME$k;
+SkeletonTypography.defaultProps = DEFAULT_PROPS$k;
+SkeletonTypography.className = CLASSNAME$j;
 
 const useEnhancedEffect = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
 
@@ -10658,12 +10676,12 @@ const COMPONENT_NAME$j = 'Slider';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$j = 'lumx-slider';
+const CLASSNAME$i = 'lumx-slider';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$h = {
+const DEFAULT_PROPS$j = {
   precision: 0,
   steps: 0
 };
@@ -10714,8 +10732,8 @@ const Slider = forwardRef((props, ref) => {
     name,
     onChange,
     onMouseDown,
-    precision = DEFAULT_PROPS$h.precision,
-    steps = DEFAULT_PROPS$h.steps,
+    precision = DEFAULT_PROPS$j.precision,
+    steps = DEFAULT_PROPS$j.steps,
     theme = defaultTheme,
     value,
     ...forwardedProps
@@ -10723,7 +10741,7 @@ const Slider = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$j);
+  } = useClassnames(CLASSNAME$i);
   const generatedId = useId();
   const sliderId = id || generatedId;
   const sliderLabelId = useMemo(() => `label-${sliderId}`, [sliderId]);
@@ -10913,8 +10931,8 @@ const Slider = forwardRef((props, ref) => {
   });
 });
 Slider.displayName = COMPONENT_NAME$j;
-Slider.className = CLASSNAME$j;
-Slider.defaultProps = DEFAULT_PROPS$h;
+Slider.className = CLASSNAME$i;
+Slider.defaultProps = DEFAULT_PROPS$j;
 
 /**
  * Making setInterval Declarative with React Hooks.
@@ -11237,7 +11255,7 @@ const COMPONENT_NAME$i = 'SlideshowItemGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$i = 'lumx-slideshow-item-group';
+const CLASSNAME$h = 'lumx-slideshow-item-group';
 const buildSlideShowGroupId = (slidesId, index) => `${slidesId}-slide-${index}`;
 
 /**
@@ -11258,7 +11276,7 @@ const SlideshowItemGroup = forwardRef((props, ref) => {
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$i);
+  } = useClassnames(CLASSNAME$h);
   const groupRef = React__default.useRef(null);
   useSlideFocusManagement({
     isSlideDisplayed: isDisplayed,
@@ -11275,12 +11293,12 @@ const SlideshowItemGroup = forwardRef((props, ref) => {
   });
 });
 SlideshowItemGroup.displayName = COMPONENT_NAME$i;
-SlideshowItemGroup.className = CLASSNAME$i;
+SlideshowItemGroup.className = CLASSNAME$h;
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$g = DEFAULT_OPTIONS;
+const DEFAULT_PROPS$i = DEFAULT_OPTIONS;
 
 /**
  * Slideshow component.
@@ -11293,12 +11311,12 @@ const Slideshow = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme.light;
   const {
     activeIndex,
-    autoPlay = DEFAULT_PROPS$g.autoPlay,
+    autoPlay = DEFAULT_PROPS$i.autoPlay,
     children,
     className,
     fillHeight,
     groupBy = DEFAULT_OPTIONS.groupBy,
-    interval = DEFAULT_PROPS$g.interval,
+    interval = DEFAULT_PROPS$i.interval,
     onChange,
     slideshowControlsProps,
     theme = defaultTheme,
@@ -11326,7 +11344,7 @@ const Slideshow = forwardRef((props, ref) => {
     toggleForcePause
   } = SlideshowControls.useSlideshowControls({
     activeIndex,
-    defaultActiveIndex: DEFAULT_PROPS$g.activeIndex,
+    defaultActiveIndex: DEFAULT_PROPS$i.activeIndex,
     autoPlay: Boolean(autoPlay),
     itemsCount,
     groupBy,
@@ -11391,7 +11409,7 @@ const Slideshow = forwardRef((props, ref) => {
   });
 });
 Slideshow.displayName = 'Slideshow';
-Slideshow.defaultProps = DEFAULT_PROPS$g;
+Slideshow.defaultProps = DEFAULT_PROPS$i;
 
 /**
  * Component display name.
@@ -11401,7 +11419,7 @@ const COMPONENT_NAME$h = 'SlideshowItem';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$h = 'lumx-slideshow-item';
+const CLASSNAME$g = 'lumx-slideshow-item';
 
 /**
  * SlideshowItem component.
@@ -11418,7 +11436,7 @@ const SlideshowItem = forwardRef((props, ref) => {
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$h);
+  } = useClassnames(CLASSNAME$g);
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     className: block([className]),
@@ -11427,7 +11445,7 @@ const SlideshowItem = forwardRef((props, ref) => {
   });
 });
 SlideshowItem.displayName = COMPONENT_NAME$h;
-SlideshowItem.className = CLASSNAME$h;
+SlideshowItem.className = CLASSNAME$g;
 
 const isTouchDevice = () => 'ontouchstart' in window;
 
@@ -11494,12 +11512,12 @@ const COMPONENT_NAME$g = 'SlideshowControls';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$g = 'lumx-slideshow-controls';
+const CLASSNAME$f = 'lumx-slideshow-controls';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$f = {
+const DEFAULT_PROPS$h = {
   activeIndex: 0
 };
 
@@ -11513,7 +11531,7 @@ const DEFAULT_PROPS$f = {
 const InternalSlideshowControls = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme.light;
   const {
-    activeIndex = DEFAULT_PROPS$f.activeIndex,
+    activeIndex = DEFAULT_PROPS$h.activeIndex,
     className,
     nextButtonProps,
     onNextClick,
@@ -11539,7 +11557,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$g);
+  } = useClassnames(CLASSNAME$f);
   // Listen to touch swipe navigate left & right.
   useSwipeNavigate(parent,
   // Go next without loopback.
@@ -11631,8 +11649,8 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
   });
 });
 InternalSlideshowControls.displayName = COMPONENT_NAME$g;
-InternalSlideshowControls.className = CLASSNAME$g;
-InternalSlideshowControls.defaultProps = DEFAULT_PROPS$f;
+InternalSlideshowControls.className = CLASSNAME$f;
+InternalSlideshowControls.defaultProps = DEFAULT_PROPS$h;
 const SlideshowControls = Object.assign(InternalSlideshowControls, {
   useSlideshowControls,
   useSlideshowControlsDefaultOptions: DEFAULT_OPTIONS
@@ -11646,7 +11664,7 @@ const COMPONENT_NAME$f = 'Slideshow';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$f = 'lumx-slideshow';
+const CLASSNAME$e = 'lumx-slideshow';
 
 /**
  * Slides component.
@@ -11679,7 +11697,7 @@ const Slides = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$f);
+  } = useClassnames(CLASSNAME$e);
 
   // Inline style of wrapper element.
   const wrapperStyle = {
@@ -11721,7 +11739,7 @@ const Slides = forwardRef((props, ref) => {
   });
 });
 Slides.displayName = COMPONENT_NAME$f;
-Slides.className = CLASSNAME$f;
+Slides.className = CLASSNAME$e;
 
 /**
  * Component display name.
@@ -11731,12 +11749,12 @@ const COMPONENT_NAME$e = 'Switch';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$e = 'lumx-switch';
+const CLASSNAME$d = 'lumx-switch';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$e = {
+const DEFAULT_PROPS$g = {
   position: Alignment.left
 };
 
@@ -11763,7 +11781,7 @@ const Switch = forwardRef((props, ref) => {
     isChecked = checked,
     name,
     onChange,
-    position = DEFAULT_PROPS$e.position,
+    position = DEFAULT_PROPS$g.position,
     theme = defaultTheme,
     value,
     inputProps = {},
@@ -11772,7 +11790,7 @@ const Switch = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$e);
+  } = useClassnames(CLASSNAME$d);
   const generatedInputId = useId();
   const inputId = id || generatedInputId;
   const handleChange = event => {
@@ -11831,8 +11849,8 @@ const Switch = forwardRef((props, ref) => {
   });
 });
 Switch.displayName = COMPONENT_NAME$e;
-Switch.className = CLASSNAME$e;
-Switch.defaultProps = DEFAULT_PROPS$e;
+Switch.className = CLASSNAME$d;
+Switch.defaultProps = DEFAULT_PROPS$g;
 
 /**
  * Component display name.
@@ -11842,12 +11860,12 @@ const COMPONENT_NAME$d = 'Table';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$d = 'lumx-table';
+const CLASSNAME$c = 'lumx-table';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$d = {};
+const DEFAULT_PROPS$f = {};
 
 /**
  * Table component.
@@ -11868,7 +11886,7 @@ const Table = forwardRef((props, ref) => {
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$d);
+  } = useClassnames(CLASSNAME$c);
   return /*#__PURE__*/jsx("table", {
     ref: ref,
     ...forwardedProps,
@@ -11881,8 +11899,8 @@ const Table = forwardRef((props, ref) => {
   });
 });
 Table.displayName = COMPONENT_NAME$d;
-Table.className = CLASSNAME$d;
-Table.defaultProps = DEFAULT_PROPS$d;
+Table.className = CLASSNAME$c;
+Table.defaultProps = DEFAULT_PROPS$f;
 
 /**
  * Component display name.
@@ -11892,7 +11910,7 @@ const COMPONENT_NAME$c = 'TableBody';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$c = `${CLASSNAME$d}__body`;
+const CLASSNAME$b = `${CLASSNAME$c}__body`;
 
 /**
  * TableBody component.
@@ -11909,7 +11927,7 @@ const TableBody = forwardRef((props, ref) => {
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$c);
+  } = useClassnames(CLASSNAME$b);
   return /*#__PURE__*/jsx("tbody", {
     ref: ref,
     ...forwardedProps,
@@ -11918,7 +11936,7 @@ const TableBody = forwardRef((props, ref) => {
   });
 });
 TableBody.displayName = COMPONENT_NAME$c;
-TableBody.className = CLASSNAME$c;
+TableBody.className = CLASSNAME$b;
 
 const ThOrder = {
   asc: 'asc',
@@ -11944,12 +11962,12 @@ const COMPONENT_NAME$b = 'TableCell';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$b = `${CLASSNAME$d}__cell`;
+const CLASSNAME$a = `${CLASSNAME$c}__cell`;
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$c = {
+const DEFAULT_PROPS$e = {
   variant: TableCellVariant.body
 };
 
@@ -11968,12 +11986,12 @@ const TableCell = forwardRef((props, ref) => {
     isSortable,
     onHeaderClick,
     sortOrder,
-    variant = DEFAULT_PROPS$c.variant,
+    variant = DEFAULT_PROPS$e.variant,
     ...forwardedProps
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$b);
+  } = useClassnames(CLASSNAME$a);
 
   // Use button if clickable
   const Wrapper = onHeaderClick ? 'button' : 'div';
@@ -12000,22 +12018,22 @@ const TableCell = forwardRef((props, ref) => {
       }, [className]),
       "aria-sort": ariaSort,
       children: /*#__PURE__*/jsxs(Wrapper, {
-        className: `${CLASSNAME$b}-wrapper`,
+        className: `${CLASSNAME$a}-wrapper`,
         ...wrapperProps,
         children: [icon && !isSortable && /*#__PURE__*/jsx(Icon, {
-          className: `${CLASSNAME$b}-icon`,
+          className: `${CLASSNAME$a}-icon`,
           icon: icon,
           size: Size.xxs
         }), isSortable && sortOrder === ThOrder.asc && /*#__PURE__*/jsx(Icon, {
-          className: `${CLASSNAME$b}-icon`,
+          className: `${CLASSNAME$a}-icon`,
           icon: mdiArrowUp,
           size: Size.xxs
         }), isSortable && sortOrder === ThOrder.desc && /*#__PURE__*/jsx(Icon, {
-          className: `${CLASSNAME$b}-icon`,
+          className: `${CLASSNAME$a}-icon`,
           icon: mdiArrowDown,
           size: Size.xxs
         }), /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$b}-content`,
+          className: `${CLASSNAME$a}-content`,
           children: children
         })]
       })
@@ -12025,15 +12043,15 @@ const TableCell = forwardRef((props, ref) => {
         body: true
       }, [className]),
       children: /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$b}-content`,
+        className: `${CLASSNAME$a}-content`,
         children: children
       })
     })]
   });
 });
 TableCell.displayName = COMPONENT_NAME$b;
-TableCell.className = CLASSNAME$b;
-TableCell.defaultProps = DEFAULT_PROPS$c;
+TableCell.className = CLASSNAME$a;
+TableCell.defaultProps = DEFAULT_PROPS$e;
 
 /**
  * Component display name.
@@ -12043,12 +12061,12 @@ const COMPONENT_NAME$a = 'TableHeader';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$a = `${CLASSNAME$d}__header`;
+const CLASSNAME$9 = `${CLASSNAME$c}__header`;
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$b = {};
+const DEFAULT_PROPS$d = {};
 
 /**
  * TableHeader component.
@@ -12065,7 +12083,7 @@ const TableHeader = forwardRef((props, ref) => {
   } = props;
   const {
     block
-  } = useClassnames(CLASSNAME$a);
+  } = useClassnames(CLASSNAME$9);
   return /*#__PURE__*/jsx("thead", {
     ref: ref,
     ...forwardedProps,
@@ -12074,8 +12092,8 @@ const TableHeader = forwardRef((props, ref) => {
   });
 });
 TableHeader.displayName = COMPONENT_NAME$a;
-TableHeader.className = CLASSNAME$a;
-TableHeader.defaultProps = DEFAULT_PROPS$b;
+TableHeader.className = CLASSNAME$9;
+TableHeader.defaultProps = DEFAULT_PROPS$d;
 
 /**
  * Component display name.
@@ -12085,12 +12103,12 @@ const COMPONENT_NAME$9 = 'TableRow';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$9 = `${CLASSNAME$d}__row`;
+const CLASSNAME$8 = `${CLASSNAME$c}__row`;
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$a = {};
+const DEFAULT_PROPS$c = {};
 
 /**
  * TableRow component.
@@ -12114,7 +12132,7 @@ const TableRow = forwardRef((props, ref) => {
   } = otherProps;
   const {
     element
-  } = useClassnames(CLASSNAME$d);
+  } = useClassnames(CLASSNAME$c);
   return /*#__PURE__*/jsx("tr", {
     ref: ref,
     tabIndex: isClickable && !disabledStateProps.disabled ? 0 : -1,
@@ -12129,10 +12147,10 @@ const TableRow = forwardRef((props, ref) => {
   });
 });
 TableRow.displayName = COMPONENT_NAME$9;
-TableRow.className = CLASSNAME$9;
-TableRow.defaultProps = DEFAULT_PROPS$a;
+TableRow.className = CLASSNAME$8;
+TableRow.defaultProps = DEFAULT_PROPS$c;
 
-const DEFAULT_PROPS$9 = {
+const DEFAULT_PROPS$b = {
   isLazy: INIT_STATE.isLazy,
   shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
 };
@@ -12159,7 +12177,7 @@ const TabProvider = props => {
     dispatch({
       type: 'update',
       payload: {
-        ...DEFAULT_PROPS$9,
+        ...DEFAULT_PROPS$b,
         ...propState
       }
     });
@@ -12188,7 +12206,12 @@ const TabProvider = props => {
     children: children
   });
 };
-TabProvider.defaultProps = DEFAULT_PROPS$9;
+TabProvider.defaultProps = DEFAULT_PROPS$b;
+
+/**
+ * Component default class name and class prefix.
+ */
+const TABS_CLASSNAME = `lumx-tabs`;
 
 let TabListLayout = /*#__PURE__*/function (TabListLayout) {
   TabListLayout["clustered"] = "clustered";
@@ -12205,15 +12228,10 @@ let TabListLayout = /*#__PURE__*/function (TabListLayout) {
  */
 const COMPONENT_NAME$8 = 'TabList';
 
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$8 = `lumx-tabs`;
-
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$8 = {
+const DEFAULT_PROPS$a = {
   layout: TabListLayout.fixed,
   position: Alignment.left
 };
@@ -12233,8 +12251,8 @@ const TabList = forwardRef((props, ref) => {
     'aria-label': ariaLabel,
     children,
     className,
-    layout = DEFAULT_PROPS$8.layout,
-    position = DEFAULT_PROPS$8.position,
+    layout = DEFAULT_PROPS$a.layout,
+    position = DEFAULT_PROPS$a.position,
     theme = defaultTheme,
     ...forwardedProps
   } = props;
@@ -12242,7 +12260,7 @@ const TabList = forwardRef((props, ref) => {
   const {
     block,
     element
-  } = useClassnames(CLASSNAME$8);
+  } = useClassnames(TABS_CLASSNAME);
   useRovingTabIndex({
     parentRef: tabListRef,
     elementSelector: '[role="tab"]',
@@ -12266,8 +12284,8 @@ const TabList = forwardRef((props, ref) => {
   });
 });
 TabList.displayName = COMPONENT_NAME$8;
-TabList.className = CLASSNAME$8;
-TabList.defaultProps = DEFAULT_PROPS$8;
+TabList.className = TABS_CLASSNAME;
+TabList.defaultProps = DEFAULT_PROPS$a;
 
 /**
  * Component display name.
@@ -12277,12 +12295,12 @@ const COMPONENT_NAME$7 = 'Tab';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$7 = `lumx-tabs__link`;
+const CLASSNAME$7 = `${TABS_CLASSNAME}__link`;
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$7 = {};
+const DEFAULT_PROPS$9 = {};
 
 /**
  * Tab component.
@@ -12364,7 +12382,7 @@ const Tab = forwardRef((props, ref) => {
 });
 Tab.displayName = COMPONENT_NAME$7;
 Tab.className = CLASSNAME$7;
-Tab.defaultProps = DEFAULT_PROPS$7;
+Tab.defaultProps = DEFAULT_PROPS$9;
 
 /**
  * Component display name.
@@ -12379,7 +12397,7 @@ const CLASSNAME$6 = `lumx-tab-panel`;
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$6 = {};
+const DEFAULT_PROPS$8 = {};
 
 /**
  * TabPanel component.
@@ -12418,7 +12436,7 @@ const TabPanel = forwardRef((props, ref) => {
 });
 TabPanel.displayName = COMPONENT_NAME$6;
 TabPanel.className = CLASSNAME$6;
-TabPanel.defaultProps = DEFAULT_PROPS$6;
+TabPanel.defaultProps = DEFAULT_PROPS$8;
 
 /**
  * Component display name.
@@ -12431,119 +12449,137 @@ const COMPONENT_NAME$5 = 'TextField';
 const CLASSNAME$5 = 'lumx-text-field';
 
 /**
- * Default minimum number of rows in the multiline mode.
+ * Input native element class name.
  */
-const DEFAULT_MIN_ROWS = 2;
+const INPUT_NATIVE_CLASSNAME = `${CLASSNAME$5}__input-native`;
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$5 = {
+const DEFAULT_PROPS$7 = {
   type: 'text'
 };
 
 /**
- * Hook that allows to calculate the number of rows needed for a text area.
- * @param minimumRows Minimum number of rows that we want to display.
- * @return rows to be used and a callback to recalculate
+ * Raw input text component
+ * (input element without any decoration)
  */
-const useComputeNumberOfRows = minimumRows => {
-  const [rows, setRows] = useState(minimumRows);
-  const recompute = target => {
-    /**
-     * HEAD's UP! This part is a little bit tricky. The idea here is to only
-     * display the necessary rows on the textarea. In order to dynamically adjust
-     * the height on that field, we need to:
-     * 1. Set the current amount of rows to the minimum. That will make the scroll appear.
-     * 2. With that, we will have the `scrollHeight`, meaning the height of the container adjusted to the current content
-     * 3. With the scroll height, we can figure out how many rows we need to use by dividing the scroll height
-     * by the line height.
-     * 4. With that number, we can readjust the number of rows on the text area. We need to do that here, if we leave that to
-     * the state change through React, there are some scenarios (resize, hitting ENTER or BACKSPACE which add or remove lines)
-     * when we will not see the update and the rows will be resized to the minimum.
-     * 5. In case there is any other update on the component that changes the UI, we need to keep the number of rows
-     * on the state in order to allow React to re-render. Therefore, we save them using `useState`
-     */
-    // eslint-disable-next-line no-param-reassign
-    target.rows = minimumRows;
-    let currentRows = target.scrollHeight / (target.clientHeight / minimumRows);
-    currentRows = currentRows >= minimumRows ? currentRows : minimumRows;
-    // eslint-disable-next-line no-param-reassign
-    target.rows = currentRows;
-    setRows(currentRows);
-  };
-  return {
-    recomputeNumberOfRows: recompute,
-    rows
-  };
-};
-const renderInputNative = props => {
+const RawInputText = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
   const {
-    id,
-    isRequired,
-    placeholder,
-    multiline,
+    className,
+    theme = defaultTheme,
     value,
-    setFocus,
     onChange,
-    onFocus,
-    onBlur,
-    inputRef,
-    rows,
-    recomputeNumberOfRows,
-    type,
-    name,
-    hasError,
-    describedById,
-    element,
+    type = DEFAULT_PROPS$7.type,
     ...forwardedProps
   } = props;
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const ref = useRef(null);
+  const textareaRef = useRef(null);
+  const {
+    block
+  } = useClassnames(INPUT_NATIVE_CLASSNAME);
+  const handleChange = useCallback(evt => {
+    onChange?.(evt.target.value, evt.target.name, evt);
+  }, [onChange]);
+  return /*#__PURE__*/jsx("input", {
+    ...forwardedProps,
+    type: type,
+    ref: useMergeRefs(ref, textareaRef),
+    className: block({
+      [`theme-${theme}`]: Boolean(theme)
+    }, [className]),
+    onChange: handleChange,
+    value: value
+  });
+});
 
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  useEffect(() => {
-    // Recompute the number of rows for the first rendering
-    if (multiline && ref && ref.current) {
-      recomputeNumberOfRows(ref.current);
+/**
+ * Fit textarea rows to its content
+ */
+function useFitRowsToContent(minimumRows, textareaRef, value) {
+  const [rows, setRows] = useState(minimumRows);
+  React__default.useLayoutEffect(() => {
+    const {
+      current: textarea
+    } = textareaRef;
+    if (!textarea) {
+      return;
     }
-  }, [ref, multiline, recomputeNumberOfRows, value]);
-  const onTextFieldFocus = event => {
-    onFocus?.(event);
-    setFocus(true);
-  };
-  const onTextFieldBlur = event => {
-    onBlur?.(event);
-    setFocus(false);
-  };
-  const handleChange = event => {
-    onChange(get(event, 'target.value'), name, event);
-  };
-  const Component = multiline ? 'textarea' : 'input';
-  const inputProps = {
-    ...forwardedProps,
-    id,
-    className: element('input-native', multiline ? 'textarea' : 'text'),
-    placeholder,
+
+    // Save the current number of rows to restore it later and avoid a flicker.
+    const previousRows = textarea.rows;
+
+    // Set the rows to the minimum to get a baseline for row height.
+    // This is necessary to get a consistent row height calculation.
+    textarea.rows = minimumRows;
+    const rowHeight = textarea.clientHeight / minimumRows;
+
+    // Set rows to 1 to get the smallest possible textarea, which forces
+    // scrollHeight to be the actual content height.
+    textarea.rows = 1;
+    const {
+      scrollHeight
+    } = textarea;
+
+    // Restore the rows to the previous value.
+    textarea.rows = previousRows;
+
+    // Calculate the number of rows required to display the content.
+    // Fallback to `minimumRows` if `rowHeight` is 0.
+    const requiredRows = rowHeight > 0 ? Math.ceil(scrollHeight / rowHeight) : minimumRows;
+
+    // Update the rows state with the new calculated value.
+    setRows(Math.max(requiredRows, minimumRows));
+  }, [value, minimumRows, textareaRef]);
+  return rows;
+}
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$6 = {
+  minimumRows: 2
+};
+
+/**
+ * Raw input text area component
+ * (textarea element without any decoration)
+ */
+const RawInputTextarea = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    className,
+    theme = defaultTheme,
+    minimumRows = DEFAULT_PROPS$6.minimumRows,
     value,
-    name,
-    required: isRequired,
-    onFocus: onTextFieldFocus,
-    onBlur: onTextFieldBlur,
+    onChange,
+    ...forwardedProps
+  } = props;
+  const textareaRef = useRef(null);
+  const rows = useFitRowsToContent(minimumRows, textareaRef, value);
+  const {
+    block
+  } = useClassnames(INPUT_NATIVE_CLASSNAME);
+  const handleChange = useCallback(evt => {
+    onChange?.(evt.target.value, evt.target.name, evt);
+  }, [onChange]);
+  return /*#__PURE__*/jsx("textarea", {
+    className: block({
+      [`theme-${theme}`]: Boolean(theme)
+    }, [className]),
+    ref: useMergeRefs(ref, textareaRef),
+    ...forwardedProps,
     onChange: handleChange,
-    'aria-invalid': hasError ? 'true' : undefined,
-    'aria-describedby': describedById,
-    readOnly: forwardedProps.readOnly || forwardedProps['aria-disabled'],
-    ref: mergeRefs(inputRef, ref)
-  };
-  if (multiline) {
-    inputProps.rows = rows;
-  } else {
-    inputProps.type = type;
-  }
-  return /*#__PURE__*/jsx(Component, {
-    ...inputProps
+    value: value,
+    rows: rows
   });
+});
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$5 = {
+  type: 'text'
 };
 
 /**
@@ -12612,10 +12648,6 @@ const TextField = forwardRef((props, ref) => {
   const describedByIds = [errorId, helperId, forwardedProps['aria-describedby']].filter(Boolean);
   const describedById = describedByIds.length === 0 ? undefined : describedByIds.join(' ');
   const [isFocus, setFocus] = useState(false);
-  const {
-    rows,
-    recomputeNumberOfRows
-  } = useComputeNumberOfRows(multiline ? minimumRows || DEFAULT_MIN_ROWS : 0);
   const valueLength = (value || '').length;
   const isNotEmpty = valueLength > 0;
 
@@ -12640,6 +12672,37 @@ const TextField = forwardRef((props, ref) => {
       inputElement.current.focus();
     }
   };
+  const inputProps = {
+    id: textFieldId,
+    ref: inputRef,
+    ...disabledStateProps,
+    ...forwardedProps,
+    required: isRequired,
+    maxLength,
+    onBlur(evt) {
+      setFocus(false);
+      onBlur?.(evt);
+    },
+    onFocus(evt) {
+      setFocus(true);
+      onFocus?.(evt);
+    },
+    placeholder,
+    value,
+    onChange,
+    name,
+    'aria-invalid': hasError || undefined,
+    'aria-describedby': describedById,
+    readOnly: forwardedProps.readOnly || disabledStateProps['aria-disabled'],
+    theme
+  };
+  const input = multiline ? /*#__PURE__*/jsx(RawInputTextarea, {
+    ...inputProps,
+    minimumRows: minimumRows
+  }) : /*#__PURE__*/jsx(RawInputText, {
+    type: type,
+    ...inputProps
+  });
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     className: block({
@@ -12683,54 +12746,12 @@ const TextField = forwardRef((props, ref) => {
         color: theme === Theme.dark ? 'light' : undefined,
         icon: icon,
         size: Size.xs
-      }), chips && /*#__PURE__*/jsxs("div", {
+      }), chips ? /*#__PURE__*/jsxs("div", {
         className: element('chips'),
-        children: [chips, renderInputNative({
-          id: textFieldId,
-          inputRef,
-          ...disabledStateProps,
-          isRequired,
-          maxLength,
-          multiline,
-          onBlur,
-          onChange,
-          onFocus,
-          placeholder,
-          recomputeNumberOfRows,
-          rows,
-          setFocus,
-          type,
-          value,
-          name,
-          hasError,
-          describedById,
-          element,
-          ...forwardedProps
-        })]
-      }), !chips && /*#__PURE__*/jsx("div", {
-        className: element('input-wrapper'),
-        children: renderInputNative({
-          id: textFieldId,
-          inputRef,
-          ...disabledStateProps,
-          isRequired,
-          maxLength,
-          multiline,
-          onBlur,
-          onChange,
-          onFocus,
-          placeholder,
-          recomputeNumberOfRows,
-          rows,
-          setFocus,
-          type,
-          value,
-          name,
-          hasError,
-          describedById,
-          element,
-          ...forwardedProps
-        })
+        children: [chips, input]
+      }) : /*#__PURE__*/jsx("div", {
+        className: element(`input-wrapper`),
+        children: input
       }), (isValid || hasError) && /*#__PURE__*/jsx(Icon, {
         className: element('input-validity'),
         color: theme === Theme.dark ? 'light' : undefined,
@@ -13457,7 +13478,7 @@ const Tooltip = forwardRef((props, ref) => {
         className: block({
           [`position-${position}`]: Boolean(position),
           'is-initializing': !styles.popper?.transform
-        }, [className, isHidden && VISUALLY_HIDDEN]),
+        }, [className, isHidden && cls.visuallyHidden()]),
         style: {
           ...(isHidden ? undefined : styles.popper),
           zIndex
@@ -13606,7 +13627,7 @@ const Uploader = forwardRef((props, ref) => {
     }), fileInputProps && /*#__PURE__*/jsx("input", {
       type: "file",
       id: inputId,
-      className: `${element('input')} ${VISUALLY_HIDDEN}`,
+      className: element('input', [cls.visuallyHidden()]),
       ...disabledStateProps,
       ...fileInputProps,
       readOnly: isAnyDisabled,
@@ -13756,5 +13777,5 @@ UserBlock.displayName = COMPONENT_NAME;
 UserBlock.className = CLASSNAME;
 UserBlock.defaultProps = DEFAULT_PROPS;
 
-export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonEmphasis, ButtonGroup, CLASSNAME$d as CLASSNAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, 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, Select, SelectMultiple, SelectMultipleField, SelectVariant, 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, ButtonEmphasis, ButtonGroup, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, 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, 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