@lumx/react 4.14.0-next.1 → 4.14.0-next.3

package/index.js

@@ -1,4 +1,4 @@
-import { ColorVariant as ColorVariant$1, Size as Size$1, VISUALLY_HIDDEN, Theme as Theme$1, AspectRatio as AspectRatio$1, DOCUMENT as DOCUMENT$1, IS_BROWSER as IS_BROWSER$1, Emphasis as Emphasis$1, WINDOW, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, NOTIFICATION_TRANSITION_DURATION, Kind as Kind$1, Alignment as Alignment$1, ColorPalette as ColorPalette$1 } from '@lumx/core/js/constants';
+import { ColorVariant as ColorVariant$1, Size as Size$1, VISUALLY_HIDDEN, Theme as Theme$1, AspectRatio as AspectRatio$1, DOCUMENT, IS_BROWSER as IS_BROWSER$1, Emphasis as Emphasis$1, WINDOW, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, NOTIFICATION_TRANSITION_DURATION, Kind as Kind$1, Alignment as Alignment$1, ColorPalette as ColorPalette$1 } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 import * as React from 'react';
@@ -203,11 +203,6 @@ const ColorVariant = {
  */
 const IS_BROWSER = typeof window !== 'undefined' && !window.navigator.userAgent.includes('jsdom');
 
-/**
- * Optional global `document` instance (not defined when running SSR).
- */
-const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
-
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -313,7 +308,7 @@ function modifier$1(baseName, modifiers) {
  * block('button', { active: true, disabled: false }); // 'button button--active'
  */
 
-function block$19(baseName, modifiersOrAdditionalClasses, additionalClasses) {
+function block$1a(baseName, modifiersOrAdditionalClasses, additionalClasses) {
   let modifiers;
   let classes;
   if (typeof modifiersOrAdditionalClasses === 'string' || Array.isArray(modifiersOrAdditionalClasses)) {
@@ -348,7 +343,7 @@ const ACTION_ELEMENT = `${PREFIX}__action`;
 const actionArea = Object.assign(/** Action area container class. Sets `position: relative`. */
 () => PREFIX, {
   /** Action element class. Adds a `::before` pseudo-element with `position: absolute; inset: 0` to expand the click area. */
-  action: modifiers => block$19(ACTION_ELEMENT, modifiers)
+  action: modifiers => block$1a(ACTION_ELEMENT, modifiers)
 });
 
 /** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
@@ -471,7 +466,7 @@ const visuallyHidden = () => VISUALLY_HIDDEN;
  */
 
 function element$R(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
-  return block$19(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
+  return block$1a(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
 }
 
 /**
@@ -479,7 +474,7 @@ function element$R(baseClass, elem, modifiersOrAdditionalClasses, additionalClas
  */
 function bem(baseName) {
   function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
-    return block$19(baseName, modifiersOrAdditionalClasses, additionalClasses);
+    return block$1a(baseName, modifiersOrAdditionalClasses, additionalClasses);
   }
   function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
     return element$R(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
@@ -562,15 +557,15 @@ const CONFIG$1 = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1z = 'AlertDialog';
+const COMPONENT_NAME$1A = 'AlertDialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1x = 'lumx-alert-dialog';
+const CLASSNAME$1y = 'lumx-alert-dialog';
 const {
-  block: block$18
-} = bem(CLASSNAME$1x);
+  block: block$19
+} = bem(CLASSNAME$1y);
 
 /**
  * Component default props.
@@ -638,7 +633,7 @@ const AlertDialog$1 = props => {
       'aria-describedby': descriptionId,
       ...dialogProps
     },
-    className: classnames(className, block$18({
+    className: classnames(className, block$19({
       [`kind-${kind}`]: Boolean(kind)
     })),
     ...forwardedProps,
@@ -736,8 +731,8 @@ const AlertDialog = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-AlertDialog.displayName = COMPONENT_NAME$1z;
-AlertDialog.className = CLASSNAME$1x;
+AlertDialog.displayName = COMPONENT_NAME$1A;
+AlertDialog.className = CLASSNAME$1y;
 AlertDialog.defaultProps = DEFAULT_PROPS$1g;
 
 /**
@@ -830,12 +825,12 @@ function useDisableStateProps(props) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1y = 'Autocomplete';
+const COMPONENT_NAME$1z = 'Autocomplete';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1w = 'lumx-autocomplete';
+const CLASSNAME$1x = 'lumx-autocomplete';
 
 /**
  * Component default props.
@@ -903,7 +898,7 @@ const Autocomplete = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$1w),
+    className: classNames.join(className, CLASSNAME$1x),
     children: [/*#__PURE__*/jsx(TextField, {
       ...textFieldProps,
       chips: chips,
@@ -943,19 +938,19 @@ const Autocomplete = forwardRef((props, ref) => {
     })]
   });
 });
-Autocomplete.displayName = COMPONENT_NAME$1y;
-Autocomplete.className = CLASSNAME$1w;
+Autocomplete.displayName = COMPONENT_NAME$1z;
+Autocomplete.className = CLASSNAME$1x;
 Autocomplete.defaultProps = DEFAULT_PROPS$1f;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1x = 'AutocompleteMultiple';
+const COMPONENT_NAME$1y = 'AutocompleteMultiple';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1v = 'lumx-autocomplete-multiple';
+const CLASSNAME$1w = 'lumx-autocomplete-multiple';
 
 /**
  * Component default props.
@@ -1036,7 +1031,7 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     ref: ref,
     ...forwardedProps,
     anchorToInput: anchorToInput,
-    className: classNames.join(className, CLASSNAME$1v),
+    className: classNames.join(className, CLASSNAME$1w),
     name: name,
     value: value,
     onChange: onChange,
@@ -1069,23 +1064,23 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     children: children
   });
 });
-AutocompleteMultiple.displayName = COMPONENT_NAME$1x;
-AutocompleteMultiple.className = CLASSNAME$1v;
+AutocompleteMultiple.displayName = COMPONENT_NAME$1y;
+AutocompleteMultiple.className = CLASSNAME$1w;
 AutocompleteMultiple.defaultProps = DEFAULT_PROPS$1e;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1w = 'Avatar';
+const COMPONENT_NAME$1x = 'Avatar';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1u = 'lumx-avatar';
+const CLASSNAME$1v = 'lumx-avatar';
 const {
-  block: block$17,
+  block: block$18,
   element: element$Q
-} = bem(CLASSNAME$1u);
+} = bem(CLASSNAME$1v);
 
 /**
  * Component default props.
@@ -1115,7 +1110,7 @@ const Avatar$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$17({
+    className: classnames(className, block$18({
       [`size-${size}`]: Boolean(size),
       [`theme-${theme}`]: Boolean(theme)
     })),
@@ -1176,22 +1171,22 @@ const Avatar = forwardRef((props, ref) => {
     })
   });
 });
-Avatar.displayName = COMPONENT_NAME$1w;
-Avatar.className = CLASSNAME$1u;
+Avatar.displayName = COMPONENT_NAME$1x;
+Avatar.className = CLASSNAME$1v;
 Avatar.defaultProps = DEFAULT_PROPS$1d;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1v = 'Badge';
+const COMPONENT_NAME$1w = 'Badge';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1t = 'lumx-badge';
+const CLASSNAME$1u = 'lumx-badge';
 const {
-  block: block$16
-} = bem(CLASSNAME$1t);
+  block: block$17
+} = bem(CLASSNAME$1u);
 
 /**
  * Component default props.
@@ -1217,14 +1212,14 @@ const Badge$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$16({
+    className: classnames(className, block$17({
       [`color-${color}`]: Boolean(color)
     })),
     children: children
   });
 };
-Badge$1.displayName = COMPONENT_NAME$1v;
-Badge$1.className = CLASSNAME$1t;
+Badge$1.displayName = COMPONENT_NAME$1w;
+Badge$1.className = CLASSNAME$1u;
 Badge$1.defaultProps = DEFAULT_PROPS$1c;
 
 /**
@@ -1248,12 +1243,12 @@ Badge.displayName = Badge$1.displayName;
 Badge.className = Badge$1.className;
 Badge.defaultProps = Badge$1.defaultProps;
 
-const COMPONENT_NAME$1u = 'BadgeWrapper';
-const CLASSNAME$1s = 'lumx-badge-wrapper';
+const COMPONENT_NAME$1v = 'BadgeWrapper';
+const CLASSNAME$1t = 'lumx-badge-wrapper';
 const {
-  block: block$15,
+  block: block$16,
   element: element$P
-} = bem(CLASSNAME$1s);
+} = bem(CLASSNAME$1t);
 const BadgeWrapper$1 = props => {
   const {
     badge,
@@ -1265,7 +1260,7 @@ const BadgeWrapper$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$15()),
+    className: classnames(className, block$16()),
     children: [children, badge && /*#__PURE__*/jsx("div", {
       className: element$P('badge'),
       children: badge
@@ -1279,8 +1274,8 @@ const BadgeWrapper = forwardRef((props, ref) => {
     ref
   });
 });
-BadgeWrapper.displayName = COMPONENT_NAME$1u;
-BadgeWrapper.className = CLASSNAME$1s;
+BadgeWrapper.displayName = COMPONENT_NAME$1v;
+BadgeWrapper.className = CLASSNAME$1t;
 
 /**
  * Render clickable element (link, button or custom element)
@@ -1330,7 +1325,7 @@ const RawClickable = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1t = 'ButtonRoot';
+const COMPONENT_NAME$1u = 'ButtonRoot';
 const BUTTON_WRAPPER_CLASSNAME = `lumx-button-wrapper`;
 const {
   block: buttonWrapperBlock
@@ -1428,7 +1423,7 @@ const ButtonRoot = props => {
     children
   });
 };
-ButtonRoot.displayName = COMPONENT_NAME$1t;
+ButtonRoot.displayName = COMPONENT_NAME$1u;
 ButtonRoot.defaultProps = {};
 
 /**
@@ -1438,15 +1433,15 @@ ButtonRoot.defaultProps = {};
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1s = 'Button';
+const COMPONENT_NAME$1t = 'Button';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1r = 'lumx-button';
+const CLASSNAME$1s = 'lumx-button';
 const {
   modifier
-} = bem(CLASSNAME$1r);
+} = bem(CLASSNAME$1s);
 
 /**
  * Component default props.
@@ -1483,8 +1478,8 @@ const Button$1 = props => {
     variant: 'button'
   });
 };
-Button$1.displayName = COMPONENT_NAME$1s;
-Button$1.className = CLASSNAME$1r;
+Button$1.displayName = COMPONENT_NAME$1t;
+Button$1.className = CLASSNAME$1s;
 Button$1.defaultProps = DEFAULT_PROPS$1b;
 
 /**
@@ -1558,21 +1553,21 @@ const Button = forwardRef((props, ref) => {
     })
   });
 });
-Button.displayName = COMPONENT_NAME$1s;
-Button.className = CLASSNAME$1r;
+Button.displayName = COMPONENT_NAME$1t;
+Button.className = CLASSNAME$1s;
 Button.defaultProps = DEFAULT_PROPS$1b;
 
-const COMPONENT_NAME$1r = 'Icon';
+const COMPONENT_NAME$1s = 'Icon';
 const IconClassName = 'lumx-icon';
 
 /**
  * Defines the props of the component.
  */
 
-const CLASSNAME$1q = IconClassName;
+const CLASSNAME$1r = IconClassName;
 const {
-  block: block$14
-} = bem(CLASSNAME$1q);
+  block: block$15
+} = bem(CLASSNAME$1r);
 
 /**
  * Component default props.
@@ -1626,7 +1621,7 @@ const Icon$1 = props => {
   return /*#__PURE__*/jsx("i", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$14({
+    className: classnames(className, block$15({
       [`color-${iconColor}`]: Boolean(iconColor),
       [`color-variant-${iconColorVariant}`]: Boolean(iconColorVariant),
       'has-shape': hasShape,
@@ -1655,19 +1650,19 @@ const Icon$1 = props => {
     })
   });
 };
-Icon$1.displayName = COMPONENT_NAME$1r;
-Icon$1.className = CLASSNAME$1q;
+Icon$1.displayName = COMPONENT_NAME$1s;
+Icon$1.className = CLASSNAME$1r;
 Icon$1.defaultProps = DEFAULT_PROPS$1a;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1q = 'IconButton';
+const COMPONENT_NAME$1r = 'IconButton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1p = 'lumx-icon-button';
+const CLASSNAME$1q = 'lumx-icon-button';
 
 /**
  * Component default props.
@@ -1708,8 +1703,8 @@ const IconButton$1 = props => {
     children: defaultChildren
   });
 };
-IconButton$1.displayName = COMPONENT_NAME$1q;
-IconButton$1.className = CLASSNAME$1p;
+IconButton$1.displayName = COMPONENT_NAME$1r;
+IconButton$1.className = CLASSNAME$1q;
 IconButton$1.defaultProps = DEFAULT_PROPS$19;
 
 /**
@@ -1753,19 +1748,19 @@ const IconButton = forwardRef((props, ref) => {
     })
   });
 });
-IconButton.displayName = COMPONENT_NAME$1q;
-IconButton.className = CLASSNAME$1p;
+IconButton.displayName = COMPONENT_NAME$1r;
+IconButton.className = CLASSNAME$1q;
 IconButton.defaultProps = DEFAULT_PROPS$19;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1p = 'ButtonGroup';
+const COMPONENT_NAME$1q = 'ButtonGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1o = 'lumx-button-group';
+const CLASSNAME$1p = 'lumx-button-group';
 
 /**
  * Component default props.
@@ -1786,12 +1781,12 @@ const ButtonGroup$1 = props => {
   } = props;
   return /*#__PURE__*/jsx("div", {
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1o),
+    className: classnames(className, CLASSNAME$1p),
     children: children
   });
 };
-ButtonGroup$1.displayName = COMPONENT_NAME$1p;
-ButtonGroup$1.className = CLASSNAME$1o;
+ButtonGroup$1.displayName = COMPONENT_NAME$1q;
+ButtonGroup$1.className = CLASSNAME$1p;
 ButtonGroup$1.defaultProps = DEFAULT_PROPS$18;
 
 /**
@@ -1807,16 +1802,16 @@ const ButtonGroup = forwardRef((props, ref) => {
     ...props
   });
 });
-ButtonGroup.displayName = COMPONENT_NAME$1p;
-ButtonGroup.className = CLASSNAME$1o;
+ButtonGroup.displayName = COMPONENT_NAME$1q;
+ButtonGroup.className = CLASSNAME$1p;
 ButtonGroup.defaultProps = DEFAULT_PROPS$18;
 
-const COMPONENT_NAME$1o = 'InputLabel';
+const COMPONENT_NAME$1p = 'InputLabel';
 const InputLabelClassName = 'lumx-input-label';
-const CLASSNAME$1n = InputLabelClassName;
+const CLASSNAME$1o = InputLabelClassName;
 const {
-  block: block$13
-} = bem(CLASSNAME$1n);
+  block: block$14
+} = bem(CLASSNAME$1o);
 const DEFAULT_PROPS$17 = {};
 
 /**
@@ -1837,7 +1832,7 @@ function InputLabel$1(props) {
     ref: ref,
     ...forwardedProps,
     htmlFor: htmlFor,
-    className: classnames(className, block$13({
+    className: classnames(className, block$14({
       'is-required': isRequired,
       [`theme-${theme}`]: Boolean(theme),
       'has-custom-typography': Boolean(typography$1)
@@ -1845,8 +1840,8 @@ function InputLabel$1(props) {
     children: children
   });
 }
-InputLabel$1.displayName = COMPONENT_NAME$1o;
-InputLabel$1.className = CLASSNAME$1n;
+InputLabel$1.displayName = COMPONENT_NAME$1p;
+InputLabel$1.className = CLASSNAME$1o;
 InputLabel$1.defaultProps = DEFAULT_PROPS$17;
 
 const INPUT_HELPER_CONFIGURATION = {
@@ -1861,17 +1856,17 @@ const INPUT_HELPER_CONFIGURATION = {
   }
 };
 
-const COMPONENT_NAME$1n = 'InputHelper';
+const COMPONENT_NAME$1o = 'InputHelper';
 const InputHelperClassName = 'lumx-input-helper';
 
 /**
  * Defines the props of the component.
  */
 
-const CLASSNAME$1m = InputHelperClassName;
+const CLASSNAME$1n = InputHelperClassName;
 const {
-  block: block$12
-} = bem(CLASSNAME$1m);
+  block: block$13
+} = bem(CLASSNAME$1n);
 
 /**
  * Component default props.
@@ -1898,15 +1893,15 @@ function InputHelper$1(props) {
   return /*#__PURE__*/jsx("p", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$12({
+    className: classnames(className, block$13({
       [`color-${color}`]: Boolean(color),
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: children
   });
 }
-InputHelper$1.displayName = COMPONENT_NAME$1n;
-InputHelper$1.className = CLASSNAME$1m;
+InputHelper$1.displayName = COMPONENT_NAME$1o;
+InputHelper$1.className = CLASSNAME$1n;
 InputHelper$1.defaultProps = DEFAULT_PROPS$16;
 
 const INTERMEDIATE_STATE = 'intermediate';
@@ -1918,16 +1913,16 @@ const INTERMEDIATE_STATE = 'intermediate';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1m = 'Checkbox';
+const COMPONENT_NAME$1n = 'Checkbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1l = 'lumx-checkbox';
+const CLASSNAME$1m = 'lumx-checkbox';
 const {
-  block: block$11,
+  block: block$12,
   element: element$O
-} = bem(CLASSNAME$1l);
+} = bem(CLASSNAME$1m);
 
 /**
  * Checkbox component.
@@ -1963,7 +1958,7 @@ const Checkbox$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$11({
+    className: classnames(className, block$12({
       // Whether state is intermediate class name will "-checked"
       'is-checked': intermediateState ? true : isChecked,
       'is-disabled': isDisabled,
@@ -2082,8 +2077,8 @@ const Checkbox = forwardRef((props, ref) => {
     inputId
   });
 });
-Checkbox.displayName = COMPONENT_NAME$1m;
-Checkbox.className = CLASSNAME$1l;
+Checkbox.displayName = COMPONENT_NAME$1n;
+Checkbox.className = CLASSNAME$1m;
 Checkbox.defaultProps = DEFAULT_PROPS$15;
 
 /**
@@ -2105,16 +2100,16 @@ function useStopPropagation(handler) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1l = 'Chip';
+const COMPONENT_NAME$1m = 'Chip';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1k = 'lumx-chip';
+const CLASSNAME$1l = 'lumx-chip';
 const {
-  block: block$10,
+  block: block$11,
   element: element$N
-} = bem(CLASSNAME$1k);
+} = bem(CLASSNAME$1l);
 
 /**
  * Component default props.
@@ -2181,7 +2176,7 @@ const Chip$1 = props => {
       ...forwardedProps,
       href: !disabledStateProps.disabled ? href : undefined,
       ref: ref,
-      className: classnames(className, block$10({
+      className: classnames(className, block$11({
         'is-clickable': isClickable,
         [`color-${chipColor}`]: Boolean(chipColor),
         'is-disabled': isAnyDisabled,
@@ -2266,19 +2261,19 @@ const Chip = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-Chip.displayName = COMPONENT_NAME$1l;
-Chip.className = CLASSNAME$1k;
+Chip.displayName = COMPONENT_NAME$1m;
+Chip.className = CLASSNAME$1l;
 Chip.defaultProps = DEFAULT_PROPS$14;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1k = 'ChipGroup';
+const COMPONENT_NAME$1l = 'ChipGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1j = 'lumx-chip-group';
+const CLASSNAME$1k = 'lumx-chip-group';
 
 /**
  * Component default props.
@@ -2301,7 +2296,7 @@ const ChipGroup$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1j),
+    className: classnames(className, CLASSNAME$1k),
     children: children
   });
 };
@@ -2379,8 +2374,8 @@ const InternalChipGroup = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-InternalChipGroup.displayName = COMPONENT_NAME$1k;
-InternalChipGroup.className = CLASSNAME$1j;
+InternalChipGroup.displayName = COMPONENT_NAME$1l;
+InternalChipGroup.className = CLASSNAME$1k;
 InternalChipGroup.defaultProps = DEFAULT_PROPS$13;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
@@ -2389,16 +2384,16 @@ const ChipGroup = Object.assign(InternalChipGroup, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1j = 'SelectionChipGroup';
+const COMPONENT_NAME$1k = 'SelectionChipGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1i = 'lumx-selection-chip-group';
+const CLASSNAME$1j = 'lumx-selection-chip-group';
 const {
-  block: block$$,
+  block: block$10,
   element: element$M
-} = bem(CLASSNAME$1i);
+} = bem(CLASSNAME$1j);
 
 /**
  * SelectionChipGroup component.
@@ -2436,7 +2431,7 @@ const SelectionChipGroup$1 = (props, {
     "aria-label": label,
     "aria-multiselectable": "true",
     "aria-orientation": "horizontal",
-    className: block$$([className]),
+    className: block$10([className]),
     children: value.map(v => {
       const name = getOptionName && getWithSelector(getOptionName, v) || getWithSelector(getOptionId, v);
       const id = getWithSelector(getOptionId, v);
@@ -2494,10 +2489,10 @@ function createSelectorTreeWalker(container, selector) {
 }
 
 /** CSS selector for enabled chips (not aria-disabled). */
-const ENABLED_CHIP_SELECTOR = `.${CLASSNAME$1k}:not([aria-disabled="true"])`;
+const ENABLED_CHIP_SELECTOR = `.${CLASSNAME$1l}:not([aria-disabled="true"])`;
 
 /** Find the closest chip element from an event target. */
-const getChip = target => target?.closest?.(`.${CLASSNAME$1k}`) || null;
+const getChip = target => target?.closest?.(`.${CLASSNAME$1l}`) || null;
 
 /** Whether the chip is marked as disabled via aria-disabled. */
 const isChipDisabled = chip => chip?.getAttribute('aria-disabled') === 'true';
@@ -2711,15 +2706,15 @@ function wrapChildrenIconWithSpaces(children) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1i = 'Text';
+const COMPONENT_NAME$1j = 'Text';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1h = 'lumx-text';
+const CLASSNAME$1i = 'lumx-text';
 const {
-  block: block$_
-} = bem(CLASSNAME$1h);
+  block: block$$
+} = bem(CLASSNAME$1i);
 
 /**
  * Component default props.
@@ -2760,7 +2755,7 @@ const getTextProps = props => {
     '--lumx-text-white-space': whiteSpace
   };
   return {
-    className: classnames(className, block$_({
+    className: classnames(className, block$$({
       'is-truncated': isTruncated && !isTruncatedMultiline,
       'is-truncated-multiline': isTruncatedMultiline,
       'no-wrap': noWrap
@@ -2809,8 +2804,8 @@ const Text = forwardRef((props, ref) => {
     children: wrapChildrenIconWithSpaces(children)
   });
 });
-Text.displayName = COMPONENT_NAME$1i;
-Text.className = CLASSNAME$1h;
+Text.displayName = COMPONENT_NAME$1j;
+Text.className = CLASSNAME$1i;
 Text.defaultProps = DEFAULT_PROPS$12;
 
 /**
@@ -4903,16 +4898,16 @@ const DEFAULT_PROPS$11 = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1h = 'Tooltip';
+const COMPONENT_NAME$1i = 'Tooltip';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1g = 'lumx-tooltip';
+const CLASSNAME$1h = 'lumx-tooltip';
 const {
-  block: block$Z,
+  block: block$_,
   element: element$L
-} = bem(CLASSNAME$1g);
+} = bem(CLASSNAME$1h);
 
 /**
  * Props for the TooltipPopup rendering component.
@@ -4943,7 +4938,7 @@ const TooltipPopup = props => {
     ...forwardedProps,
     id: id,
     role: "tooltip",
-    className: classnames(className, block$Z({
+    className: classnames(className, block$_({
       [`position-${position}`]: Boolean(position)
     }), isHidden && visuallyHidden()),
     style: {
@@ -4961,8 +4956,8 @@ const TooltipPopup = props => {
     })]
   });
 };
-TooltipPopup.displayName = COMPONENT_NAME$1h;
-TooltipPopup.className = CLASSNAME$1g;
+TooltipPopup.displayName = COMPONENT_NAME$1i;
+TooltipPopup.className = CLASSNAME$1h;
 
 /**
  * Add ref and ARIA attribute(s) in tooltip children or wrapped children.
@@ -5050,7 +5045,7 @@ const LISTENERS = makeListenerTowerContext();
  */
 function useCallbackOnEscape(callback, closeOnEscape = true) {
   useEffect(() => {
-    const rootElement = DOCUMENT$1?.body;
+    const rootElement = DOCUMENT?.body;
     if (!closeOnEscape || !callback || !rootElement) {
       return undefined;
     }
@@ -5265,7 +5260,7 @@ const Tooltip = forwardRef((props, ref) => {
     ...forwardedProps
   } = props;
   // Disable in SSR.
-  if (!DOCUMENT$1) {
+  if (!DOCUMENT) {
     return /*#__PURE__*/jsx(Fragment, {
       children: children
     });
@@ -5324,8 +5319,8 @@ const Tooltip = forwardRef((props, ref) => {
     })]
   });
 });
-Tooltip.displayName = COMPONENT_NAME$1h;
-Tooltip.className = CLASSNAME$1g;
+Tooltip.displayName = COMPONENT_NAME$1i;
+Tooltip.className = CLASSNAME$1h;
 Tooltip.defaultProps = DEFAULT_PROPS$11;
 
 /**
@@ -6204,8 +6199,8 @@ const SelectionChipGroup = ({
   }, [container, inputRef, getOptionId]);
   useRovingTabIndexContainer({
     containerRef: container,
-    itemSelector: `.${CLASSNAME$1k}`,
-    itemDisabledSelector: `.${CLASSNAME$1k}[aria-disabled="true"]`
+    itemSelector: `.${CLASSNAME$1l}`,
+    itemDisabledSelector: `.${CLASSNAME$1l}[aria-disabled="true"]`
   });
 
   // Merge getChipProps and renderChip: getChipProps provides base props, renderChip overrides them,
@@ -6245,8 +6240,8 @@ const SelectionChipGroup = ({
     Tooltip
   });
 };
-SelectionChipGroup.displayName = COMPONENT_NAME$1j;
-SelectionChipGroup.className = CLASSNAME$1i;
+SelectionChipGroup.displayName = COMPONENT_NAME$1k;
+SelectionChipGroup.className = CLASSNAME$1j;
 
 /**
  * Get the value for a combobox option element.
@@ -6610,9 +6605,9 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
             }
             flag = true;
           } else if (handle.isOpen && !handle.isMultiSelect) {
-            // Open with no active item (single select) => close the popup.
+            // Open with no active item (single select) => close the popup,
+            // but let Enter propagate so it can submit a surrounding form.
             handle.setIsOpen(false);
-            flag = true;
           }
           // Otherwise (closed popup, or multi-select with no active item),
           // let Enter pass through so it can submit a surrounding form
@@ -7135,12 +7130,12 @@ function setupComboboxButton(button, callbacks) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1g = 'ComboboxButton';
+const COMPONENT_NAME$1h = 'ComboboxButton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1f = 'lumx-combobox-button';
+const CLASSNAME$1g = 'lumx-combobox-button';
 
 /**
  * ComboboxButton core template.
@@ -7180,7 +7175,7 @@ const ComboboxButton$1 = (props, {
   const componentProps = {
     ref,
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1f),
+    className: classnames(className, CLASSNAME$1g),
     role: 'combobox',
     'aria-controls': listboxId,
     'aria-haspopup': 'listbox',
@@ -7320,8 +7315,8 @@ const ComboboxButton = Object.assign(forwardRefPolymorphic((props, ref) => {
     Tooltip
   });
 }), {
-  displayName: COMPONENT_NAME$1g,
-  className: CLASSNAME$1f
+  displayName: COMPONENT_NAME$1h,
+  className: CLASSNAME$1g
 });
 
 /** Options for configuring the input-mode combobox controller. */
@@ -7481,12 +7476,12 @@ function getDisabledState(context, props) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1f = 'ComboboxInput';
+const COMPONENT_NAME$1g = 'ComboboxInput';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1e = 'lumx-combobox-input';
+const CLASSNAME$1f = 'lumx-combobox-input';
 
 /**
  * ComboboxInput core template.
@@ -7549,22 +7544,22 @@ const ComboboxInput$1 = (props, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1e = 'TextField';
+const COMPONENT_NAME$1f = 'TextField';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1d = 'lumx-text-field';
+const CLASSNAME$1e = 'lumx-text-field';
 
 /**
  * Input native element class name.
  */
-const INPUT_NATIVE_CLASSNAME = `${CLASSNAME$1d}__input-native`;
+const INPUT_NATIVE_CLASSNAME = `${CLASSNAME$1e}__input-native`;
 
 const {
-  block: block$Y,
+  block: block$Z,
   element: element$K
-} = bem(CLASSNAME$1d);
+} = bem(CLASSNAME$1e);
 
 /**
  * Defines the props of the component.
@@ -7636,7 +7631,7 @@ const TextField$1 = props => {
   const isNotEmpty = valueLength > 0;
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: classnames(className, block$Y({
+    className: classnames(className, block$Z({
       'has-chips': Boolean(chips),
       'has-error': !isValid && hasError,
       'has-icon': Boolean(icon),
@@ -7718,7 +7713,7 @@ const TextField$1 = props => {
 };
 
 const {
-  block: block$X
+  block: block$Y
 } = bem(INPUT_NATIVE_CLASSNAME);
 
 /**
@@ -7759,7 +7754,7 @@ const RawInputText$1 = props => {
     name: name,
     type: type,
     ref: ref,
-    className: classnames(className, block$X({
+    className: classnames(className, block$Y({
       [`theme-${theme}`]: Boolean(theme),
       text: true
     })),
@@ -7789,7 +7784,7 @@ const RawInputText = forwardRef((props, ref) => {
 });
 
 const {
-  block: block$W
+  block: block$X
 } = bem(INPUT_NATIVE_CLASSNAME);
 
 /**
@@ -7829,7 +7824,7 @@ const RawInputTextarea$1 = props => {
     ...forwardedProps,
     name: name,
     ref: ref,
-    className: classnames(className, block$W({
+    className: classnames(className, block$X({
       [`theme-${theme}`]: Boolean(theme),
       textarea: true
     })),
@@ -8069,8 +8064,8 @@ const TextField = forwardRef((props, ref) => {
     } : undefined
   });
 });
-TextField.displayName = COMPONENT_NAME$1e;
-TextField.className = CLASSNAME$1d;
+TextField.displayName = COMPONENT_NAME$1f;
+TextField.className = CLASSNAME$1e;
 TextField.defaultProps = DEFAULT_PROPS$Z;
 
 /**
@@ -8148,21 +8143,21 @@ const ComboboxInput = forwardRef((props, ref) => {
     IconButton
   });
 });
-ComboboxInput.displayName = COMPONENT_NAME$1f;
-ComboboxInput.className = CLASSNAME$1e;
+ComboboxInput.displayName = COMPONENT_NAME$1g;
+ComboboxInput.className = CLASSNAME$1f;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1d = 'List';
+const COMPONENT_NAME$1e = 'List';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1c = 'lumx-list';
+const CLASSNAME$1d = 'lumx-list';
 const {
-  block: block$V
-} = bem(CLASSNAME$1c);
+  block: block$W
+} = bem(CLASSNAME$1d);
 
 /**
  * Component default props.
@@ -8185,15 +8180,15 @@ const List$1 = props => {
   } = props;
   return /*#__PURE__*/jsx("ul", {
     ...forwardedProps,
-    className: classnames(className, block$V({
+    className: classnames(className, block$W({
       [`item-padding-${itemPadding}`]: Boolean(itemPadding)
     })),
     ref: ref,
     children: children
   });
 };
-List$1.displayName = COMPONENT_NAME$1d;
-List$1.className = CLASSNAME$1c;
+List$1.displayName = COMPONENT_NAME$1e;
+List$1.className = CLASSNAME$1d;
 List$1.defaultProps = DEFAULT_PROPS$Y;
 
 /**
@@ -8209,12 +8204,12 @@ List$1.defaultProps = DEFAULT_PROPS$Y;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1c = 'ComboboxList';
+const COMPONENT_NAME$1d = 'ComboboxList';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1b = 'lumx-combobox-list';
+const CLASSNAME$1c = 'lumx-combobox-list';
 
 /**
  * ComboboxList core template.
@@ -8236,7 +8231,7 @@ const ComboboxList$1 = props => {
   } = props;
   return List$1({
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1b),
+    className: classnames(className, CLASSNAME$1c),
     ref,
     itemPadding: 'big',
     id,
@@ -8321,22 +8316,22 @@ const ComboboxList = forwardRef((props, ref) => {
     })
   });
 });
-ComboboxList.displayName = COMPONENT_NAME$1c;
-ComboboxList.className = CLASSNAME$1b;
+ComboboxList.displayName = COMPONENT_NAME$1d;
+ComboboxList.className = CLASSNAME$1c;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1b = 'ListItem';
+const COMPONENT_NAME$1c = 'ListItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1a = 'lumx-list-item';
+const CLASSNAME$1b = 'lumx-list-item';
 const {
-  block: block$U,
+  block: block$V,
   element: element$J
-} = bem(CLASSNAME$1a);
+} = bem(CLASSNAME$1b);
 
 /**
  * Component default props.
@@ -8373,7 +8368,7 @@ const ListItem$1 = props => {
   return /*#__PURE__*/jsx("li", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$U({
+    className: classnames(className, block$V({
       [`size-${size}`]: Boolean(size)
     })),
     children: RawClickable({
@@ -8403,8 +8398,8 @@ const ListItem$1 = props => {
     })
   });
 };
-ListItem$1.displayName = COMPONENT_NAME$1b;
-ListItem$1.className = CLASSNAME$1a;
+ListItem$1.displayName = COMPONENT_NAME$1c;
+ListItem$1.className = CLASSNAME$1b;
 ListItem$1.defaultProps = DEFAULT_PROPS$X;
 
 /**
@@ -8414,12 +8409,12 @@ ListItem$1.defaultProps = DEFAULT_PROPS$X;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1a = 'ListItemAction';
+const COMPONENT_NAME$1b = 'ListItemAction';
 
 /**
  * Component classname (used by action area CSS pattern).
  */
-const CLASSNAME$19 = 'lumx-action-area__action';
+const CLASSNAME$1a = 'lumx-action-area__action';
 const DEFAULT_PROPS$W = {};
 
 /**
@@ -8453,16 +8448,16 @@ const ListItemAction$1 = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$19 = 'ComboboxOption';
+const COMPONENT_NAME$1a = 'ComboboxOption';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$18 = 'lumx-combobox-option';
+const CLASSNAME$19 = 'lumx-combobox-option';
 const {
-  block: block$T,
+  block: block$U,
   element: element$I
-} = bem(CLASSNAME$18);
+} = bem(CLASSNAME$19);
 
 /**
  * ComboboxOption core template.
@@ -8524,7 +8519,7 @@ const ComboboxOption$1 = (props, {
     size: 'tiny',
     ...forwardedProps,
     hidden,
-    className: !hidden ? classnames(className, block$T()) : undefined,
+    className: !hidden ? classnames(className, block$U()) : undefined,
     before,
     after,
     role: itemRole,
@@ -8646,8 +8641,8 @@ const ComboboxOption = forwardRef((props, ref) => {
     Tooltip
   });
 });
-ComboboxOption.displayName = COMPONENT_NAME$19;
-ComboboxOption.className = CLASSNAME$18;
+ComboboxOption.displayName = COMPONENT_NAME$1a;
+ComboboxOption.className = CLASSNAME$19;
 
 /**
  * Defines the props for the core ComboboxOptionAction template.
@@ -8656,12 +8651,12 @@ ComboboxOption.className = CLASSNAME$18;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$18 = 'ComboboxOptionAction';
+const COMPONENT_NAME$19 = 'ComboboxOptionAction';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$17 = 'lumx-combobox-option-action';
+const CLASSNAME$18 = 'lumx-combobox-option-action';
 
 /**
  * ComboboxOptionAction core template.
@@ -8684,7 +8679,7 @@ const ComboboxOptionAction$1 = props => {
     as: Element,
     ...forwardedProps,
     role: 'gridcell',
-    className: classnames(className, CLASSNAME$17),
+    className: classnames(className, CLASSNAME$18),
     handleClick,
     children
   });
@@ -8734,23 +8729,23 @@ const ComboboxOptionAction = Object.assign(forwardRefPolymorphic((props, ref) =>
     children
   });
 }), {
-  displayName: COMPONENT_NAME$18,
-  className: CLASSNAME$17
+  displayName: COMPONENT_NAME$19,
+  className: CLASSNAME$18
 });
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$17 = 'ComboboxOptionMoreInfo';
+const COMPONENT_NAME$18 = 'ComboboxOptionMoreInfo';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$16 = 'lumx-combobox-option-more-info';
+const CLASSNAME$17 = 'lumx-combobox-option-more-info';
 const {
-  block: block$S,
+  block: block$T,
   element: element$H
-} = bem(CLASSNAME$16);
+} = bem(CLASSNAME$17);
 
 /**
  * ComboboxOptionMoreInfo core template.
@@ -8784,7 +8779,7 @@ const ComboboxOptionMoreInfo$1 = (props, {
       icon: mdiInformationOutline,
       size: "s",
       ...buttonProps,
-      className: block$S([className, buttonProps?.className]),
+      className: block$T([className, buttonProps?.className]),
       emphasis: "low",
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave
@@ -8877,15 +8872,12 @@ function setupFocusTrap(options, signal) {
     focusZoneElement,
     focusElement
   } = options;
-
-  // Body element can be undefined in SSR context.
-  const rootElement = DOCUMENT?.body;
-  if (!rootElement || !focusZoneElement || signal.aborted) {
+  if (!focusZoneElement || signal.aborted) {
     return;
   }
 
-  // Use the shadow root as focus zone when available.
-  const focusZoneElementOrShadowRoot = focusZoneElement.shadowRoot || focusZoneElement;
+  // The root node is either the Document (regular DOM) or a ShadowRoot (shadow DOM portal).
+  const rootNode = focusZoneElement.getRootNode();
 
   // Track whether we added a `tabindex="-1"` so we can restore the original state on teardown.
   let addedTabIndex = false;
@@ -8911,7 +8903,7 @@ function setupFocusTrap(options, signal) {
     if (evt.key !== 'Tab') {
       return;
     }
-    const focusable = getFirstAndLastFocusable(focusZoneElementOrShadowRoot);
+    const focusable = getFirstAndLastFocusable(focusZoneElement);
 
     // Prevent focus switch if no focusable available — pin focus on the zone itself.
     if (!focusable.first) {
@@ -8919,14 +8911,16 @@ function setupFocusTrap(options, signal) {
       focusZoneFallback();
       return;
     }
-    const activeElement = focusZoneElement.shadowRoot ? focusZoneElement.shadowRoot.activeElement : DOCUMENT?.activeElement;
+    const {
+      activeElement
+    } = rootNode;
     if (
     // No previous focus.
     !activeElement ||
     // Previous focus is at the end of the focus zone.
     !evt.shiftKey && activeElement === focusable.last ||
     // Previous focus is outside the focus zone.
-    !focusZoneElementOrShadowRoot.contains(activeElement)) {
+    !focusZoneElement.contains(activeElement)) {
       focusable.first.focus();
       evt.preventDefault();
       return;
@@ -8940,19 +8934,20 @@ function setupFocusTrap(options, signal) {
       evt.preventDefault();
     }
   };
+  const keydownHandler = trapTabFocusInFocusZone;
   const focusTrap = {
-    enable: () => rootElement.addEventListener('keydown', trapTabFocusInFocusZone),
-    disable: () => rootElement.removeEventListener('keydown', trapTabFocusInFocusZone)
+    enable: () => rootNode.addEventListener('keydown', keydownHandler),
+    disable: () => rootNode.removeEventListener('keydown', keydownHandler)
   };
 
   // SETUP: focus initial element.
-  if (focusElement && focusZoneElementOrShadowRoot.contains(focusElement)) {
+  if (focusElement && focusZoneElement.contains(focusElement)) {
     // Focus the given element.
     focusElement.focus({
       preventScroll: true
     });
   } else {
-    const firstFocusable = getFirstAndLastFocusable(focusZoneElementOrShadowRoot).first;
+    const firstFocusable = getFirstAndLastFocusable(focusZoneElement).first;
     if (firstFocusable) {
       // Focus the first focusable descendant.
       firstFocusable.focus({
@@ -9067,16 +9062,16 @@ const POPOVER_ZINDEX = 9999;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$16 = 'Popover';
+const COMPONENT_NAME$17 = 'Popover';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$15 = 'lumx-popover';
+const CLASSNAME$16 = 'lumx-popover';
 const {
-  block: block$R,
+  block: block$S,
   element: element$G
-} = bem(CLASSNAME$15);
+} = bem(CLASSNAME$16);
 
 /**
  * Component default props (used by framework wrappers).
@@ -9138,7 +9133,7 @@ const Popover$1 = (props, {
     children: /*#__PURE__*/jsxs(Component, {
       ...forwardedProps,
       ref: ref,
-      className: classnames(className, block$R({
+      className: classnames(className, block$S({
         [`theme-${theme}`]: Boolean(theme),
         [`elevation-${adjustedElevation}`]: Boolean(adjustedElevation),
         [`position-${position}`]: Boolean(position),
@@ -9528,7 +9523,7 @@ const _InnerPopover = forwardRef((props, ref) => {
     ThemeProvider
   });
 });
-_InnerPopover.displayName = COMPONENT_NAME$16;
+_InnerPopover.displayName = COMPONENT_NAME$17;
 
 /**
  * Popover component.
@@ -9539,9 +9534,9 @@ _InnerPopover.displayName = COMPONENT_NAME$16;
  */
 const Popover = skipRender(
 // Skip render in SSR
-() => Boolean(DOCUMENT$1), _InnerPopover);
-Popover.displayName = COMPONENT_NAME$16;
-Popover.className = CLASSNAME$15;
+() => Boolean(DOCUMENT), _InnerPopover);
+Popover.displayName = COMPONENT_NAME$17;
+Popover.className = CLASSNAME$16;
 Popover.defaultProps = DEFAULT_PROPS$V;
 
 /**
@@ -9604,22 +9599,22 @@ const ComboboxOptionMoreInfo = props => {
     Popover
   });
 };
-ComboboxOptionMoreInfo.displayName = COMPONENT_NAME$17;
-ComboboxOptionMoreInfo.className = CLASSNAME$16;
+ComboboxOptionMoreInfo.displayName = COMPONENT_NAME$18;
+ComboboxOptionMoreInfo.className = CLASSNAME$17;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$15 = 'SkeletonTypography';
+const COMPONENT_NAME$16 = 'SkeletonTypography';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$14 = 'lumx-skeleton-typography';
+const CLASSNAME$15 = 'lumx-skeleton-typography';
 const {
-  block: block$Q,
+  block: block$R,
   element: element$F
-} = bem(CLASSNAME$14);
+} = bem(CLASSNAME$15);
 
 /**
  * SkeletonTypography component.
@@ -9640,7 +9635,7 @@ const SkeletonTypography$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$Q({
+    className: classnames(className, block$R({
       [`theme-${theme}`]: Boolean(theme),
       [`typography-${typography}`]: Boolean(typography),
       [`color-${color}`]: Boolean(color)
@@ -9658,12 +9653,12 @@ const SkeletonTypography$1 = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$14 = 'ComboboxOptionSkeleton';
+const COMPONENT_NAME$15 = 'ComboboxOptionSkeleton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$13 = 'lumx-combobox-option-skeleton';
+const CLASSNAME$14 = 'lumx-combobox-option-skeleton';
 
 /**
  * ComboboxOptionSkeleton core template.
@@ -9690,7 +9685,7 @@ const ComboboxOptionSkeleton$1 = props => {
     size: 'tiny',
     role: 'none',
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$13),
+    className: classnames(className, CLASSNAME$14),
     children: children || /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(SkeletonTypography$1, {
         typography: "body1",
@@ -9743,19 +9738,19 @@ const ComboboxOptionSkeleton = props => {
     ...props
   });
 };
-ComboboxOptionSkeleton.displayName = COMPONENT_NAME$14;
-ComboboxOptionSkeleton.className = CLASSNAME$13;
+ComboboxOptionSkeleton.displayName = COMPONENT_NAME$15;
+ComboboxOptionSkeleton.className = CLASSNAME$14;
 
-const COMPONENT_NAME$13 = 'ComboboxPopover';
+const COMPONENT_NAME$14 = 'ComboboxPopover';
 
 /**
  * Component default class name.
  */
-const CLASSNAME$12 = 'lumx-combobox-popover';
+const CLASSNAME$13 = 'lumx-combobox-popover';
 const {
-  block: block$P,
+  block: block$Q,
   element: element$E
-} = bem(CLASSNAME$12);
+} = bem(CLASSNAME$13);
 
 /**
  * Defines the props for the core ComboboxPopover template.
@@ -9796,7 +9791,7 @@ const ComboboxPopover$1 = (props, {
     ...forwardedProps,
     placement: placement,
     fitToAnchorWidth: fitToAnchorWidth,
-    className: block$P([className]),
+    className: block$Q([className]),
     anchorRef: anchorRef,
     isOpen: isOpen,
     onClose: handleClose,
@@ -9818,15 +9813,15 @@ const ComboboxPopover$1 = (props, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$12 = 'FlexBox';
+const COMPONENT_NAME$13 = 'FlexBox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$11 = 'lumx-flex-box';
+const CLASSNAME$12 = 'lumx-flex-box';
 const {
-  block: block$O
-} = bem(CLASSNAME$11);
+  block: block$P
+} = bem(CLASSNAME$12);
 
 /**
  * Get FlexBox component props (className computation).
@@ -9850,7 +9845,7 @@ function getFlexBoxProps(props) {
   const adjustedOrientation = orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null);
   return {
     ...forwardedProps,
-    className: classnames(className, block$O({
+    className: classnames(className, block$P({
       [`orientation-${adjustedOrientation}`]: Boolean(adjustedOrientation),
       [`v-align-${vAlign}`]: Boolean(vAlign),
       [`h-align-${hAlign}`]: Boolean(hAlign),
@@ -9882,8 +9877,8 @@ const FlexBox = forwardRef((props, ref) => {
     children: children
   });
 });
-FlexBox.displayName = COMPONENT_NAME$12;
-FlexBox.className = CLASSNAME$11;
+FlexBox.displayName = COMPONENT_NAME$13;
+FlexBox.className = CLASSNAME$12;
 
 /**
  * Props for Popover that can be passed to Combobox.Popover.
@@ -9921,8 +9916,8 @@ const ComboboxPopover = props => {
     FlexBox
   });
 };
-ComboboxPopover.displayName = COMPONENT_NAME$13;
-ComboboxPopover.className = CLASSNAME$12;
+ComboboxPopover.displayName = COMPONENT_NAME$14;
+ComboboxPopover.className = CLASSNAME$13;
 
 /**
  * Combobox.Provider component.
@@ -9967,12 +9962,12 @@ ComboboxProvider.displayName = 'Combobox.Provider';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$11 = 'ComboboxSection';
+const COMPONENT_NAME$12 = 'ComboboxSection';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$10 = 'lumx-combobox-section';
+const CLASSNAME$11 = 'lumx-combobox-section';
 
 /**
  * ComboboxSection core template.
@@ -9999,7 +9994,7 @@ const ComboboxSection$1 = (props, {
     ...forwardedProps,
     hidden: hidden,
     "aria-hidden": ariaHidden || undefined,
-    className: !hidden ? classnames(className, CLASSNAME$10) : undefined,
+    className: !hidden ? classnames(className, CLASSNAME$11) : undefined,
     role: !ariaHidden ? 'none' : undefined,
     itemsWrapperProps: {
       role: 'group'
@@ -10011,16 +10006,16 @@ const ComboboxSection$1 = (props, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$10 = 'ListSection';
+const COMPONENT_NAME$11 = 'ListSection';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$$ = 'lumx-list-section';
+const CLASSNAME$10 = 'lumx-list-section';
 const {
-  block: block$N,
+  block: block$O,
   element: element$D
-} = bem(CLASSNAME$$);
+} = bem(CLASSNAME$10);
 
 /**
  * Component default props.
@@ -10050,7 +10045,7 @@ const ListSection$1 = props => {
   return /*#__PURE__*/jsxs("li", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$N()),
+    className: classnames(className, block$O()),
     children: [hasHeader && /*#__PURE__*/jsxs(Text, {
       as: "p",
       typography: "overline",
@@ -10067,8 +10062,8 @@ const ListSection$1 = props => {
     })]
   });
 };
-ListSection$1.displayName = COMPONENT_NAME$10;
-ListSection$1.className = CLASSNAME$$;
+ListSection$1.displayName = COMPONENT_NAME$11;
+ListSection$1.className = CLASSNAME$10;
 ListSection$1.defaultProps = DEFAULT_PROPS$U;
 
 /**
@@ -10091,8 +10086,8 @@ const ListSection = forwardRef((props, ref) => {
     Text
   });
 });
-ListSection.displayName = COMPONENT_NAME$10;
-ListSection.className = CLASSNAME$$;
+ListSection.displayName = COMPONENT_NAME$11;
+ListSection.className = CLASSNAME$10;
 ListSection.defaultProps = DEFAULT_PROPS$U;
 
 /**
@@ -10141,21 +10136,21 @@ const ComboboxSection = forwardRef((props, ref) => {
     ListSection
   });
 });
-ComboboxSection.displayName = COMPONENT_NAME$11;
-ComboboxSection.className = CLASSNAME$10;
+ComboboxSection.displayName = COMPONENT_NAME$12;
+ComboboxSection.className = CLASSNAME$11;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$$ = 'ComboboxState';
+const COMPONENT_NAME$10 = 'ComboboxState';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$_ = 'lumx-combobox-state';
+const CLASSNAME$$ = 'lumx-combobox-state';
 const {
-  block: block$M
-} = bem(CLASSNAME$_);
+  block: block$N
+} = bem(CLASSNAME$$);
 
 /**
  * Defines the props for the core ComboboxState template.
@@ -10216,7 +10211,7 @@ const ComboboxState$1 = (props, {
   // the popover's closeMode="hide") and revealing it doesn't trigger announcements.
   const renderContent = isOpen;
   return /*#__PURE__*/jsxs(GenericBlock, {
-    className: classnames(!show && visuallyHidden(), block$M(), padding('regular')),
+    className: classnames(!show && visuallyHidden(), block$N(), padding('regular')),
     orientation: "vertical",
     ...alignProps,
     role: "status",
@@ -10328,16 +10323,16 @@ function partitionMulti(elements, predicates) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$_ = 'GenericBlock';
+const COMPONENT_NAME$$ = 'GenericBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Z = 'lumx-generic-block';
+const CLASSNAME$_ = 'lumx-generic-block';
 const {
-  block: block$L,
+  block: block$M,
   element: element$C
-} = bem(CLASSNAME$Z);
+} = bem(CLASSNAME$_);
 
 /**
  * Component default props.
@@ -10376,7 +10371,7 @@ const GenericBlock$1 = props => {
   } = props;
   return /*#__PURE__*/jsxs(FlexBox, {
     ref: ref,
-    className: classnames(className, block$L()),
+    className: classnames(className, block$M()),
     gap: gap,
     orientation: orientation,
     ...forwardedProps,
@@ -10479,8 +10474,8 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     }) : undefined
   });
 });
-BaseGenericBlock.displayName = COMPONENT_NAME$_;
-BaseGenericBlock.className = CLASSNAME$Z;
+BaseGenericBlock.displayName = COMPONENT_NAME$$;
+BaseGenericBlock.className = CLASSNAME$_;
 BaseGenericBlock.defaultProps = DEFAULT_PROPS$T;
 const GenericBlock = Object.assign(BaseGenericBlock, {
   Figure,
@@ -10559,18 +10554,18 @@ const ComboboxState = props => {
     Text
   });
 };
-ComboboxState.displayName = COMPONENT_NAME$$;
-ComboboxState.className = CLASSNAME$_;
+ComboboxState.displayName = COMPONENT_NAME$10;
+ComboboxState.className = CLASSNAME$$;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Z = 'ListDivider';
+const COMPONENT_NAME$_ = 'ListDivider';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Y = 'lumx-list-divider';
+const CLASSNAME$Z = 'lumx-list-divider';
 
 /**
  * Component default props.
@@ -10594,11 +10589,11 @@ const ListDivider$1 = props => {
     ref: ref,
     role: "none",
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$Y)
+    className: classnames(className, CLASSNAME$Z)
   });
 };
-ListDivider$1.displayName = COMPONENT_NAME$Z;
-ListDivider$1.className = CLASSNAME$Y;
+ListDivider$1.displayName = COMPONENT_NAME$_;
+ListDivider$1.className = CLASSNAME$Z;
 ListDivider$1.defaultProps = DEFAULT_PROPS$S;
 
 /**
@@ -10619,8 +10614,8 @@ const ListDivider = forwardRef((props, ref) => {
     ref
   });
 });
-ListDivider.displayName = COMPONENT_NAME$Z;
-ListDivider.className = CLASSNAME$Y;
+ListDivider.displayName = COMPONENT_NAME$_;
+ListDivider.className = CLASSNAME$Z;
 ListDivider.defaultProps = DEFAULT_PROPS$S;
 
 /**
@@ -10670,16 +10665,16 @@ const CommentBlockVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Y = 'CommentBlock';
+const COMPONENT_NAME$Z = 'CommentBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$X = 'lumx-comment-block';
+const CLASSNAME$Y = 'lumx-comment-block';
 const {
-  block: block$K,
+  block: block$L,
   element: element$B
-} = classNames.bem(CLASSNAME$X);
+} = classNames.bem(CLASSNAME$Y);
 
 /**
  * Component default props.
@@ -10720,7 +10715,7 @@ const CommentBlock = forwardRef((props, ref) => {
   const hasChildren = Children.count(children) > 0;
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: classNames.join(className, block$K({
+    className: classNames.join(className, block$L({
       'has-children': hasChildren && isOpen,
       'has-indented-children': hasChildren && variant === CommentBlockVariant.indented,
       'has-linear-children': hasChildren && variant === CommentBlockVariant.linear,
@@ -10781,8 +10776,8 @@ const CommentBlock = forwardRef((props, ref) => {
     })]
   });
 });
-CommentBlock.displayName = COMPONENT_NAME$Y;
-CommentBlock.className = CLASSNAME$X;
+CommentBlock.displayName = COMPONENT_NAME$Z;
+CommentBlock.className = CLASSNAME$Y;
 CommentBlock.defaultProps = DEFAULT_PROPS$R;
 
 /**
@@ -10803,12 +10798,12 @@ const isDateValid = date => date instanceof Date && !Number.isNaN(date.getTime()
 /**
  * Component display name.
  */
-const COMPONENT_NAME$X = 'DatePicker';
+const COMPONENT_NAME$Y = 'DatePicker';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$W = 'lumx-date-picker';
+const CLASSNAME$X = 'lumx-date-picker';
 
 /** Get first day of week for locale from the browser API */
 const getFromBrowser = locale => {
@@ -10961,7 +10956,10 @@ const getMonthCalendar = (locale, referenceDate = new Date(), rangeMinDate, rang
 const isSameDay = (date1, date2) => isDateValid(date1) && isDateValid(date2) && date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
 
 /**
- * Get current browser locale.
+ * Get current browser locale (BCP-47 string).
+ *
+ * Reads `navigator.languages[0]` (the user's preferred language) with a
+ * fallback to `navigator.language`.
  */
 const getCurrentLocale = () => navigator.languages?.[0] || navigator.language;
 
@@ -11028,7 +11026,7 @@ function formatDayNumber(locale, date) {
 
 const {
   element: element$A
-} = classNames.bem(CLASSNAME$W);
+} = classNames.bem(CLASSNAME$X);
 
 /**
  * Defines the props of the component.
@@ -11037,7 +11035,7 @@ const {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$W = 'DatePickerControlled';
+const COMPONENT_NAME$X = 'DatePickerControlled';
 
 /**
  * DatePickerControlled component.
@@ -11122,7 +11120,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
   const yearLabel = getYearDisplayName(locale);
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: `${CLASSNAME$W}`,
+    className: `${CLASSNAME$X}`,
     style: style,
     children: [/*#__PURE__*/jsx(Toolbar, {
       className: element$A('toolbar'),
@@ -11227,8 +11225,8 @@ const DatePickerControlled = forwardRef((props, ref) => {
     })]
   });
 });
-DatePickerControlled.displayName = COMPONENT_NAME$W;
-DatePickerControlled.className = CLASSNAME$W;
+DatePickerControlled.displayName = COMPONENT_NAME$X;
+DatePickerControlled.className = CLASSNAME$X;
 
 /**
  * DatePicker component.
@@ -11270,8 +11268,8 @@ const DatePicker = forwardRef((props, ref) => {
     onMonthChange: setSelectedMonth
   });
 });
-DatePicker.displayName = COMPONENT_NAME$X;
-DatePicker.className = CLASSNAME$W;
+DatePicker.displayName = COMPONENT_NAME$Y;
+DatePicker.className = CLASSNAME$X;
 
 const useBooleanState = defaultValue => {
   const [booleanValue, setBoolean] = useState(defaultValue);
@@ -11284,7 +11282,7 @@ const useBooleanState = defaultValue => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$V = 'DatePickerField';
+const COMPONENT_NAME$W = 'DatePickerField';
 
 /**
  * DatePickerField component.
@@ -11373,7 +11371,7 @@ const DatePickerField = forwardRef((props, ref) => {
     }) : null]
   });
 });
-DatePickerField.displayName = COMPONENT_NAME$V;
+DatePickerField.displayName = COMPONENT_NAME$W;
 
 /**
  * Convenient hook to create interaction observers.
@@ -11669,16 +11667,16 @@ const useTransitionVisibility = (ref, isComponentVisible, timeout, onVisibilityC
 /**
  * Component display name.
  */
-const COMPONENT_NAME$U = 'Dialog';
+const COMPONENT_NAME$V = 'Dialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$V = 'lumx-dialog';
+const CLASSNAME$W = 'lumx-dialog';
 const {
-  block: block$J,
+  block: block$K,
   element: element$z
-} = bem(CLASSNAME$V);
+} = bem(CLASSNAME$W);
 
 /**
  * Component default props.
@@ -11734,7 +11732,7 @@ const Dialog$1 = props => {
     children: /*#__PURE__*/jsxs("div", {
       ref: ref,
       ...forwardedProps,
-      className: classnames(className, block$J({
+      className: classnames(className, block$K({
         'is-hidden': !isOpen,
         'is-loading': isLoading,
         'is-shown': isOpen || isVisible,
@@ -11824,7 +11822,7 @@ const DEFAULT_PROPS$P = {
  * @return React element.
  */
 const Dialog = forwardRef((props, ref) => {
-  if (!DOCUMENT$1) {
+  if (!DOCUMENT) {
     // Can't render in SSR.
     return null;
   }
@@ -11951,22 +11949,22 @@ const Dialog = forwardRef((props, ref) => {
     ...forwardedProps
   }) : null;
 });
-Dialog.displayName = COMPONENT_NAME$U;
-Dialog.className = CLASSNAME$V;
+Dialog.displayName = COMPONENT_NAME$V;
+Dialog.className = CLASSNAME$W;
 Dialog.defaultProps = DEFAULT_PROPS$P;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$T = 'Divider';
+const COMPONENT_NAME$U = 'Divider';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$U = 'lumx-divider';
+const CLASSNAME$V = 'lumx-divider';
 const {
-  block: block$I
-} = bem(CLASSNAME$U);
+  block: block$J
+} = bem(CLASSNAME$V);
 
 /**
  * Divider component.
@@ -11984,7 +11982,7 @@ const Divider$1 = props => {
   return /*#__PURE__*/jsx("hr", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$I({
+    className: classnames(className, block$J({
       [`theme-${theme}`]: Boolean(theme)
     }))
   });
@@ -12018,22 +12016,22 @@ const Divider = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-Divider.displayName = COMPONENT_NAME$T;
-Divider.className = CLASSNAME$U;
+Divider.displayName = COMPONENT_NAME$U;
+Divider.className = CLASSNAME$V;
 Divider.defaultProps = DEFAULT_PROPS$O;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$S = 'DragHandle';
+const COMPONENT_NAME$T = 'DragHandle';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$T = 'lumx-drag-handle';
+const CLASSNAME$U = 'lumx-drag-handle';
 const {
-  block: block$H
-} = bem(CLASSNAME$T);
+  block: block$I
+} = bem(CLASSNAME$U);
 
 /**
  * DragHandle component.
@@ -12051,7 +12049,7 @@ const DragHandle$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$H({
+    className: classnames(className, block$I({
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: Icon$1({
@@ -12090,8 +12088,8 @@ const DragHandle = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-DragHandle.displayName = COMPONENT_NAME$S;
-DragHandle.className = CLASSNAME$T;
+DragHandle.displayName = COMPONENT_NAME$T;
+DragHandle.className = CLASSNAME$U;
 DragHandle.defaultProps = DEFAULT_PROPS$N;
 
 const INITIAL_INDEX = -1;
@@ -12286,8 +12284,8 @@ const InternalList = forwardRef((props, ref) => {
     itemPadding: adjustedItemPadding
   });
 });
-InternalList.displayName = COMPONENT_NAME$1d;
-InternalList.className = CLASSNAME$1c;
+InternalList.displayName = COMPONENT_NAME$1e;
+InternalList.className = CLASSNAME$1d;
 InternalList.defaultProps = DEFAULT_PROPS$Y;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
@@ -12337,16 +12335,16 @@ const useInfiniteScroll = (ref, callback, callbackOnMount = false, scrollTrigger
 /**
  * Component display name.
  */
-const COMPONENT_NAME$R = 'Dropdown';
+const COMPONENT_NAME$S = 'Dropdown';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$S = 'lumx-dropdown';
+const CLASSNAME$T = 'lumx-dropdown';
 const {
-  block: block$G,
+  block: block$H,
   element: element$y
-} = classNames.bem(CLASSNAME$S);
+} = classNames.bem(CLASSNAME$T);
 
 /**
  * Component default props.
@@ -12410,7 +12408,7 @@ const Dropdown = forwardRef((props, ref) => {
     ...forwardedProps,
     focusAnchorOnClose: focusAnchorOnClose,
     anchorRef: anchorRef,
-    className: classNames.join(className, block$G()),
+    className: classNames.join(className, block$H()),
     elevation: 0,
     closeOnClickAway: closeOnClickAway,
     closeOnEscape: closeOnEscape,
@@ -12429,23 +12427,23 @@ const Dropdown = forwardRef((props, ref) => {
     })
   }) : null;
 });
-Dropdown.displayName = COMPONENT_NAME$R;
-Dropdown.className = CLASSNAME$S;
+Dropdown.displayName = COMPONENT_NAME$S;
+Dropdown.className = CLASSNAME$T;
 Dropdown.defaultProps = DEFAULT_PROPS$M;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Q = 'ExpansionPanel';
+const COMPONENT_NAME$R = 'ExpansionPanel';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$R = 'lumx-expansion-panel';
+const CLASSNAME$S = 'lumx-expansion-panel';
 const {
-  block: block$F,
+  block: block$G,
   element: element$x
-} = bem(CLASSNAME$R);
+} = bem(CLASSNAME$S);
 
 /**
  * Component default props.
@@ -12499,7 +12497,7 @@ const ExpansionPanel$1 = props => {
     }
   };
   const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
-  const rootClassName = classnames(className, block$F({
+  const rootClassName = classnames(className, block$G({
     'has-background': hasBackground,
     'has-header': Boolean(!isEmpty(headerProps.children)),
     'has-header-divider': hasHeaderDivider,
@@ -12634,17 +12632,17 @@ const ExpansionPanel = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-ExpansionPanel.displayName = COMPONENT_NAME$Q;
-ExpansionPanel.className = CLASSNAME$R;
+ExpansionPanel.displayName = COMPONENT_NAME$R;
+ExpansionPanel.className = CLASSNAME$S;
 ExpansionPanel.defaultProps = DEFAULT_PROPS$L;
 
-const COMPONENT_NAME$P = 'Flag';
-const CLASSNAME$Q = 'lumx-flag';
+const COMPONENT_NAME$Q = 'Flag';
+const CLASSNAME$R = 'lumx-flag';
 const DEFAULT_PROPS$K = {};
 const {
-  block: block$E,
+  block: block$F,
   element: element$w
-} = bem(CLASSNAME$Q);
+} = bem(CLASSNAME$R);
 
 /**
  * Flag component.
@@ -12667,7 +12665,7 @@ const Flag$1 = props => {
   const isTruncated = !!truncate;
   return /*#__PURE__*/jsxs("div", {
     ...forwardedProps,
-    className: classnames(className, block$E({
+    className: classnames(className, block$F({
       [`color-${flagColor}`]: Boolean(flagColor),
       'is-truncated': isTruncated
     })),
@@ -12702,8 +12700,8 @@ const Flag = forwardRef((props, ref) => {
     Text
   });
 });
-Flag.displayName = COMPONENT_NAME$P;
-Flag.className = CLASSNAME$Q;
+Flag.displayName = COMPONENT_NAME$Q;
+Flag.className = CLASSNAME$R;
 Flag.defaultProps = DEFAULT_PROPS$K;
 
 /** The maximum authorized heading level. */
@@ -12732,12 +12730,12 @@ const defaultContext = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$O = 'Heading';
+const COMPONENT_NAME$P = 'Heading';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$P = 'lumx-heading';
+const CLASSNAME$Q = 'lumx-heading';
 
 /**
  * Component default props.
@@ -12762,7 +12760,7 @@ const getHeadingProps = (props, contextHeadingElement) => {
   return {
     ...otherProps,
     as: computedHeadingElement,
-    className: classnames(className, CLASSNAME$P),
+    className: classnames(className, CLASSNAME$Q),
     typography: typography || DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]
   };
 };
@@ -12800,8 +12798,8 @@ const Heading = forwardRef((props, ref) => {
     children: children
   });
 });
-Heading.displayName = COMPONENT_NAME$O;
-Heading.className = CLASSNAME$P;
+Heading.displayName = COMPONENT_NAME$P;
+Heading.className = CLASSNAME$Q;
 Heading.defaultProps = DEFAULT_PROPS$J;
 
 /**
@@ -12840,15 +12838,15 @@ const HeadingLevelProvider = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$N = 'Grid';
+const COMPONENT_NAME$O = 'Grid';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$O = 'lumx-grid';
+const CLASSNAME$P = 'lumx-grid';
 const {
-  block: block$D
-} = classNames.bem(CLASSNAME$O);
+  block: block$E
+} = classNames.bem(CLASSNAME$P);
 
 /**
  * Component default props.
@@ -12879,7 +12877,7 @@ const Grid = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, classNames.bem(`${CLASSNAME$O}-container`).block(), block$D({
+    className: classNames.join(className, classNames.bem(`${CLASSNAME$P}-container`).block(), block$E({
       [`h-align-${hAlign}`]: Boolean(hAlign),
       [`v-align-${vAlign}`]: Boolean(vAlign),
       [`orientation-${orientation}`]: Boolean(orientation),
@@ -12889,22 +12887,22 @@ const Grid = forwardRef((props, ref) => {
     children: children
   });
 });
-Grid.displayName = COMPONENT_NAME$N;
-Grid.className = CLASSNAME$O;
+Grid.displayName = COMPONENT_NAME$O;
+Grid.className = CLASSNAME$P;
 Grid.defaultProps = DEFAULT_PROPS$I;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$M = 'GridItem';
+const COMPONENT_NAME$N = 'GridItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$N = 'lumx-grid-item';
+const CLASSNAME$O = 'lumx-grid-item';
 const {
-  block: block$C
-} = classNames.bem(CLASSNAME$N);
+  block: block$D
+} = classNames.bem(CLASSNAME$O);
 
 /**
  * GridItem component.
@@ -12925,7 +12923,7 @@ const GridItem = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$C({
+    className: classNames.join(className, block$D({
       [`width-${width}`]: Boolean(width),
       [`order-${order}`]: Boolean(order),
       [`align-${align}`]: Boolean(align)
@@ -12933,18 +12931,18 @@ const GridItem = forwardRef((props, ref) => {
     children: children
   });
 });
-GridItem.displayName = COMPONENT_NAME$M;
-GridItem.className = CLASSNAME$N;
+GridItem.displayName = COMPONENT_NAME$N;
+GridItem.className = CLASSNAME$O;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$L = 'GridColumn';
+const COMPONENT_NAME$M = 'GridColumn';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$M = 'lumx-grid-column';
+const CLASSNAME$N = 'lumx-grid-column';
 
 /**
  * Component default props.
@@ -12974,7 +12972,7 @@ const GridColumn$1 = props => {
   return /*#__PURE__*/jsx(Component, {
     ...forwardedProps,
     ref: ref,
-    className: classnames(className, CLASSNAME$M),
+    className: classnames(className, CLASSNAME$N),
     style: {
       ...style,
       ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
@@ -12984,8 +12982,8 @@ const GridColumn$1 = props => {
     children: children
   });
 };
-GridColumn$1.displayName = COMPONENT_NAME$L;
-GridColumn$1.className = CLASSNAME$M;
+GridColumn$1.displayName = COMPONENT_NAME$M;
+GridColumn$1.className = CLASSNAME$N;
 GridColumn$1.defaultProps = DEFAULT_PROPS$H;
 
 /**
@@ -13014,8 +13012,8 @@ const GridColumn = forwardRef((props, ref) => {
     ...props
   });
 });
-GridColumn.displayName = COMPONENT_NAME$L;
-GridColumn.className = CLASSNAME$M;
+GridColumn.displayName = COMPONENT_NAME$M;
+GridColumn.className = CLASSNAME$N;
 GridColumn.defaultProps = DEFAULT_PROPS$G;
 
 /**
@@ -13037,16 +13035,16 @@ const ImageBlockCaptionPosition = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$K = 'ImageBlock';
+const COMPONENT_NAME$L = 'ImageBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$L = 'lumx-image-block';
+const CLASSNAME$M = 'lumx-image-block';
 const {
-  block: block$B,
+  block: block$C,
   element: element$v
-} = bem(CLASSNAME$L);
+} = bem(CLASSNAME$M);
 
 /**
  * Component default props.
@@ -13089,7 +13087,7 @@ const ImageBlock$1 = props => {
   return /*#__PURE__*/jsxs("figure", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$B({
+    className: classnames(className, block$C({
       [`caption-position-${captionPosition}`]: Boolean(captionPosition),
       [`align-${align}`]: Boolean(align),
       [`size-${size}`]: Boolean(size),
@@ -13107,7 +13105,7 @@ const ImageBlock$1 = props => {
       alt: alt || title
     }), /*#__PURE__*/jsx(ImageCaption, {
       as: "figcaption",
-      baseClassName: CLASSNAME$L,
+      baseClassName: CLASSNAME$M,
       theme: theme,
       title: title,
       titleProps: titleProps,
@@ -13238,19 +13236,19 @@ const ImageBlock = forwardRef((props, ref) => {
     ImageCaption
   });
 });
-ImageBlock.displayName = COMPONENT_NAME$K;
-ImageBlock.className = CLASSNAME$L;
+ImageBlock.displayName = COMPONENT_NAME$L;
+ImageBlock.className = CLASSNAME$M;
 ImageBlock.defaultProps = DEFAULT_PROPS$F;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$J = 'ImageLightbox';
+const COMPONENT_NAME$K = 'ImageLightbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$K = 'lumx-image-lightbox';
+const CLASSNAME$L = 'lumx-image-lightbox';
 
 /**
  * Observe element size (only works if it's size depends on the window size).
@@ -13496,7 +13494,7 @@ function useAnimateScroll(scrollAreaRef) {
 
 const {
   element: element$u
-} = classNames.bem(CLASSNAME$K);
+} = classNames.bem(CLASSNAME$L);
 /** Internal image slide component for ImageLightbox */
 const ImageSlide = /*#__PURE__*/React__default.memo(props => {
   const {
@@ -13588,7 +13586,7 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
 
 const {
   element: element$t
-} = classNames.bem(CLASSNAME$K);
+} = classNames.bem(CLASSNAME$L);
 /** Internal image slideshow component for ImageLightbox */
 const ImageSlideshow = ({
   activeImageIndex,
@@ -13828,7 +13826,7 @@ function useImageLightbox(props) {
         viewTransitionName: {
           source: currentImageRef,
           target: triggerImageRefs[currentIndex],
-          name: CLASSNAME$K
+          name: CLASSNAME$L
         }
       });
     }
@@ -13880,7 +13878,7 @@ function useImageLightbox(props) {
         viewTransitionName: {
           source: triggerImage,
           target: currentImageRef,
-          name: CLASSNAME$K
+          name: CLASSNAME$L
         }
       });
     }
@@ -13934,7 +13932,7 @@ const Inner = forwardRef((props, ref) => {
   }, [onClose]);
   return /*#__PURE__*/jsx(Lightbox, {
     ref: ref,
-    className: classNames.join(className, CLASSNAME$K),
+    className: classNames.join(className, CLASSNAME$L),
     parentElement: parentElement,
     isOpen: isOpen,
     onClose: onClose,
@@ -13963,8 +13961,8 @@ const Inner = forwardRef((props, ref) => {
     })
   });
 });
-Inner.displayName = COMPONENT_NAME$J;
-Inner.className = CLASSNAME$K;
+Inner.displayName = COMPONENT_NAME$K;
+Inner.className = CLASSNAME$L;
 
 /**
  * ImageLightbox component.
@@ -13980,16 +13978,16 @@ const ImageLightbox = Object.assign(Inner, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$I = 'InlineList';
+const COMPONENT_NAME$J = 'InlineList';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$J = 'lumx-inline-list';
+const CLASSNAME$K = 'lumx-inline-list';
 const {
-  block: block$A,
+  block: block$B,
   element: element$s
-} = bem(CLASSNAME$J);
+} = bem(CLASSNAME$K);
 
 /**
  * Component default props.
@@ -14019,7 +14017,7 @@ const InlineList$1 = props => {
     jsx("ul", {
       ...forwardedProps,
       ref: ref,
-      className: classnames(className, block$A({
+      className: classnames(className, block$B({
         wrap: Boolean(wrap)
       }), color && font(color, colorVariant), typography$1 && typography(typography$1))
       // Lists with removed bullet style can lose their a11y list role on some browsers
@@ -14041,8 +14039,8 @@ const InlineList$1 = props => {
     })
   );
 };
-InlineList$1.displayName = COMPONENT_NAME$I;
-InlineList$1.className = CLASSNAME$J;
+InlineList$1.displayName = COMPONENT_NAME$J;
+InlineList$1.className = CLASSNAME$K;
 InlineList$1.defaultProps = DEFAULT_PROPS$E;
 
 /**
@@ -14067,8 +14065,8 @@ const InlineList = forwardRef((props, ref) => {
     items: Children.toArray(children)
   });
 });
-InlineList.displayName = COMPONENT_NAME$I;
-InlineList.className = CLASSNAME$J;
+InlineList.displayName = COMPONENT_NAME$J;
+InlineList.className = CLASSNAME$K;
 InlineList.defaultProps = DEFAULT_PROPS$E;
 
 /**
@@ -14112,16 +14110,16 @@ InputLabel.defaultProps = InputLabel$1.defaultProps;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$H = 'Lightbox';
+const COMPONENT_NAME$I = 'Lightbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$I = 'lumx-lightbox';
+const CLASSNAME$J = 'lumx-lightbox';
 const {
-  block: block$z,
+  block: block$A,
   element: element$r
-} = bem(CLASSNAME$I);
+} = bem(CLASSNAME$J);
 
 /**
  * Lightbox component.
@@ -14168,7 +14166,7 @@ const Lightbox$1 = props => {
       "aria-modal": "true",
       role: "dialog",
       tabIndex: -1,
-      className: classnames(className, block$z({
+      className: classnames(className, block$A({
         'is-hidden': !isOpen,
         'is-shown': isOpen || isVisible,
         [`theme-${theme}`]: Boolean(theme)
@@ -14233,7 +14231,7 @@ const Lightbox = forwardRef((props, ref) => {
     zIndex,
     ...forwardedProps
   } = props;
-  if (!DOCUMENT$1) {
+  if (!DOCUMENT) {
     // Can't render in SSR.
     return null;
   }
@@ -14305,8 +14303,8 @@ const Lightbox = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-Lightbox.displayName = COMPONENT_NAME$H;
-Lightbox.className = CLASSNAME$I;
+Lightbox.displayName = COMPONENT_NAME$I;
+Lightbox.className = CLASSNAME$J;
 
 /**
  * Defines the props of the component.
@@ -14315,15 +14313,15 @@ Lightbox.className = CLASSNAME$I;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$G = 'Link';
+const COMPONENT_NAME$H = 'Link';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$H = 'lumx-link';
+const CLASSNAME$I = 'lumx-link';
 const {
-  block: block$y
-} = bem(CLASSNAME$H);
+  block: block$z
+} = bem(CLASSNAME$I);
 
 /**
  * Link component.
@@ -14352,7 +14350,7 @@ const Link$1 = props => {
     ...forwardedProps,
     handleClick,
     children,
-    className: classnames(className, block$y({
+    className: classnames(className, block$z({
       [`color-${color}`]: Boolean(color),
       [`color-variant-${colorVariant}`]: Boolean(colorVariant),
       'has-typography': !!typography$1
@@ -14362,7 +14360,7 @@ const Link$1 = props => {
 
 const {
   element: element$q
-} = classNames.bem(CLASSNAME$H);
+} = classNames.bem(CLASSNAME$I);
 
 /**
  * Defines the props of the component.
@@ -14408,22 +14406,22 @@ const Link = forwardRef((props, ref) => {
     }))
   });
 });
-Link.displayName = COMPONENT_NAME$G;
-Link.className = CLASSNAME$H;
+Link.displayName = COMPONENT_NAME$H;
+Link.className = CLASSNAME$I;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$F = 'LinkPreview';
+const COMPONENT_NAME$G = 'LinkPreview';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$G = 'lumx-link-preview';
+const CLASSNAME$H = 'lumx-link-preview';
 const {
-  block: block$x,
+  block: block$y,
   element: element$p
-} = bem(CLASSNAME$G);
+} = bem(CLASSNAME$H);
 
 /**
  * Component default props.
@@ -14462,7 +14460,7 @@ const LinkPreview$1 = props => {
   return /*#__PURE__*/jsx("article", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$x({
+    className: classnames(className, block$y({
       [`size-${adjustedSize}`]: Boolean(adjustedSize),
       [`theme-${theme}`]: Boolean(theme)
     })),
@@ -14549,8 +14547,8 @@ const LinkPreview = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-LinkPreview.displayName = COMPONENT_NAME$F;
-LinkPreview.className = CLASSNAME$G;
+LinkPreview.displayName = COMPONENT_NAME$G;
+LinkPreview.className = CLASSNAME$H;
 LinkPreview.defaultProps = DEFAULT_PROPS$D;
 
 /**
@@ -14582,8 +14580,8 @@ const ListItemAction = Object.assign(forwardRefPolymorphic((props, ref) => {
     children
   });
 }), {
-  displayName: COMPONENT_NAME$1a,
-  className: CLASSNAME$19,
+  displayName: COMPONENT_NAME$1b,
+  className: CLASSNAME$1a,
   defaultProps: DEFAULT_PROPS$W
 });
 
@@ -14622,8 +14620,8 @@ const _ListItem = forwardRef((props, ref) => {
     handleClick: onItemSelected || props.onClick ? handleClick : undefined
   });
 });
-_ListItem.displayName = COMPONENT_NAME$1b;
-_ListItem.className = CLASSNAME$1a;
+_ListItem.displayName = COMPONENT_NAME$1c;
+_ListItem.className = CLASSNAME$1b;
 _ListItem.defaultProps = DEFAULT_PROPS$X;
 
 /**
@@ -14637,12 +14635,12 @@ const ListItem = Object.assign(_ListItem, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$E = 'ListSubheader';
+const COMPONENT_NAME$F = 'ListSubheader';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$F = 'lumx-list-subheader';
+const CLASSNAME$G = 'lumx-list-subheader';
 
 /**
  * ListSubheader component.
@@ -14661,26 +14659,26 @@ const ListSubheader = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("li", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$F),
+    className: classNames.join(className, CLASSNAME$G),
     children: children
   });
 });
-ListSubheader.displayName = COMPONENT_NAME$E;
-ListSubheader.className = CLASSNAME$F;
+ListSubheader.displayName = COMPONENT_NAME$F;
+ListSubheader.className = CLASSNAME$G;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$D = 'Message';
+const COMPONENT_NAME$E = 'Message';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$E = 'lumx-message';
+const CLASSNAME$F = 'lumx-message';
 const {
-  block: block$w,
+  block: block$x,
   element: element$o
-} = bem(CLASSNAME$E);
+} = bem(CLASSNAME$F);
 
 /**
  * Associative map from message kind to color and icon.
@@ -14733,7 +14731,7 @@ const Message$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ...forwardedProps,
     ref: ref,
-    className: classnames(className, block$w({
+    className: classnames(className, block$x({
       [`color-${color}`]: Boolean(color),
       'has-background': hasBackground
     })),
@@ -14754,8 +14752,8 @@ const Message$1 = props => {
     })]
   });
 };
-Message$1.displayName = COMPONENT_NAME$D;
-Message$1.className = CLASSNAME$E;
+Message$1.displayName = COMPONENT_NAME$E;
+Message$1.className = CLASSNAME$F;
 
 /**
  * Message component.
@@ -14770,22 +14768,22 @@ const Message = forwardRef((props, ref) => {
     ref
   });
 });
-Message.displayName = COMPONENT_NAME$D;
-Message.className = CLASSNAME$E;
+Message.displayName = COMPONENT_NAME$E;
+Message.className = CLASSNAME$F;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$C = 'Mosaic';
+const COMPONENT_NAME$D = 'Mosaic';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$D = 'lumx-mosaic';
+const CLASSNAME$E = 'lumx-mosaic';
 const {
-  block: block$v,
+  block: block$w,
   element: element$n
-} = bem(CLASSNAME$D);
+} = bem(CLASSNAME$E);
 
 /**
  * Component default props.
@@ -14819,7 +14817,7 @@ const Mosaic$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$v({
+    className: classnames(className, block$w({
       [`theme-${theme}`]: Boolean(theme),
       'has-1-thumbnail': thumbnails?.length === 1,
       'has-2-thumbnails': thumbnails?.length === 2,
@@ -14883,8 +14881,8 @@ const Mosaic = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-Mosaic.displayName = COMPONENT_NAME$C;
-Mosaic.className = CLASSNAME$D;
+Mosaic.displayName = COMPONENT_NAME$D;
+Mosaic.className = CLASSNAME$E;
 Mosaic.defaultProps = DEFAULT_PROPS$C;
 
 const NavigationContext = /*#__PURE__*/createContext({
@@ -14904,16 +14902,16 @@ const ITEM_CLASSNAME = 'lumx-navigation-item';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$B = 'NavigationSection';
+const COMPONENT_NAME$C = 'NavigationSection';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$C = 'lumx-navigation-section';
+const CLASSNAME$D = 'lumx-navigation-section';
 const {
   block: sectionBlock,
   element: sectionElement
-} = classNames.bem(CLASSNAME$C);
+} = classNames.bem(CLASSNAME$D);
 const {
   block: itemBlock,
   element: itemElement
@@ -14999,11 +14997,11 @@ const NavigationSection = forwardRef((props, ref) => {
     }))]
   });
 });
-NavigationSection.displayName = COMPONENT_NAME$B;
-NavigationSection.className = CLASSNAME$C;
+NavigationSection.displayName = COMPONENT_NAME$C;
+NavigationSection.className = CLASSNAME$D;
 
 const {
-  block: block$u,
+  block: block$v,
   element: element$m
 } = classNames.bem(ITEM_CLASSNAME);
 
@@ -15028,7 +15026,7 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
     labelRef
   } = useOverflowTooltipLabel(label);
   return /*#__PURE__*/jsx("li", {
-    className: classNames.join(className, block$u({
+    className: classNames.join(className, block$v({
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: /*#__PURE__*/jsx(Tooltip, {
@@ -15069,16 +15067,16 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$A = 'Navigation';
+const COMPONENT_NAME$B = 'Navigation';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$B = 'lumx-navigation';
+const CLASSNAME$C = 'lumx-navigation';
 const {
-  block: block$t,
+  block: block$u,
   element: element$l
-} = classNames.bem(CLASSNAME$B);
+} = classNames.bem(CLASSNAME$C);
 
 /**
  * Component default props
@@ -15098,7 +15096,7 @@ const Navigation = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx(ThemeProvider, {
     value: theme,
     children: /*#__PURE__*/jsx("nav", {
-      className: classNames.join(className, block$t({
+      className: classNames.join(className, block$u({
         [`theme-${theme}`]: Boolean(theme),
         [`orientation-${orientation}`]: Boolean(orientation)
       })),
@@ -15116,8 +15114,8 @@ const Navigation = forwardRef((props, ref) => {
     })
   });
 });
-Navigation.displayName = COMPONENT_NAME$A;
-Navigation.className = CLASSNAME$B;
+Navigation.displayName = COMPONENT_NAME$B;
+Navigation.className = CLASSNAME$C;
 Navigation.defaultProps = DEFAULT_PROPS$B;
 
 // Sub components
@@ -15149,16 +15147,16 @@ const NOTIFICATION_CONFIGURATION = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$z = 'Notification';
+const COMPONENT_NAME$A = 'Notification';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$A = 'lumx-notification';
+const CLASSNAME$B = 'lumx-notification';
 const {
-  block: block$s,
+  block: block$t,
   element: element$k
-} = classNames.bem(CLASSNAME$A);
+} = classNames.bem(CLASSNAME$B);
 
 /**
  * Component default props.
@@ -15192,7 +15190,7 @@ const Notification = forwardRef((props, ref) => {
     style,
     ...forwardedProps
   } = props;
-  if (!DOCUMENT$1) {
+  if (!DOCUMENT) {
     // Can't render in SSR.
     return null;
   }
@@ -15218,7 +15216,7 @@ const Notification = forwardRef((props, ref) => {
       ref: mergeRefs(ref, rootRef),
       role: "alert",
       ...forwardedProps,
-      className: classNames.join(className, block$s({
+      className: classNames.join(className, block$t({
         [`color-${color}`]: Boolean(color),
         'has-action': hasAction,
         'is-hidden': !isOpen
@@ -15251,8 +15249,8 @@ const Notification = forwardRef((props, ref) => {
     })
   });
 });
-Notification.displayName = COMPONENT_NAME$z;
-Notification.className = CLASSNAME$A;
+Notification.displayName = COMPONENT_NAME$A;
+Notification.className = CLASSNAME$B;
 Notification.defaultProps = DEFAULT_PROPS$A;
 
 /**
@@ -15263,12 +15261,12 @@ Notification.defaultProps = DEFAULT_PROPS$A;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$y = 'PopoverDialog';
+const COMPONENT_NAME$z = 'PopoverDialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$z = 'lumx-popover-dialog';
+const CLASSNAME$A = 'lumx-popover-dialog';
 
 /**
  * Component default props.
@@ -15294,7 +15292,7 @@ const PopoverDialog = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx(Popover, {
     ...forwardedProps,
     ref: ref,
-    className: classNames.join(className, CLASSNAME$z),
+    className: classNames.join(className, CLASSNAME$A),
     role: "dialog",
     "aria-modal": "true"
     /**
@@ -15311,23 +15309,23 @@ const PopoverDialog = forwardRef((props, ref) => {
     })
   });
 });
-PopoverDialog.displayName = COMPONENT_NAME$y;
-PopoverDialog.className = CLASSNAME$z;
+PopoverDialog.displayName = COMPONENT_NAME$z;
+PopoverDialog.className = CLASSNAME$A;
 PopoverDialog.defaultProps = DEFAULT_PROPS$z;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$x = 'PostBlock';
+const COMPONENT_NAME$y = 'PostBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$y = 'lumx-post-block';
+const CLASSNAME$z = 'lumx-post-block';
 const {
-  block: block$r,
+  block: block$s,
   element: element$j
-} = classNames.bem(CLASSNAME$y);
+} = classNames.bem(CLASSNAME$z);
 
 /**
  * Component default props.
@@ -15362,7 +15360,7 @@ const PostBlock = forwardRef((props, ref) => {
   } = props;
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: classNames.join(className, block$r({
+    className: classNames.join(className, block$s({
       [`orientation-${orientation}`]: Boolean(orientation),
       [`theme-${theme}`]: Boolean(theme)
     })),
@@ -15412,23 +15410,23 @@ const PostBlock = forwardRef((props, ref) => {
     })]
   });
 });
-PostBlock.displayName = COMPONENT_NAME$x;
-PostBlock.className = CLASSNAME$y;
+PostBlock.displayName = COMPONENT_NAME$y;
+PostBlock.className = CLASSNAME$z;
 PostBlock.defaultProps = DEFAULT_PROPS$y;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$w = 'ProgressLinear';
+const COMPONENT_NAME$x = 'ProgressLinear';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$x = 'lumx-progress-linear';
+const CLASSNAME$y = 'lumx-progress-linear';
 const {
-  block: block$q,
+  block: block$r,
   element: element$i
-} = bem(CLASSNAME$x);
+} = bem(CLASSNAME$y);
 
 /**
  * Component default props.
@@ -15451,7 +15449,7 @@ const ProgressLinear$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$q({
+    className: classnames(className, block$r({
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsx("div", {
@@ -15485,8 +15483,8 @@ const ProgressLinear = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-ProgressLinear.displayName = COMPONENT_NAME$w;
-ProgressLinear.className = CLASSNAME$x;
+ProgressLinear.displayName = COMPONENT_NAME$x;
+ProgressLinear.className = CLASSNAME$y;
 ProgressLinear.defaultProps = DEFAULT_PROPS$x;
 
 /* eslint-disable react/no-unknown-property */
@@ -15494,16 +15492,16 @@ ProgressLinear.defaultProps = DEFAULT_PROPS$x;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$v = 'ProgressCircular';
+const COMPONENT_NAME$w = 'ProgressCircular';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$w = 'lumx-progress-circular';
+const CLASSNAME$x = 'lumx-progress-circular';
 const {
-  block: block$p,
+  block: block$q,
   element: element$h
-} = bem(CLASSNAME$w);
+} = bem(CLASSNAME$x);
 
 /**
  * Component default props.
@@ -15534,7 +15532,7 @@ const ProgressCircular$1 = props => {
   return /*#__PURE__*/jsxs(Element, {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$p({
+    className: classnames(className, block$q({
       [`theme-${theme}`]: Boolean(theme),
       [`size-${size}`]: Boolean(size),
       [`display-${display}`]: Boolean(display)
@@ -15587,8 +15585,8 @@ const ProgressCircular = forwardRef((props, ref) => {
     }
   });
 });
-ProgressCircular.displayName = COMPONENT_NAME$v;
-ProgressCircular.className = CLASSNAME$w;
+ProgressCircular.displayName = COMPONENT_NAME$w;
+ProgressCircular.className = CLASSNAME$x;
 ProgressCircular.defaultProps = DEFAULT_PROPS$w;
 
 const ProgressVariant = {
@@ -15603,15 +15601,15 @@ const ProgressVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$u = 'Progress';
+const COMPONENT_NAME$v = 'Progress';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$v = 'lumx-progress';
+const CLASSNAME$w = 'lumx-progress';
 const {
-  block: block$o
-} = classNames.bem(CLASSNAME$v);
+  block: block$p
+} = classNames.bem(CLASSNAME$w);
 
 /**
  * Component default props.
@@ -15639,7 +15637,7 @@ const Progress = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$o({
+    className: classNames.join(className, block$p({
       [`theme-${theme}`]: Boolean(theme),
       [`variant-${variant}`]: Boolean(variant)
     })),
@@ -15650,8 +15648,8 @@ const Progress = forwardRef((props, ref) => {
     })]
   });
 });
-Progress.displayName = COMPONENT_NAME$u;
-Progress.className = CLASSNAME$v;
+Progress.displayName = COMPONENT_NAME$v;
+Progress.className = CLASSNAME$w;
 Progress.defaultProps = DEFAULT_PROPS$v;
 
 const INIT_STATE = {
@@ -15835,16 +15833,16 @@ ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$u;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$t = 'ProgressTracker';
+const COMPONENT_NAME$u = 'ProgressTracker';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$u = 'lumx-progress-tracker';
+const CLASSNAME$v = 'lumx-progress-tracker';
 const {
-  block: block$n,
+  block: block$o,
   element: element$g
-} = classNames.bem(CLASSNAME$u);
+} = classNames.bem(CLASSNAME$v);
 
 /**
  * Component default props.
@@ -15879,7 +15877,7 @@ const ProgressTracker = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: mergeRefs(ref, stepListRef),
     ...forwardedProps,
-    className: classNames.join(className, block$n()),
+    className: classNames.join(className, block$o()),
     children: [/*#__PURE__*/jsx("div", {
       className: element$g('steps'),
       role: "tablist",
@@ -15901,23 +15899,23 @@ const ProgressTracker = forwardRef((props, ref) => {
     })]
   });
 });
-ProgressTracker.displayName = COMPONENT_NAME$t;
-ProgressTracker.className = CLASSNAME$u;
+ProgressTracker.displayName = COMPONENT_NAME$u;
+ProgressTracker.className = CLASSNAME$v;
 ProgressTracker.defaultProps = DEFAULT_PROPS$t;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$s = 'ProgressTrackerStep';
+const COMPONENT_NAME$t = 'ProgressTrackerStep';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$t = 'lumx-progress-tracker-step';
+const CLASSNAME$u = 'lumx-progress-tracker-step';
 const {
-  block: block$m,
+  block: block$n,
   element: element$f
-} = classNames.bem(CLASSNAME$t);
+} = classNames.bem(CLASSNAME$u);
 
 /**
  * Component default props.
@@ -15986,7 +15984,7 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
     ...forwardedProps,
     type: "button",
     id: state?.tabId,
-    className: classNames.join(className, block$m({
+    className: classNames.join(className, block$n({
       'has-error': hasError,
       'is-active': isActive,
       'is-clickable': state && !isAnyDisabled,
@@ -16015,22 +16013,22 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
     })]
   });
 });
-ProgressTrackerStep.displayName = COMPONENT_NAME$s;
-ProgressTrackerStep.className = CLASSNAME$t;
+ProgressTrackerStep.displayName = COMPONENT_NAME$t;
+ProgressTrackerStep.className = CLASSNAME$u;
 ProgressTrackerStep.defaultProps = DEFAULT_PROPS$s;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$r = 'ProgressTrackerStepPanel';
+const COMPONENT_NAME$s = 'ProgressTrackerStepPanel';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$s = `lumx-step-panel`;
+const CLASSNAME$t = `lumx-step-panel`;
 const {
-  block: block$l
-} = classNames.bem(CLASSNAME$s);
+  block: block$m
+} = classNames.bem(CLASSNAME$t);
 
 /**
  * Component default props.
@@ -16060,7 +16058,7 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
     ref: ref,
     ...forwardedProps,
     id: state?.tabPanelId,
-    className: classNames.join(className, block$l({
+    className: classNames.join(className, block$m({
       'is-active': isActive
     })),
     role: "tabpanel",
@@ -16069,23 +16067,23 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
     children: (!state?.isLazy || isActive) && children
   });
 });
-ProgressTrackerStepPanel.displayName = COMPONENT_NAME$r;
-ProgressTrackerStepPanel.className = CLASSNAME$s;
+ProgressTrackerStepPanel.displayName = COMPONENT_NAME$s;
+ProgressTrackerStepPanel.className = CLASSNAME$t;
 ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$r;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$q = 'RadioButton';
+const COMPONENT_NAME$r = 'RadioButton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$r = 'lumx-radio-button';
+const CLASSNAME$s = 'lumx-radio-button';
 const {
-  block: block$k,
+  block: block$l,
   element: element$e
-} = bem(CLASSNAME$r);
+} = bem(CLASSNAME$s);
 
 /**
  * RadioButton component.
@@ -16120,7 +16118,7 @@ const RadioButton$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$k({
+    className: classnames(className, block$l({
       'is-checked': isChecked,
       'is-disabled': isDisabled,
       'is-unchecked': !isChecked,
@@ -16228,19 +16226,19 @@ const RadioButton = forwardRef((props, ref) => {
     inputId
   });
 });
-RadioButton.displayName = COMPONENT_NAME$q;
-RadioButton.className = CLASSNAME$r;
+RadioButton.displayName = COMPONENT_NAME$r;
+RadioButton.className = CLASSNAME$s;
 RadioButton.defaultProps = DEFAULT_PROPS$q;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$p = 'RadioGroup';
+const COMPONENT_NAME$q = 'RadioGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$q = 'lumx-radio-group';
+const CLASSNAME$r = 'lumx-radio-group';
 
 /**
  * Component default props.
@@ -16263,12 +16261,12 @@ const RadioGroup$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$q),
+    className: classnames(className, CLASSNAME$r),
     children: children
   });
 };
-RadioGroup$1.displayName = COMPONENT_NAME$p;
-RadioGroup$1.className = CLASSNAME$q;
+RadioGroup$1.displayName = COMPONENT_NAME$q;
+RadioGroup$1.className = CLASSNAME$r;
 RadioGroup$1.defaultProps = DEFAULT_PROPS$p;
 
 /**
@@ -16295,8 +16293,8 @@ const RadioGroup = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-RadioGroup.displayName = COMPONENT_NAME$p;
-RadioGroup.className = CLASSNAME$q;
+RadioGroup.displayName = COMPONENT_NAME$q;
+RadioGroup.className = CLASSNAME$r;
 
 /**
  * Listen on element focus to store the focus status.
@@ -16323,11 +16321,11 @@ function useListenFocus(ref) {
 }
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME$p = 'lumx-select';
+const CLASSNAME$q = 'lumx-select';
 const {
-  block: block$j,
+  block: block$k,
   element: element$d
-} = classNames.bem(CLASSNAME$p);
+} = classNames.bem(CLASSNAME$q);
 const WithSelectContext = (SelectElement, props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
@@ -16380,7 +16378,7 @@ const WithSelectContext = (SelectElement, props, ref) => {
   useFocusTrap(isOpen && dropdownRef.current, focusElement?.current);
   return /*#__PURE__*/jsxs("div", {
     ref: mergeRefs(ref, selectRef),
-    className: classNames.join(className, block$j({
+    className: classNames.join(className, block$k({
       'has-error': hasError,
       'has-label': Boolean(label),
       'has-placeholder': Boolean(placeholder),
@@ -16443,14 +16441,14 @@ const SelectVariant = {
 };
 
 /** The display name of the component. */
-const COMPONENT_NAME$o = 'Select';
+const COMPONENT_NAME$p = 'Select';
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME$o = 'lumx-select';
+const CLASSNAME$p = 'lumx-select';
 const {
-  block: block$i,
+  block: block$j,
   element: element$c
-} = classNames.bem(CLASSNAME$o);
+} = classNames.bem(CLASSNAME$p);
 
 /** The default value of props. */
 const DEFAULT_PROPS$o = {
@@ -16579,7 +16577,7 @@ const Select = forwardRef((props, ref) => {
   return WithSelectContext(SelectField, {
     ...DEFAULT_PROPS$o,
     ...props,
-    className: classNames.join(props.className, block$i({
+    className: classNames.join(props.className, block$j({
       'has-input-clear': hasInputClear,
       'has-unique': !props.isEmpty
     })),
@@ -16587,20 +16585,20 @@ const Select = forwardRef((props, ref) => {
     isEmpty: isEmpty$1
   }, ref);
 });
-Select.displayName = COMPONENT_NAME$o;
-Select.className = CLASSNAME$o;
+Select.displayName = COMPONENT_NAME$p;
+Select.className = CLASSNAME$p;
 Select.defaultProps = DEFAULT_PROPS$o;
-Select.className = CLASSNAME$o;
+Select.className = CLASSNAME$p;
 
 /** The display name of the component. */
-const COMPONENT_NAME$n = 'Select';
+const COMPONENT_NAME$o = 'Select';
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME$n = 'lumx-select';
+const CLASSNAME$o = 'lumx-select';
 const {
-  block: block$h,
+  block: block$i,
   element: element$b
-} = classNames.bem(CLASSNAME$n);
+} = classNames.bem(CLASSNAME$o);
 
 /** The default value of props. */
 const DEFAULT_PROPS$n = {
@@ -16684,13 +16682,13 @@ const SelectMultipleField = props => {
             children: placeholder
           })
         }), (isValid || hasError) && /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$n}__input-validity`,
+          className: `${CLASSNAME$o}__input-validity`,
           children: /*#__PURE__*/jsx(Icon, {
             icon: isValid ? mdiCheckCircle : mdiAlertCircle,
             size: Size$1.xxs
           })
         }), /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$n}__input-indicator`,
+          className: `${CLASSNAME$o}__input-indicator`,
           children: /*#__PURE__*/jsx(Icon, {
             icon: mdiMenuDown,
             size: Size$1.s
@@ -16734,15 +16732,15 @@ const SelectMultiple = forwardRef((props, ref) => {
   return WithSelectContext(SelectMultipleField, {
     ...DEFAULT_PROPS$n,
     ...props,
-    className: classNames.join(props.className, block$h({
+    className: classNames.join(props.className, block$i({
       'has-multiple': !props.isEmpty
     })),
     isEmpty: props.value.length === 0,
     isMultiple: true
   }, ref);
 });
-SelectMultiple.displayName = COMPONENT_NAME$n;
-SelectMultiple.className = CLASSNAME$n;
+SelectMultiple.displayName = COMPONENT_NAME$o;
+SelectMultiple.className = CLASSNAME$o;
 SelectMultiple.defaultProps = DEFAULT_PROPS$n;
 
 /**
@@ -16876,12 +16874,12 @@ function renderSelectOptions(props, components) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$m = 'SelectButton';
+const COMPONENT_NAME$n = 'SelectButton';
 
 /**
  * Component default class name.
  */
-const CLASSNAME$m = 'lumx-select-button';
+const CLASSNAME$n = 'lumx-select-button';
 
 /**
  * SelectButton core template.
@@ -16979,8 +16977,8 @@ const SelectButton$2 = (props, {
     })]
   });
 };
-SelectButton$2.displayName = COMPONENT_NAME$m;
-SelectButton$2.className = CLASSNAME$m;
+SelectButton$2.displayName = COMPONENT_NAME$n;
+SelectButton$2.className = CLASSNAME$n;
 
 /**
  * Adapts a React `renderOption` callback returning a `<Combobox.Option>` into the
@@ -17185,12 +17183,12 @@ function getOptionDisplayName(value, getOptionName, getOptionId) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$l = 'SelectTextField';
+const COMPONENT_NAME$m = 'SelectTextField';
 
 /**
  * Component default class name.
  */
-const CLASSNAME$l = 'lumx-select-text-field';
+const CLASSNAME$m = 'lumx-select-text-field';
 
 /**
  * SelectTextField core template.
@@ -17285,8 +17283,8 @@ const SelectTextField$2 = (props, {
     })]
   });
 };
-SelectTextField$2.displayName = COMPONENT_NAME$l;
-SelectTextField$2.className = CLASSNAME$l;
+SelectTextField$2.displayName = COMPONENT_NAME$m;
+SelectTextField$2.className = CLASSNAME$m;
 
 /**
  * A text field with a select dropdown to choose between a list of options.
@@ -17420,13 +17418,18 @@ const SelectTextField$1 = props => {
     externalOnClear?.(event);
   }, [onChange, onSearch, externalOnClear]);
 
-  // Handle blur: reset input to selected value name, then call consumer's onBlur.
+  // Handle blur: notify consumer, then reset search state.
   const handleBlur = useCallback(event => {
-    setIsSearching(false);
-    setSearchText('');
     onSearch?.('');
     externalOnBlur?.(event);
-  }, [externalOnBlur, onSearch]);
+    if (externalSearchValue) {
+      setSearchText(externalSearchValue);
+      setIsSearching(true);
+    } else {
+      setSearchText('');
+      setIsSearching(false);
+    }
+  }, [externalOnBlur, externalSearchValue, onSearch]);
   const showClear = !isMultiple && !isAnyDisabled && hasClearButton && value !== undefined && value !== null;
   const chips = isMultiple ? /*#__PURE__*/jsx(SelectionChipGroup, {
     value: value,
@@ -17532,12 +17535,12 @@ const SelectTextField = Object.assign(SelectTextField$1, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$k = 'SideNavigation';
+const COMPONENT_NAME$l = 'SideNavigation';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$k = 'lumx-side-navigation';
+const CLASSNAME$l = 'lumx-side-navigation';
 
 /**
  * SideNavigation component.
@@ -17558,26 +17561,26 @@ const SideNavigation = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("ul", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, theme === Theme$1.dark && 'lumx-color-font-light-N', CLASSNAME$k),
+    className: classNames.join(className, theme === Theme$1.dark && 'lumx-color-font-light-N', CLASSNAME$l),
     children: content
   });
 });
-SideNavigation.displayName = COMPONENT_NAME$k;
-SideNavigation.className = CLASSNAME$k;
+SideNavigation.displayName = COMPONENT_NAME$l;
+SideNavigation.className = CLASSNAME$l;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$j = 'SideNavigationItem';
+const COMPONENT_NAME$k = 'SideNavigationItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$j = 'lumx-side-navigation-item';
+const CLASSNAME$k = 'lumx-side-navigation-item';
 const {
-  block: block$g,
+  block: block$h,
   element: element$a
-} = classNames.bem(CLASSNAME$j);
+} = classNames.bem(CLASSNAME$k);
 
 /**
  * Component default props.
@@ -17625,7 +17628,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("li", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$g({
+    className: classNames.join(className, block$h({
       [`emphasis-${emphasis}`]: Boolean(emphasis),
       'is-open': showChildren,
       'is-selected': isSelected
@@ -17683,22 +17686,22 @@ const SideNavigationItem = forwardRef((props, ref) => {
     })]
   });
 });
-SideNavigationItem.displayName = COMPONENT_NAME$j;
-SideNavigationItem.className = CLASSNAME$j;
+SideNavigationItem.displayName = COMPONENT_NAME$k;
+SideNavigationItem.className = CLASSNAME$k;
 SideNavigationItem.defaultProps = DEFAULT_PROPS$m;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$i = 'SkeletonCircle';
+const COMPONENT_NAME$j = 'SkeletonCircle';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$i = 'lumx-skeleton-circle';
+const CLASSNAME$j = 'lumx-skeleton-circle';
 const {
-  block: block$f
-} = bem(CLASSNAME$i);
+  block: block$g
+} = bem(CLASSNAME$j);
 
 /**
  * SkeletonCircle component.
@@ -17718,7 +17721,7 @@ const SkeletonCircle$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$f({
+    className: classnames(className, block$g({
       [`size-${size}`]: Boolean(size),
       [`color-${color}`]: Boolean(color),
       [`theme-${theme}`]: Boolean(theme)
@@ -17742,16 +17745,16 @@ const SkeletonRectangleVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$h = 'SkeletonRectangle';
+const COMPONENT_NAME$i = 'SkeletonRectangle';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$h = 'lumx-skeleton-rectangle';
+const CLASSNAME$i = 'lumx-skeleton-rectangle';
 const {
-  block: block$e,
+  block: block$f,
   element: element$9
-} = bem(CLASSNAME$h);
+} = bem(CLASSNAME$i);
 
 /**
  * Component default props.
@@ -17781,7 +17784,7 @@ const SkeletonRectangle$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$e({
+    className: classnames(className, block$f({
       [`aspect-ratio-${aspectRatio}`]: Boolean(aspectRatio),
       [`height-${height}`]: Boolean(aspectRatio ? undefined : height),
       [`theme-${theme}`]: Boolean(theme),
@@ -17826,9 +17829,9 @@ const SkeletonCircle = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-SkeletonCircle.displayName = COMPONENT_NAME$i;
+SkeletonCircle.displayName = COMPONENT_NAME$j;
 SkeletonCircle.defaultProps = DEFAULT_PROPS$k;
-SkeletonCircle.className = CLASSNAME$i;
+SkeletonCircle.className = CLASSNAME$j;
 
 /**
  * Defines the props of the component.
@@ -17867,8 +17870,8 @@ const SkeletonRectangle = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-SkeletonRectangle.displayName = COMPONENT_NAME$h;
-SkeletonRectangle.className = CLASSNAME$h;
+SkeletonRectangle.displayName = COMPONENT_NAME$i;
+SkeletonRectangle.className = CLASSNAME$i;
 SkeletonRectangle.defaultProps = DEFAULT_PROPS$j;
 
 /**
@@ -17904,9 +17907,9 @@ const SkeletonTypography = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-SkeletonTypography.displayName = COMPONENT_NAME$15;
+SkeletonTypography.displayName = COMPONENT_NAME$16;
 SkeletonTypography.defaultProps = DEFAULT_PROPS$i;
-SkeletonTypography.className = CLASSNAME$14;
+SkeletonTypography.className = CLASSNAME$15;
 
 /**
  * Clamp value in range.
@@ -17930,16 +17933,16 @@ const clamp = (value, min, max) => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$g = 'Slider';
+const COMPONENT_NAME$h = 'Slider';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$g = 'lumx-slider';
+const CLASSNAME$h = 'lumx-slider';
 const {
-  block: block$d,
+  block: block$e,
   element: element$8
-} = classNames.bem(CLASSNAME$g);
+} = classNames.bem(CLASSNAME$h);
 
 /**
  * Component default props.
@@ -18132,7 +18135,7 @@ const Slider = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$d({
+    className: classNames.join(className, block$e({
       [`theme-${theme}`]: Boolean(theme),
       'has-label': Boolean(label)
     })),
@@ -18197,8 +18200,8 @@ const Slider = forwardRef((props, ref) => {
     })]
   });
 });
-Slider.displayName = COMPONENT_NAME$g;
-Slider.className = CLASSNAME$g;
+Slider.displayName = COMPONENT_NAME$h;
+Slider.className = CLASSNAME$h;
 Slider.defaultProps = DEFAULT_PROPS$h;
 
 /**
@@ -18532,12 +18535,12 @@ const useSlideFocusManagement = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$f = 'SlideshowItemGroup';
+const COMPONENT_NAME$g = 'SlideshowItemGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$f = 'lumx-slideshow-item-group';
+const CLASSNAME$g = 'lumx-slideshow-item-group';
 const buildSlideShowGroupId = (slidesId, index) => `${slidesId}-slide-${index}`;
 
 /**
@@ -18564,15 +18567,15 @@ const SlideshowItemGroup = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: mergeRefs(groupRef, ref),
     role: role,
-    className: classNames.join(className, CLASSNAME$f),
+    className: classNames.join(className, CLASSNAME$g),
     "aria-roledescription": "slide",
     "aria-label": label,
     ...forwardedProps,
     children: children
   });
 });
-SlideshowItemGroup.displayName = COMPONENT_NAME$f;
-SlideshowItemGroup.className = CLASSNAME$f;
+SlideshowItemGroup.displayName = COMPONENT_NAME$g;
+SlideshowItemGroup.className = CLASSNAME$g;
 
 /**
  * Component default props.
@@ -18702,12 +18705,12 @@ Slideshow.defaultProps = DEFAULT_PROPS$g;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$e = 'SlideshowItem';
+const COMPONENT_NAME$f = 'SlideshowItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$e = 'lumx-slideshow-item';
+const CLASSNAME$f = 'lumx-slideshow-item';
 
 /**
  * SlideshowItem component.
@@ -18724,13 +18727,13 @@ const SlideshowItem = forwardRef((props, ref) => {
   } = props;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
-    className: classNames.join(className, CLASSNAME$e),
+    className: classNames.join(className, CLASSNAME$f),
     ...forwardedProps,
     children: children
   });
 });
-SlideshowItem.displayName = COMPONENT_NAME$e;
-SlideshowItem.className = CLASSNAME$e;
+SlideshowItem.displayName = COMPONENT_NAME$f;
+SlideshowItem.className = CLASSNAME$f;
 
 const isTouchDevice = () => 'ontouchstart' in window;
 
@@ -18792,16 +18795,16 @@ function usePaginationVisibleRange(activeIndex, slideCount) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$d = 'SlideshowControls';
+const COMPONENT_NAME$e = 'SlideshowControls';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$d = 'lumx-slideshow-controls';
+const CLASSNAME$e = 'lumx-slideshow-controls';
 const {
-  block: block$c,
+  block: block$d,
   element: element$7
-} = classNames.bem(CLASSNAME$d);
+} = classNames.bem(CLASSNAME$e);
 
 /**
  * Component default props.
@@ -18871,7 +18874,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$c({
+    className: classNames.join(className, block$d({
       [`theme-${theme}`]: Boolean(theme),
       'has-infinite-pagination': slidesCount > PAGINATION_ITEMS_MAX
     })),
@@ -18932,8 +18935,8 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
     })]
   });
 });
-InternalSlideshowControls.displayName = COMPONENT_NAME$d;
-InternalSlideshowControls.className = CLASSNAME$d;
+InternalSlideshowControls.displayName = COMPONENT_NAME$e;
+InternalSlideshowControls.className = CLASSNAME$e;
 InternalSlideshowControls.defaultProps = DEFAULT_PROPS$f;
 const SlideshowControls = Object.assign(InternalSlideshowControls, {
   useSlideshowControls,
@@ -19052,16 +19055,16 @@ const useSlideScroll = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$c = 'Slideshow';
+const COMPONENT_NAME$d = 'Slideshow';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$c = 'lumx-slideshow';
+const CLASSNAME$d = 'lumx-slideshow';
 const {
-  block: block$b,
+  block: block$c,
   element: element$6
-} = classNames.bem(CLASSNAME$c);
+} = classNames.bem(CLASSNAME$d);
 
 /**
  * Component default props.
@@ -19131,7 +19134,7 @@ const Slides = forwardRef((props, ref) => {
     id: id,
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$b({
+    className: classNames.join(className, block$c({
       [`theme-${theme}`]: Boolean(theme),
       'fill-height': fillHeight,
       [`group-by-${groupBy}`]: Boolean(groupBy)
@@ -19160,22 +19163,22 @@ const Slides = forwardRef((props, ref) => {
     }), afterSlides]
   });
 });
-Slides.displayName = COMPONENT_NAME$c;
-Slides.className = CLASSNAME$c;
+Slides.displayName = COMPONENT_NAME$d;
+Slides.className = CLASSNAME$d;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$b = 'Switch';
+const COMPONENT_NAME$c = 'Switch';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$b = 'lumx-switch';
+const CLASSNAME$c = 'lumx-switch';
 const {
-  block: block$a,
+  block: block$b,
   element: element$5
-} = bem(CLASSNAME$b);
+} = bem(CLASSNAME$c);
 
 /**
  * Component default props.
@@ -19218,7 +19221,7 @@ const Switch$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$a({
+    className: classnames(className, block$b({
       'is-checked': isChecked,
       'is-disabled': isDisabled,
       'is-unchecked': !isChecked,
@@ -19334,23 +19337,23 @@ const Switch = forwardRef((props, ref) => {
     inputId
   });
 });
-Switch.displayName = COMPONENT_NAME$b;
-Switch.className = CLASSNAME$b;
+Switch.displayName = COMPONENT_NAME$c;
+Switch.className = CLASSNAME$c;
 Switch.defaultProps = DEFAULT_PROPS$c;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$a = 'Table';
+const COMPONENT_NAME$b = 'Table';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$a = 'lumx-table';
+const CLASSNAME$b = 'lumx-table';
 
 const {
-  block: block$9
-} = bem(CLASSNAME$a);
+  block: block$a
+} = bem(CLASSNAME$b);
 
 /**
  * Defines the props of the component.
@@ -19380,7 +19383,7 @@ const Table$1 = props => {
   return /*#__PURE__*/jsx("table", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$9({
+    className: classnames(className, block$a({
       'has-before': hasBefore,
       'has-dividers': hasDividers,
       [`theme-${theme}`]: Boolean(theme)
@@ -19414,19 +19417,19 @@ const Table = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-Table.displayName = COMPONENT_NAME$a;
-Table.className = CLASSNAME$a;
+Table.displayName = COMPONENT_NAME$b;
+Table.className = CLASSNAME$b;
 Table.defaultProps = DEFAULT_PROPS$b;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$9 = 'TableBody';
+const COMPONENT_NAME$a = 'TableBody';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$9 = `${CLASSNAME$a}__body`;
+const CLASSNAME$a = `${CLASSNAME$b}__body`;
 
 /**
  * TableBody component.
@@ -19444,7 +19447,7 @@ const TableBody$1 = props => {
   return /*#__PURE__*/jsx("tbody", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$9),
+    className: classnames(className, CLASSNAME$a),
     children: children
   });
 };
@@ -19471,8 +19474,8 @@ const TableBody = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-TableBody.displayName = COMPONENT_NAME$9;
-TableBody.className = CLASSNAME$9;
+TableBody.displayName = COMPONENT_NAME$a;
+TableBody.className = CLASSNAME$a;
 
 const ThOrder = {
   asc: 'asc',
@@ -19493,15 +19496,15 @@ const TableCellVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$8 = 'TableCell';
+const COMPONENT_NAME$9 = 'TableCell';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$8 = `${CLASSNAME$a}__cell`;
+const CLASSNAME$9 = `${CLASSNAME$b}__cell`;
 const {
-  block: block$8
-} = bem(CLASSNAME$8);
+  block: block$9
+} = bem(CLASSNAME$9);
 
 /**
  * Component default props.
@@ -19547,40 +19550,40 @@ const TableCell$1 = props => {
     children: [variant === TableCellVariant.head && /*#__PURE__*/jsx("th", {
       ref: ref,
       ...forwardedProps,
-      className: classnames(className, block$8({
+      className: classnames(className, block$9({
         'is-sortable': isSortable,
         'is-sorted': isSortable && !!sortOrder,
         head: true
       })),
       "aria-sort": ariaSort,
       children: /*#__PURE__*/jsxs(Wrapper, {
-        className: `${CLASSNAME$8}-wrapper`,
+        className: `${CLASSNAME$9}-wrapper`,
         ...wrapperProps,
         children: [icon && !isSortable && Icon$1({
-          className: `${CLASSNAME$8}-icon`,
+          className: `${CLASSNAME$9}-icon`,
           icon,
           size: Size.xxs
         }), isSortable && sortOrder === ThOrder.asc && Icon$1({
-          className: `${CLASSNAME$8}-icon`,
+          className: `${CLASSNAME$9}-icon`,
           icon: mdiArrowUp,
           size: Size.xxs
         }), isSortable && sortOrder === ThOrder.desc && Icon$1({
-          className: `${CLASSNAME$8}-icon`,
+          className: `${CLASSNAME$9}-icon`,
           icon: mdiArrowDown,
           size: Size.xxs
         }), /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$8}-content`,
+          className: `${CLASSNAME$9}-content`,
           children: children
         })]
       })
     }), variant === TableCellVariant.body && /*#__PURE__*/jsx("td", {
       ref: ref,
       ...forwardedProps,
-      className: classnames(className, block$8({
+      className: classnames(className, block$9({
         body: true
       })),
       children: /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$8}-content`,
+        className: `${CLASSNAME$9}-content`,
         children: children
       })
     })]
@@ -19609,19 +19612,19 @@ const TableCell = forwardRef((props, ref) => {
     handleClick: onHeaderClick
   });
 });
-TableCell.displayName = COMPONENT_NAME$8;
-TableCell.className = CLASSNAME$8;
+TableCell.displayName = COMPONENT_NAME$9;
+TableCell.className = CLASSNAME$9;
 TableCell.defaultProps = DEFAULT_PROPS$a;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$7 = 'TableHeader';
+const COMPONENT_NAME$8 = 'TableHeader';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$7 = `${CLASSNAME$a}__header`;
+const CLASSNAME$8 = `${CLASSNAME$b}__header`;
 
 /**
  * Component default props.
@@ -19644,7 +19647,7 @@ const TableHeader$1 = props => {
   return /*#__PURE__*/jsx("thead", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$7),
+    className: classnames(className, CLASSNAME$8),
     children: children
   });
 };
@@ -19671,22 +19674,22 @@ const TableHeader = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-TableHeader.displayName = COMPONENT_NAME$7;
-TableHeader.className = CLASSNAME$7;
+TableHeader.displayName = COMPONENT_NAME$8;
+TableHeader.className = CLASSNAME$8;
 TableHeader.defaultProps = DEFAULT_PROPS$9;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$6 = 'TableRow';
+const COMPONENT_NAME$7 = 'TableRow';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$6 = `${CLASSNAME$a}__row`;
+const CLASSNAME$7 = `${CLASSNAME$b}__row`;
 const {
-  block: block$7
-} = bem(CLASSNAME$6);
+  block: block$8
+} = bem(CLASSNAME$7);
 
 /**
  * Component default props.
@@ -19721,7 +19724,7 @@ const TableRow$1 = props => {
     "aria-disabled": ariaDisabled,
     ...tabIndexProps,
     ...forwardedProps,
-    className: classnames(className, block$7({
+    className: classnames(className, block$8({
       'is-clickable': isClickable && !isDisabled,
       'is-disabled': isDisabled,
       'is-selected': isSelected && !isDisabled
@@ -19761,8 +19764,8 @@ const TableRow = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-TableRow.displayName = COMPONENT_NAME$6;
-TableRow.className = CLASSNAME$6;
+TableRow.displayName = COMPONENT_NAME$7;
+TableRow.className = CLASSNAME$7;
 TableRow.defaultProps = DEFAULT_PROPS$8;
 
 const DEFAULT_PROPS$7 = {
@@ -19833,7 +19836,7 @@ TabProvider.defaultProps = DEFAULT_PROPS$7;
 const TABS_CLASSNAME = `lumx-tabs`;
 
 const {
-  block: block$6,
+  block: block$7,
   element: element$4
 } = bem(TABS_CLASSNAME);
 let TabListLayout = /*#__PURE__*/function (TabListLayout) {
@@ -19849,7 +19852,7 @@ let TabListLayout = /*#__PURE__*/function (TabListLayout) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$5 = 'TabList';
+const COMPONENT_NAME$6 = 'TabList';
 
 /**
  * Component default props.
@@ -19882,7 +19885,7 @@ const TabList$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$6({
+    className: classnames(className, block$7({
       [`layout-${layout}`]: Boolean(layout),
       [`position-${position}`]: Boolean(position),
       [`theme-${theme}`]: Boolean(theme)
@@ -19922,14 +19925,14 @@ const TabList = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-TabList.displayName = COMPONENT_NAME$5;
+TabList.displayName = COMPONENT_NAME$6;
 TabList.className = TABS_CLASSNAME;
 TabList.defaultProps = DEFAULT_PROPS$6;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$4 = 'Tab';
+const COMPONENT_NAME$5 = 'Tab';
 
 /**
  * Component default props.
@@ -19939,10 +19942,10 @@ const DEFAULT_PROPS$5 = {};
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$5 = `${TABS_CLASSNAME}__link`;
+const CLASSNAME$6 = `${TABS_CLASSNAME}__link`;
 const {
-  block: block$5
-} = bem(CLASSNAME$5);
+  block: block$6
+} = bem(CLASSNAME$6);
 
 /**
  * Tab component.
@@ -20001,7 +20004,7 @@ const Tab$1 = props => {
     ...forwardedProps,
     type: "button",
     id: tabId,
-    className: classnames(className, block$5({
+    className: classnames(className, block$6({
       'is-active': isActive,
       'is-disabled': isAnyDisabled
     })),
@@ -20069,22 +20072,22 @@ const Tab = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-Tab.displayName = COMPONENT_NAME$4;
-Tab.className = CLASSNAME$5;
+Tab.displayName = COMPONENT_NAME$5;
+Tab.className = CLASSNAME$6;
 Tab.defaultProps = DEFAULT_PROPS$5;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$3 = 'TabPanel';
+const COMPONENT_NAME$4 = 'TabPanel';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$4 = `lumx-tab-panel`;
+const CLASSNAME$5 = `lumx-tab-panel`;
 const {
-  block: block$4
-} = bem(CLASSNAME$4);
+  block: block$5
+} = bem(CLASSNAME$5);
 
 /**
  * Component default props.
@@ -20116,7 +20119,7 @@ const TabPanel$1 = props => {
     ref: ref,
     ...forwardedProps,
     id: id,
-    className: classnames(className, block$4({
+    className: classnames(className, block$5({
       'is-active': isActive
     })),
     role: "tabpanel",
@@ -20156,8 +20159,8 @@ const TabPanel = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-TabPanel.displayName = COMPONENT_NAME$3;
-TabPanel.className = CLASSNAME$4;
+TabPanel.displayName = COMPONENT_NAME$4;
+TabPanel.className = CLASSNAME$5;
 TabPanel.defaultProps = DEFAULT_PROPS$4;
 
 /**
@@ -20307,16 +20310,16 @@ function calculateFocusPointStyle({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$2 = 'Thumbnail';
+const COMPONENT_NAME$3 = 'Thumbnail';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$3 = 'lumx-thumbnail';
+const CLASSNAME$4 = 'lumx-thumbnail';
 const {
-  block: block$3,
+  block: block$4,
   element: element$3
-} = classNames.bem(CLASSNAME$3);
+} = classNames.bem(CLASSNAME$4);
 
 /**
  * Component default props.
@@ -20391,7 +20394,7 @@ const Thumbnail$1 = props => {
       wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
     }
   }
-  const wrapperClassName = classNames.join(linkProps?.className, className, block$3({
+  const wrapperClassName = classNames.join(linkProps?.className, className, block$4({
     [`align-${align}`]: Boolean(align),
     [`aspect-ratio-${aspectRatio}`]: Boolean(aspectRatio),
     [`size-${size}`]: Boolean(size),
@@ -20597,8 +20600,8 @@ const Thumbnail = forwardRef((props, ref) => {
     })
   });
 });
-Thumbnail.displayName = COMPONENT_NAME$2;
-Thumbnail.className = CLASSNAME$3;
+Thumbnail.displayName = COMPONENT_NAME$3;
+Thumbnail.className = CLASSNAME$4;
 Thumbnail.defaultProps = DEFAULT_PROPS$3;
 
 /**
@@ -20638,6 +20641,324 @@ const ThumbnailObjectFit = {
   contain: 'contain'
 };
 
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$2 = 'TimePickerField';
+
+/**
+ * Component default class name (BEM root).
+ */
+const CLASSNAME$3 = 'lumx-time-picker-field';
+const {
+  block: block$3
+} = bem(CLASSNAME$3);
+
+/**
+ * Translations consumed by `TimePickerField` (forwarded as-is to the underlying
+ * `SelectTextField`).
+ */
+
+/**
+ * Core props for the `TimePickerField` template.
+ */
+
+/**
+ * Injected framework-specific components for TimePickerField rendering.
+ */
+
+/**
+ * `TimePickerField` core template.
+ *
+ * Renders a `SelectTextField<TimeOfDay>` with an option list built from
+ * `buildTimeList`. Out-of-range options (strictly before `minTime` / after
+ * `maxTime`) remain visible in the dropdown but are rendered as disabled.
+ *
+ * Framework-specific components are passed as a second argument by the
+ * React/Vue wrappers.
+ *
+ * @param props      Component props.
+ * @param components Injected framework-specific components.
+ * @return JSX element.
+ */
+const TimePickerField$1 = (props, {
+  SelectTextField,
+  Option
+}) => {
+  const {
+    options,
+    translations,
+    className,
+    handleChange,
+    handleSearch,
+    handleBlur,
+    ...fowardedProps
+  } = props;
+  return /*#__PURE__*/jsx(SelectTextField, {
+    ...fowardedProps,
+    className: block$3([className]),
+    selectionType: "single",
+    options: options,
+    getOptionId: "name",
+    renderOption: entry => /*#__PURE__*/jsx(Option, {
+      isDisabled: entry.outOfRange
+    }),
+    onChange: handleChange,
+    onSearch: handleSearch,
+    onBlur: handleBlur,
+    filter: "auto",
+    translations: translations
+  });
+};
+TimePickerField$1.displayName = COMPONENT_NAME$2;
+TimePickerField$1.className = CLASSNAME$3;
+
+/**
+ * Format a time-of-day as a locale-aware short time (e.g. `'10:30 AM'`,
+ * `'10:30'`). Hour is `numeric` (not `'2-digit'`); some locales insert a
+ * narrow no-break space (U+202F) before AM/PM.
+ */
+function formatTime(date, locale) {
+  return date.toLocaleTimeString(locale, {
+    hour: 'numeric',
+    minute: '2-digit'
+  });
+}
+
+/**
+ * Build a new `Date` with the given time-of-day, inheriting the date part of
+ * `reference` (or today). Seconds/ms zeroed; `reference` is not mutated.
+ */
+function getDateAtTime({
+  hour,
+  minute
+}, reference) {
+  const next = reference ? new Date(reference) : new Date();
+  next.setHours(hour, minute, 0, 0);
+  return next;
+}
+
+/**
+ * Return the time-of-day of `date` in minutes since 00:00 (date part ignored).
+ */
+function timeOfDayMinutes(date) {
+  return date.getHours() * 60 + date.getMinutes();
+}
+
+/**
+ * A time-of-day (24h), independent of any date or time zone. Canonical
+ * exchange shape for the time utilities and `TimePickerField`.
+ */
+
+/** Options for `buildTimeList`. */
+
+const MINUTES_IN_HOUR = 60;
+const MINUTES_IN_DAY = 24 * MINUTES_IN_HOUR;
+
+/**
+ * Build a full-day list of `TimeOfDay` entries spaced `step` minutes apart.
+ * Out-of-bounds entries are kept (with `outOfRange: true`) so consumers can
+ * render them as visible-but-unselectable. Returns `[]` for invalid `step`.
+ */
+function buildTimeList(options = {}) {
+  const {
+    step = 30,
+    minTime,
+    maxTime,
+    locale
+  } = options;
+  if (!Number.isInteger(step) || step <= 0) {
+    return [];
+  }
+  const minMinutes = minTime ? timeOfDayMinutes(minTime) : undefined;
+  const maxMinutes = maxTime ? timeOfDayMinutes(maxTime) : undefined;
+  const list = [];
+  for (let minutes = 0; minutes < MINUTES_IN_DAY; minutes += step) {
+    const hour = Math.floor(minutes / MINUTES_IN_HOUR);
+    const minute = minutes % MINUTES_IN_HOUR;
+    const outOfRange = minMinutes !== undefined && minutes < minMinutes || maxMinutes !== undefined && minutes > maxMinutes || undefined;
+    const name = locale ? formatTime(getDateAtTime({
+      hour,
+      minute
+    }), locale) : undefined;
+    list.push({
+      hour,
+      minute,
+      name,
+      outOfRange
+    });
+  }
+  return list;
+}
+
+/**
+ * Match a free-form time. Supports:
+ * - 12h with am/pm suffix (`a`, `am`, `p`, `pm`, `a.m.`, `p.m.`), optional whitespace
+ * - 24h with colon (`15:45`), dot (`15.45`), `h` (`15h45`) or no separator (`1545`)
+ * - Optional seconds segment (ignored): `15:45:00`, `15.45.00`
+ * - Optional ISO `T` prefix and trailing `Z` (UTC marker)
+ *
+ * Capture groups:
+ *   1: hour, 2: minutes (optional), 3: am/pm marker (optional)
+ */
+const RE_TIME = /^T?(\d{1,2})(?:[:.h]?([0-5]\d)(?:[:.]?[0-5]\d)?)?\s*(a\.?m?\.?|p\.?m?\.?)?Z?$/i;
+
+/**
+ * Parse a free-form user time input into a 24h `TimeOfDay`. Accepts a wide
+ * range of formats:
+ *
+ * - 12h AM/PM: `'2pm'`, `'2 PM'`, `'2:30pm'`, `'3.45 PM'`, `'3:45 p.m.'`
+ * - 24h colon: `'10:30'`, `'15:45'`
+ * - 24h dot (DE/FR/IT): `'15.45'`
+ * - 24h French: `'15h45'`
+ * - Military / no separator: `'1545'`, `'1030pm'`
+ * - With seconds (ignored): `'15:45:00'`
+ * - ISO 8601: `'T15:45'`, `'15:45Z'`
+ *
+ * Whitespace is trimmed. Returns `undefined` if no format matches.
+ */
+function parseTimeInput(raw) {
+  if (typeof raw !== 'string') return undefined;
+  const match = raw.trim().match(RE_TIME);
+  if (!match) return undefined;
+  const [, rawHour, rawMinute, ampm] = match;
+  let hour = Number(rawHour);
+  const minute = rawMinute ? Number(rawMinute) : 0;
+  if (ampm) {
+    // 12h: hour must be 1..12; convert to 24h (12am→0, 12pm→12).
+    if (hour < 1 || hour > 12) return undefined;
+    const isPm = ampm[0].toLowerCase() === 'p';
+    if (hour === 12) hour = isPm ? 12 : 0;else if (isPm) hour += 12;
+  } else if (hour > 23) {
+    // 24h: hour must be 0..23.
+    return undefined;
+  }
+  return {
+    hour,
+    minute
+  };
+}
+
+/**
+ * Clamp `time` to `[minTime, maxTime]`. Inputs strictly before `minTime` snap
+ * up; inputs strictly after `maxTime` snap down; otherwise returned unchanged.
+ * Only the time-of-day of `minTime`/`maxTime` is used.
+ */
+function snapTimeToBounds(time, minTime, maxTime) {
+  const totalMinutes = time.hour * 60 + time.minute;
+  if (minTime && totalMinutes < timeOfDayMinutes(minTime)) {
+    return {
+      hour: minTime.getHours(),
+      minute: minTime.getMinutes()
+    };
+  }
+  if (maxTime && totalMinutes > timeOfDayMinutes(maxTime)) {
+    return {
+      hour: maxTime.getHours(),
+      minute: maxTime.getMinutes()
+    };
+  }
+  return time;
+}
+
+/**
+ * Returns `true` when the time-of-day of `date` matches `time` (hour and
+ * minute). Seconds and milliseconds are ignored.
+ */
+function isDateOnTime(date, time) {
+  return date.getHours() === time.hour && date.getMinutes() === time.minute;
+}
+
+/**
+ * Inherited SelectTextField props (less the parts owned by TimePickerField).
+ */
+
+/**
+ * `TimePickerField` props.
+ */
+
+/**
+ * A select-style picker for choosing a time of day. Wraps `SelectTextField`
+ * with a generated list of times built from `step`, `minTime`, and `maxTime`.
+ *
+ * Out-of-range options (strictly before `minTime` or after `maxTime`) remain
+ * visible in the dropdown but are rendered as disabled.
+ *
+ * Free-form typed input (e.g. `"10:30 PM"`, `"14"`, `"930"`) is parsed on blur.
+ *
+ * @param props Component props.
+ * @return React element.
+ */
+const TimePickerField = props => {
+  const {
+    value,
+    onChange,
+    locale = getCurrentLocale(),
+    step = 30,
+    minTime,
+    maxTime,
+    className,
+    theme,
+    translations,
+    ...forwardedProps
+  } = props;
+
+  // Build the option list — re-computed only when bounds/step/locale change.
+  const timeList = useMemo(() => buildTimeList({
+    step,
+    minTime,
+    maxTime,
+    locale
+  }), [step, minTime, maxTime, locale]);
+
+  // Track the user's typed input separately from the SelectTextField's internal search state,
+  // so blur can convert it to a Date.
+  const [searchValue, handleSearch] = useState('');
+
+  // Resolve the option that matches the current value (by time-of-day).
+  const selectedOption = useMemo(() => {
+    if (!value) return undefined;
+    return {
+      hour: value.getHours(),
+      minute: value.getMinutes(),
+      name: formatTime(value, locale)
+    };
+  }, [value, locale]);
+  const handleChange = useCallback(next => {
+    const date = next ? getDateAtTime(next, value) : undefined;
+    onChange(date, forwardedProps.name);
+  }, [forwardedProps.name, onChange, value]);
+  const handleBlur = useCallback(() => {
+    if (!searchValue) return;
+    const parsed = parseTimeInput(searchValue);
+    // Reset our local typed-value tracking; SelectTextField clears its own internal copy.
+    handleSearch('');
+    if (!parsed) return;
+
+    // Snap to bounds if needed, then dedup against the current value.
+    const time = snapTimeToBounds(parsed, minTime, maxTime);
+    if (value && isDateOnTime(value, time)) return;
+    onChange(getDateAtTime(time, value), forwardedProps.name);
+  }, [maxTime, minTime, forwardedProps.name, onChange, searchValue, value]);
+  const searchInputValue = value ? formatTime(value, locale) : undefined;
+  return TimePickerField$1({
+    ...forwardedProps,
+    value: selectedOption,
+    options: timeList,
+    translations,
+    className,
+    theme,
+    handleChange,
+    handleSearch,
+    handleBlur,
+    searchInputValue
+  }, {
+    SelectTextField,
+    Option: SelectTextField.Option
+  });
+};
+TimePickerField.displayName = COMPONENT_NAME$2;
+
 /**
  * Component display name.
  */
@@ -21109,5 +21430,5 @@ UserBlock.displayName = COMPONENT_NAME;
 UserBlock.className = CLASSNAME;
 UserBlock.defaultProps = DEFAULT_PROPS;
 
-export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1r as CLASSNAME, COMPONENT_NAME$1s as COMPONENT_NAME, Checkbox, Chip, ChipGroup, Combobox, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$1b as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSection, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectButton, SelectMultiple, SelectMultipleField, SelectTextField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, useFocusPointStyle, useHeadingLevel, useTheme };
+export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1s as CLASSNAME, COMPONENT_NAME$1t as COMPONENT_NAME, Checkbox, Chip, ChipGroup, Combobox, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$1b as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSection, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectButton, SelectMultiple, SelectMultipleField, SelectTextField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, CLASSNAME$3 as TIME_PICKER_FIELD_CLASSNAME, COMPONENT_NAME$2 as TIME_PICKER_FIELD_COMPONENT_NAME, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, TimePickerField, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, useFocusPointStyle, useHeadingLevel, useTheme };
 //# sourceMappingURL=index.js.map