@lumx/react 4.23.0-next.0 → 4.23.1-alpha.0

package/index.js

@@ -309,7 +309,7 @@ function modifier$1(baseName, modifiers) {
  * block('button', { active: true, disabled: false }); // 'button button--active'
  */
 
-function block$1d(baseName, modifiersOrAdditionalClasses, additionalClasses) {
+function block$1e(baseName, modifiersOrAdditionalClasses, additionalClasses) {
   let modifiers;
   let classes;
   if (typeof modifiersOrAdditionalClasses === 'string' || Array.isArray(modifiersOrAdditionalClasses)) {
@@ -344,7 +344,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$1d(ACTION_ELEMENT, modifiers)
+  action: modifiers => block$1e(ACTION_ELEMENT, modifiers)
 });
 
 /** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
@@ -466,8 +466,8 @@ const visuallyHidden = () => VISUALLY_HIDDEN;
  * element('my-button', 'icon', { active: true }); // 'my-button__icon my-button__icon--active'
  */
 
-function element$T(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
-  return block$1d(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
+function element$U(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
+  return block$1e(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
 }
 
 /**
@@ -475,10 +475,10 @@ function element$T(baseClass, elem, modifiersOrAdditionalClasses, additionalClas
  */
 function bem(baseName) {
   function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
-    return block$1d(baseName, modifiersOrAdditionalClasses, additionalClasses);
+    return block$1e(baseName, modifiersOrAdditionalClasses, additionalClasses);
   }
   function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
-    return element$T(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
+    return element$U(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
   }
   return {
     block: blockFn,
@@ -558,20 +558,20 @@ const CONFIG$1 = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1H = 'AlertDialog';
+const COMPONENT_NAME$1I = 'AlertDialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1D = 'lumx-alert-dialog';
+const CLASSNAME$1E = 'lumx-alert-dialog';
 const {
-  block: block$1c
-} = bem(CLASSNAME$1D);
+  block: block$1d
+} = bem(CLASSNAME$1E);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1k = {
+const DEFAULT_PROPS$1l = {
   size: Size.tiny,
   kind: Kind.info
 };
@@ -593,8 +593,8 @@ const AlertDialog$1 = props => {
     cancelProps,
     confirmProps,
     ref,
-    kind = DEFAULT_PROPS$1k.kind,
-    size = DEFAULT_PROPS$1k.size,
+    kind = DEFAULT_PROPS$1l.kind,
+    size = DEFAULT_PROPS$1l.size,
     dialogProps,
     children,
     DescriptionElement,
@@ -634,7 +634,7 @@ const AlertDialog$1 = props => {
       'aria-describedby': descriptionId,
       ...dialogProps
     },
-    className: classnames(className, block$1c({
+    className: classnames(className, block$1d({
       [`kind-${kind}`]: Boolean(kind)
     })),
     ...forwardedProps,
@@ -732,9 +732,9 @@ const AlertDialog = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-AlertDialog.displayName = COMPONENT_NAME$1H;
-AlertDialog.className = CLASSNAME$1D;
-AlertDialog.defaultProps = DEFAULT_PROPS$1k;
+AlertDialog.displayName = COMPONENT_NAME$1I;
+AlertDialog.className = CLASSNAME$1E;
+AlertDialog.defaultProps = DEFAULT_PROPS$1l;
 
 /**
  * Hook focusing an element when defined and `focus` boolean `true`.
@@ -826,17 +826,17 @@ function useDisableStateProps(props) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1G = 'Autocomplete';
+const COMPONENT_NAME$1H = 'Autocomplete';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1C = 'lumx-autocomplete';
+const CLASSNAME$1D = 'lumx-autocomplete';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1j = {
+const DEFAULT_PROPS$1k = {
   anchorToInput: false,
   closeOnClick: false,
   closeOnClickAway: true,
@@ -859,13 +859,13 @@ const Autocomplete = forwardRef((props, ref) => {
     otherProps
   } = useDisableStateProps(props);
   const {
-    anchorToInput = DEFAULT_PROPS$1j.anchorToInput,
+    anchorToInput = DEFAULT_PROPS$1k.anchorToInput,
     children,
     chips,
     className,
-    closeOnClick = DEFAULT_PROPS$1j.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$1j.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$1j.closeOnEscape,
+    closeOnClick = DEFAULT_PROPS$1k.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$1k.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$1k.closeOnEscape,
     error,
     fitToAnchorWidth,
     hasError,
@@ -886,7 +886,7 @@ const Autocomplete = forwardRef((props, ref) => {
     onInfiniteScroll,
     placeholder,
     placement,
-    shouldFocusOnClose = DEFAULT_PROPS$1j.shouldFocusOnClose,
+    shouldFocusOnClose = DEFAULT_PROPS$1k.shouldFocusOnClose,
     theme = defaultTheme,
     value,
     textFieldProps = {},
@@ -899,7 +899,7 @@ const Autocomplete = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$1C),
+    className: classNames.join(className, CLASSNAME$1D),
     children: [/*#__PURE__*/jsx(TextField, {
       ...textFieldProps,
       chips: chips,
@@ -939,24 +939,24 @@ const Autocomplete = forwardRef((props, ref) => {
     })]
   });
 });
-Autocomplete.displayName = COMPONENT_NAME$1G;
-Autocomplete.className = CLASSNAME$1C;
-Autocomplete.defaultProps = DEFAULT_PROPS$1j;
+Autocomplete.displayName = COMPONENT_NAME$1H;
+Autocomplete.className = CLASSNAME$1D;
+Autocomplete.defaultProps = DEFAULT_PROPS$1k;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1F = 'AutocompleteMultiple';
+const COMPONENT_NAME$1G = 'AutocompleteMultiple';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1B = 'lumx-autocomplete-multiple';
+const CLASSNAME$1C = 'lumx-autocomplete-multiple';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1i = {
+const DEFAULT_PROPS$1j = {
   closeOnClickAway: true,
   closeOnEscape: true,
   selectedChipRender(choice, index, onClear, isDisabled) {
@@ -997,8 +997,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     chipsAlignment,
     className,
-    closeOnClickAway = DEFAULT_PROPS$1i.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$1i.closeOnEscape,
+    closeOnClickAway = DEFAULT_PROPS$1j.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$1j.closeOnEscape,
     fitToAnchorWidth,
     hasError,
     helper,
@@ -1020,19 +1020,19 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     onKeyDown,
     placeholder,
     placement,
-    selectedChipRender = DEFAULT_PROPS$1i.selectedChipRender,
+    selectedChipRender = DEFAULT_PROPS$1j.selectedChipRender,
     shouldFocusOnClose,
     theme = defaultTheme,
     type,
     value,
-    values = DEFAULT_PROPS$1i.values,
+    values = DEFAULT_PROPS$1j.values,
     ...forwardedProps
   } = otherProps;
   return /*#__PURE__*/jsx(Autocomplete, {
     ref: ref,
     ...forwardedProps,
     anchorToInput: anchorToInput,
-    className: classNames.join(className, CLASSNAME$1B),
+    className: classNames.join(className, CLASSNAME$1C),
     name: name,
     value: value,
     onChange: onChange,
@@ -1065,28 +1065,28 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     children: children
   });
 });
-AutocompleteMultiple.displayName = COMPONENT_NAME$1F;
-AutocompleteMultiple.className = CLASSNAME$1B;
-AutocompleteMultiple.defaultProps = DEFAULT_PROPS$1i;
+AutocompleteMultiple.displayName = COMPONENT_NAME$1G;
+AutocompleteMultiple.className = CLASSNAME$1C;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS$1j;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1E = 'Avatar';
+const COMPONENT_NAME$1F = 'Avatar';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1A = 'lumx-avatar';
+const CLASSNAME$1B = 'lumx-avatar';
 const {
-  block: block$1b,
-  element: element$S
-} = bem(CLASSNAME$1A);
+  block: block$1c,
+  element: element$T
+} = bem(CLASSNAME$1B);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1h = {
+const DEFAULT_PROPS$1i = {
   size: Size.m
 };
 
@@ -1103,7 +1103,7 @@ const Avatar$1 = props => {
     badge,
     className,
     image,
-    size = DEFAULT_PROPS$1h.size,
+    size = DEFAULT_PROPS$1i.size,
     theme,
     ref,
     ...forwardedProps
@@ -1111,15 +1111,15 @@ const Avatar$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$1b({
+    className: classnames(className, block$1c({
       [`size-${size}`]: Boolean(size),
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [image, actions && /*#__PURE__*/jsx("div", {
-      className: element$S('actions'),
+      className: element$T('actions'),
       children: actions
     }), badge && /*#__PURE__*/jsx("div", {
-      className: element$S('badge'),
+      className: element$T('badge'),
       children: badge
     })]
   });
@@ -1144,7 +1144,7 @@ const Avatar = forwardRef((props, ref) => {
     linkAs,
     onClick,
     onKeyPress,
-    size = DEFAULT_PROPS$1h.size,
+    size = DEFAULT_PROPS$1i.size,
     theme = defaultTheme,
     thumbnailProps,
     ...forwardedProps
@@ -1160,7 +1160,7 @@ const Avatar = forwardRef((props, ref) => {
     image: /*#__PURE__*/jsx(Thumbnail, {
       linkProps: linkProps,
       linkAs: linkAs,
-      className: element$S('thumbnail'),
+      className: element$T('thumbnail'),
       onClick: onClick,
       onKeyPress: onKeyPress,
       ...thumbnailProps,
@@ -1172,27 +1172,27 @@ const Avatar = forwardRef((props, ref) => {
     })
   });
 });
-Avatar.displayName = COMPONENT_NAME$1E;
-Avatar.className = CLASSNAME$1A;
-Avatar.defaultProps = DEFAULT_PROPS$1h;
+Avatar.displayName = COMPONENT_NAME$1F;
+Avatar.className = CLASSNAME$1B;
+Avatar.defaultProps = DEFAULT_PROPS$1i;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1D = 'Badge';
+const COMPONENT_NAME$1E = 'Badge';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1z = 'lumx-badge';
+const CLASSNAME$1A = 'lumx-badge';
 const {
-  block: block$1a
-} = bem(CLASSNAME$1z);
+  block: block$1b
+} = bem(CLASSNAME$1A);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1g = {
+const DEFAULT_PROPS$1h = {
   color: ColorPalette.primary
 };
 
@@ -1206,22 +1206,22 @@ const Badge$1 = props => {
   const {
     children,
     className,
-    color = DEFAULT_PROPS$1g.color,
+    color = DEFAULT_PROPS$1h.color,
     ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$1a({
+    className: classnames(className, block$1b({
       [`color-${color}`]: Boolean(color)
     })),
     children: children
   });
 };
-Badge$1.displayName = COMPONENT_NAME$1D;
-Badge$1.className = CLASSNAME$1z;
-Badge$1.defaultProps = DEFAULT_PROPS$1g;
+Badge$1.displayName = COMPONENT_NAME$1E;
+Badge$1.className = CLASSNAME$1A;
+Badge$1.defaultProps = DEFAULT_PROPS$1h;
 
 /**
  * Defines the props of the component.
@@ -1244,12 +1244,12 @@ Badge.displayName = Badge$1.displayName;
 Badge.className = Badge$1.className;
 Badge.defaultProps = Badge$1.defaultProps;
 
-const COMPONENT_NAME$1C = 'BadgeWrapper';
-const CLASSNAME$1y = 'lumx-badge-wrapper';
+const COMPONENT_NAME$1D = 'BadgeWrapper';
+const CLASSNAME$1z = 'lumx-badge-wrapper';
 const {
-  block: block$19,
-  element: element$R
-} = bem(CLASSNAME$1y);
+  block: block$1a,
+  element: element$S
+} = bem(CLASSNAME$1z);
 const BadgeWrapper$1 = props => {
   const {
     badge,
@@ -1261,9 +1261,9 @@ const BadgeWrapper$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$19()),
+    className: classnames(className, block$1a()),
     children: [children, badge && /*#__PURE__*/jsx("div", {
-      className: element$R('badge'),
+      className: element$S('badge'),
       children: badge
     })]
   });
@@ -1275,8 +1275,8 @@ const BadgeWrapper = forwardRef((props, ref) => {
     ref
   });
 });
-BadgeWrapper.displayName = COMPONENT_NAME$1C;
-BadgeWrapper.className = CLASSNAME$1y;
+BadgeWrapper.displayName = COMPONENT_NAME$1D;
+BadgeWrapper.className = CLASSNAME$1z;
 
 /**
  * Render clickable element (link, button or custom element)
@@ -1326,7 +1326,7 @@ const RawClickable = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1B = 'ButtonRoot';
+const COMPONENT_NAME$1C = 'ButtonRoot';
 const BUTTON_WRAPPER_CLASSNAME = `lumx-button-wrapper`;
 const {
   block: buttonWrapperBlock
@@ -1424,7 +1424,7 @@ const ButtonRoot = props => {
     children
   });
 };
-ButtonRoot.displayName = COMPONENT_NAME$1B;
+ButtonRoot.displayName = COMPONENT_NAME$1C;
 ButtonRoot.defaultProps = {};
 
 /**
@@ -1434,20 +1434,20 @@ ButtonRoot.defaultProps = {};
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1A = 'Button';
+const COMPONENT_NAME$1B = 'Button';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1x = 'lumx-button';
+const CLASSNAME$1y = 'lumx-button';
 const {
   modifier
-} = bem(CLASSNAME$1x);
+} = bem(CLASSNAME$1y);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1f = {
+const DEFAULT_PROPS$1g = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1461,10 +1461,10 @@ const DEFAULT_PROPS$1f = {
 const Button$1 = props => {
   const {
     className,
-    emphasis = DEFAULT_PROPS$1f.emphasis,
+    emphasis = DEFAULT_PROPS$1g.emphasis,
     leftIcon,
     rightIcon,
-    size = DEFAULT_PROPS$1f.size,
+    size = DEFAULT_PROPS$1g.size,
     ...forwardedProps
   } = props;
   const buttonClassName = classnames(className, modifier({
@@ -1479,9 +1479,9 @@ const Button$1 = props => {
     variant: 'button'
   });
 };
-Button$1.displayName = COMPONENT_NAME$1A;
-Button$1.className = CLASSNAME$1x;
-Button$1.defaultProps = DEFAULT_PROPS$1f;
+Button$1.displayName = COMPONENT_NAME$1B;
+Button$1.className = CLASSNAME$1y;
+Button$1.defaultProps = DEFAULT_PROPS$1g;
 
 /**
  * Properties of a component to use to determine it's name.
@@ -1554,26 +1554,26 @@ const Button = forwardRef((props, ref) => {
     })
   });
 });
-Button.displayName = COMPONENT_NAME$1A;
-Button.className = CLASSNAME$1x;
-Button.defaultProps = DEFAULT_PROPS$1f;
+Button.displayName = COMPONENT_NAME$1B;
+Button.className = CLASSNAME$1y;
+Button.defaultProps = DEFAULT_PROPS$1g;
 
-const COMPONENT_NAME$1z = 'Icon';
+const COMPONENT_NAME$1A = 'Icon';
 const IconClassName = 'lumx-icon';
 
 /**
  * Defines the props of the component.
  */
 
-const CLASSNAME$1w = IconClassName;
+const CLASSNAME$1x = IconClassName;
 const {
-  block: block$18
-} = bem(CLASSNAME$1w);
+  block: block$19
+} = bem(CLASSNAME$1x);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1e = {};
+const DEFAULT_PROPS$1f = {};
 
 /**
  * Icon component.
@@ -1622,7 +1622,7 @@ const Icon$1 = props => {
   return /*#__PURE__*/jsx("i", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$18({
+    className: classnames(className, block$19({
       [`color-${iconColor}`]: Boolean(iconColor),
       [`color-variant-${iconColorVariant}`]: Boolean(iconColorVariant),
       'has-shape': hasShape,
@@ -1651,24 +1651,24 @@ const Icon$1 = props => {
     })
   });
 };
-Icon$1.displayName = COMPONENT_NAME$1z;
-Icon$1.className = CLASSNAME$1w;
-Icon$1.defaultProps = DEFAULT_PROPS$1e;
+Icon$1.displayName = COMPONENT_NAME$1A;
+Icon$1.className = CLASSNAME$1x;
+Icon$1.defaultProps = DEFAULT_PROPS$1f;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1y = 'IconButton';
+const COMPONENT_NAME$1z = 'IconButton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1v = 'lumx-icon-button';
+const CLASSNAME$1w = 'lumx-icon-button';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1d = {
+const DEFAULT_PROPS$1e = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1681,11 +1681,11 @@ const DEFAULT_PROPS$1d = {
  */
 const IconButton$1 = props => {
   const {
-    emphasis = DEFAULT_PROPS$1d.emphasis,
+    emphasis = DEFAULT_PROPS$1e.emphasis,
     image,
     icon,
     label,
-    size = DEFAULT_PROPS$1d.size,
+    size = DEFAULT_PROPS$1e.size,
     ...forwardedProps
   } = props;
   const defaultChildren = image ? /*#__PURE__*/jsx("img", {
@@ -1704,9 +1704,9 @@ const IconButton$1 = props => {
     children: defaultChildren
   });
 };
-IconButton$1.displayName = COMPONENT_NAME$1y;
-IconButton$1.className = CLASSNAME$1v;
-IconButton$1.defaultProps = DEFAULT_PROPS$1d;
+IconButton$1.displayName = COMPONENT_NAME$1z;
+IconButton$1.className = CLASSNAME$1w;
+IconButton$1.defaultProps = DEFAULT_PROPS$1e;
 
 /**
  * IconButton component.
@@ -1749,24 +1749,24 @@ const IconButton = forwardRef((props, ref) => {
     })
   });
 });
-IconButton.displayName = COMPONENT_NAME$1y;
-IconButton.className = CLASSNAME$1v;
-IconButton.defaultProps = DEFAULT_PROPS$1d;
+IconButton.displayName = COMPONENT_NAME$1z;
+IconButton.className = CLASSNAME$1w;
+IconButton.defaultProps = DEFAULT_PROPS$1e;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1x = 'ButtonGroup';
+const COMPONENT_NAME$1y = 'ButtonGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1u = 'lumx-button-group';
+const CLASSNAME$1v = 'lumx-button-group';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1c = {};
+const DEFAULT_PROPS$1d = {};
 
 /**
  * ButtonGroup component.
@@ -1782,13 +1782,13 @@ const ButtonGroup$1 = props => {
   } = props;
   return /*#__PURE__*/jsx("div", {
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1u),
+    className: classnames(className, CLASSNAME$1v),
     children: children
   });
 };
-ButtonGroup$1.displayName = COMPONENT_NAME$1x;
-ButtonGroup$1.className = CLASSNAME$1u;
-ButtonGroup$1.defaultProps = DEFAULT_PROPS$1c;
+ButtonGroup$1.displayName = COMPONENT_NAME$1y;
+ButtonGroup$1.className = CLASSNAME$1v;
+ButtonGroup$1.defaultProps = DEFAULT_PROPS$1d;
 
 /**
  * ButtonGroup component.
@@ -1803,27 +1803,27 @@ const ButtonGroup = forwardRef((props, ref) => {
     ...props
   });
 });
-ButtonGroup.displayName = COMPONENT_NAME$1x;
-ButtonGroup.className = CLASSNAME$1u;
-ButtonGroup.defaultProps = DEFAULT_PROPS$1c;
+ButtonGroup.displayName = COMPONENT_NAME$1y;
+ButtonGroup.className = CLASSNAME$1v;
+ButtonGroup.defaultProps = DEFAULT_PROPS$1d;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1w = 'Card';
+const COMPONENT_NAME$1x = 'Card';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1t = 'lumx-card';
+const CLASSNAME$1u = 'lumx-card';
 const {
-  block: block$17
-} = bem(CLASSNAME$1t);
+  block: block$18
+} = bem(CLASSNAME$1u);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1b = {
+const DEFAULT_PROPS$1c = {
   as: 'div'
 };
 
@@ -1841,13 +1841,13 @@ const Card$1 = props => {
     children,
     elevation,
     ref,
-    as: Element = DEFAULT_PROPS$1b.as,
+    as: Element = DEFAULT_PROPS$1c.as,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx(Element, {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$17({
+    className: classnames(className, block$18({
       [`elevation-${elevation}`]: Boolean(elevation)
     })),
     children: children
@@ -1874,18 +1874,18 @@ const Card = Object.assign(forwardRefPolymorphic((props, ref) => {
     ref
   });
 }), {
-  displayName: COMPONENT_NAME$1w,
-  className: CLASSNAME$1t,
-  defaultProps: DEFAULT_PROPS$1b
+  displayName: COMPONENT_NAME$1x,
+  className: CLASSNAME$1u,
+  defaultProps: DEFAULT_PROPS$1c
 });
 
-const COMPONENT_NAME$1v = 'InputLabel';
+const COMPONENT_NAME$1w = 'InputLabel';
 const InputLabelClassName = 'lumx-input-label';
-const CLASSNAME$1s = InputLabelClassName;
+const CLASSNAME$1t = InputLabelClassName;
 const {
-  block: block$16
-} = bem(CLASSNAME$1s);
-const DEFAULT_PROPS$1a = {};
+  block: block$17
+} = bem(CLASSNAME$1t);
+const DEFAULT_PROPS$1b = {};
 
 /**
  * InputLabel component.
@@ -1907,7 +1907,7 @@ function InputLabel$1(props) {
     ref: ref,
     ...forwardedProps,
     htmlFor: htmlFor,
-    className: classnames(className, block$16({
+    className: classnames(className, block$17({
       'is-required': isRequired,
       [`theme-${theme}`]: Boolean(theme),
       'has-custom-typography': Boolean(typography$1)
@@ -1915,9 +1915,9 @@ function InputLabel$1(props) {
     children: children
   });
 }
-InputLabel$1.displayName = COMPONENT_NAME$1v;
-InputLabel$1.className = CLASSNAME$1s;
-InputLabel$1.defaultProps = DEFAULT_PROPS$1a;
+InputLabel$1.displayName = COMPONENT_NAME$1w;
+InputLabel$1.className = CLASSNAME$1t;
+InputLabel$1.defaultProps = DEFAULT_PROPS$1b;
 
 const INPUT_HELPER_CONFIGURATION = {
   [Kind.error]: {
@@ -1931,22 +1931,22 @@ const INPUT_HELPER_CONFIGURATION = {
   }
 };
 
-const COMPONENT_NAME$1u = 'InputHelper';
+const COMPONENT_NAME$1v = 'InputHelper';
 const InputHelperClassName = 'lumx-input-helper';
 
 /**
  * Defines the props of the component.
  */
 
-const CLASSNAME$1r = InputHelperClassName;
+const CLASSNAME$1s = InputHelperClassName;
 const {
-  block: block$15
-} = bem(CLASSNAME$1r);
+  block: block$16
+} = bem(CLASSNAME$1s);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$19 = {
+const DEFAULT_PROPS$1a = {
   kind: Kind.info
 };
 
@@ -1957,7 +1957,7 @@ function InputHelper$1(props) {
   const {
     children,
     className,
-    kind = DEFAULT_PROPS$19.kind,
+    kind = DEFAULT_PROPS$1a.kind,
     theme,
     ref,
     ...forwardedProps
@@ -1968,16 +1968,16 @@ function InputHelper$1(props) {
   return /*#__PURE__*/jsx("p", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$15({
+    className: classnames(className, block$16({
       [`color-${color}`]: Boolean(color),
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: children
   });
 }
-InputHelper$1.displayName = COMPONENT_NAME$1u;
-InputHelper$1.className = CLASSNAME$1r;
-InputHelper$1.defaultProps = DEFAULT_PROPS$19;
+InputHelper$1.displayName = COMPONENT_NAME$1v;
+InputHelper$1.className = CLASSNAME$1s;
+InputHelper$1.defaultProps = DEFAULT_PROPS$1a;
 
 const INTERMEDIATE_STATE = 'intermediate';
 
@@ -1988,16 +1988,16 @@ const INTERMEDIATE_STATE = 'intermediate';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1t = 'Checkbox';
+const COMPONENT_NAME$1u = 'Checkbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1q = 'lumx-checkbox';
+const CLASSNAME$1r = 'lumx-checkbox';
 const {
-  block: block$14,
-  element: element$Q
-} = bem(CLASSNAME$1q);
+  block: block$15,
+  element: element$R
+} = bem(CLASSNAME$1r);
 
 /**
  * Checkbox component.
@@ -2033,7 +2033,7 @@ const Checkbox$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$14({
+    className: classnames(className, block$15({
       // Whether state is intermediate class name will "-checked"
       'is-checked': intermediateState ? true : isChecked,
       'is-disabled': isDisabled,
@@ -2041,12 +2041,12 @@ const Checkbox$1 = props => {
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsxs("div", {
-      className: element$Q('input-wrapper'),
+      className: element$R('input-wrapper'),
       children: [/*#__PURE__*/jsx("input", {
         ref: inputRef,
         type: "checkbox",
         id: inputId,
-        className: element$Q('input-native'),
+        className: element$R('input-native'),
         name: name,
         value: value,
         checked: isChecked,
@@ -2058,26 +2058,26 @@ const Checkbox$1 = props => {
         } : {}),
         ...inputProps
       }), /*#__PURE__*/jsxs("div", {
-        className: element$Q('input-placeholder'),
+        className: element$R('input-placeholder'),
         children: [/*#__PURE__*/jsx("div", {
-          className: element$Q('input-background')
+          className: element$R('input-background')
         }), /*#__PURE__*/jsx("div", {
-          className: element$Q('input-indicator'),
+          className: element$R('input-indicator'),
           children: Icon$1({
             icon: intermediateState ? mdiMinus : mdiCheck
           })
         })]
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: element$Q('content'),
+      className: element$R('content'),
       children: [label && InputLabel$1({
         htmlFor: inputId,
-        className: element$Q('label'),
+        className: element$R('label'),
         theme,
         children: label
       }), helper && InputHelper$1({
         id: `${inputId}-helper`,
-        className: element$Q('helper'),
+        className: element$R('helper'),
         theme,
         children: helper
       })]
@@ -2092,7 +2092,7 @@ const Checkbox$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$18 = {};
+const DEFAULT_PROPS$19 = {};
 
 /**
  * Checkbox component.
@@ -2152,9 +2152,9 @@ const Checkbox = forwardRef((props, ref) => {
     inputId
   });
 });
-Checkbox.displayName = COMPONENT_NAME$1t;
-Checkbox.className = CLASSNAME$1q;
-Checkbox.defaultProps = DEFAULT_PROPS$18;
+Checkbox.displayName = COMPONENT_NAME$1u;
+Checkbox.className = CLASSNAME$1r;
+Checkbox.defaultProps = DEFAULT_PROPS$19;
 
 /**
  * Wrap mouse event handler to stop event propagation.
@@ -2175,21 +2175,21 @@ function useStopPropagation(handler) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1s = 'Chip';
+const COMPONENT_NAME$1t = 'Chip';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1p = 'lumx-chip';
+const CLASSNAME$1q = 'lumx-chip';
 const {
-  block: block$13,
-  element: element$P
-} = bem(CLASSNAME$1p);
+  block: block$14,
+  element: element$Q
+} = bem(CLASSNAME$1q);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$17 = {
+const DEFAULT_PROPS$18 = {
   size: Size.m
 };
 
@@ -2216,7 +2216,7 @@ const Chip$1 = props => {
     hasAfterClick,
     hasBeforeClick,
     hasOnClick,
-    size = DEFAULT_PROPS$17.size,
+    size = DEFAULT_PROPS$18.size,
     theme,
     ref,
     href,
@@ -2251,7 +2251,7 @@ const Chip$1 = props => {
       ...forwardedProps,
       href: !disabledStateProps.disabled ? href : undefined,
       ref: ref,
-      className: classnames(className, block$13({
+      className: classnames(className, block$14({
         'is-clickable': isClickable,
         [`color-${chipColor}`]: Boolean(chipColor),
         'is-disabled': isAnyDisabled,
@@ -2268,19 +2268,19 @@ const Chip$1 = props => {
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
       jsx("div", {
-        className: element$P('before', {
+        className: element$Q('before', {
           'is-clickable': hasBeforeClick
         }),
         onClick: handleBeforeClick,
         children: before
       }), /*#__PURE__*/jsx("div", {
-        className: element$P('label'),
+        className: element$Q('label'),
         children: children
       }), after &&
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
       jsx("div", {
-        className: element$P('after', {
+        className: element$Q('after', {
           'is-clickable': hasAfterClick
         }),
         onClick: handleAfterClick,
@@ -2336,24 +2336,24 @@ const Chip = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-Chip.displayName = COMPONENT_NAME$1s;
-Chip.className = CLASSNAME$1p;
-Chip.defaultProps = DEFAULT_PROPS$17;
+Chip.displayName = COMPONENT_NAME$1t;
+Chip.className = CLASSNAME$1q;
+Chip.defaultProps = DEFAULT_PROPS$18;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1r = 'ChipGroup';
+const COMPONENT_NAME$1s = 'ChipGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1o = 'lumx-chip-group';
+const CLASSNAME$1p = 'lumx-chip-group';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$16 = {};
+const DEFAULT_PROPS$17 = {};
 
 /**
  * ChipGroup component.
@@ -2371,7 +2371,7 @@ const ChipGroup$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1o),
+    className: classnames(className, CLASSNAME$1p),
     children: children
   });
 };
@@ -2449,9 +2449,9 @@ const InternalChipGroup = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-InternalChipGroup.displayName = COMPONENT_NAME$1r;
-InternalChipGroup.className = CLASSNAME$1o;
-InternalChipGroup.defaultProps = DEFAULT_PROPS$16;
+InternalChipGroup.displayName = COMPONENT_NAME$1s;
+InternalChipGroup.className = CLASSNAME$1p;
+InternalChipGroup.defaultProps = DEFAULT_PROPS$17;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
 });
@@ -2459,16 +2459,16 @@ const ChipGroup = Object.assign(InternalChipGroup, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1q = 'SelectionChipGroup';
+const COMPONENT_NAME$1r = 'SelectionChipGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1n = 'lumx-selection-chip-group';
+const CLASSNAME$1o = 'lumx-selection-chip-group';
 const {
-  block: block$12,
-  element: element$O
-} = bem(CLASSNAME$1n);
+  block: block$13,
+  element: element$P
+} = bem(CLASSNAME$1o);
 
 /**
  * SelectionChipGroup component.
@@ -2506,7 +2506,7 @@ const SelectionChipGroup$1 = (props, {
     "aria-label": label,
     "aria-multiselectable": "true",
     "aria-orientation": "horizontal",
-    className: block$12([className]),
+    className: block$13([className]),
     children: value.map(v => {
       const name = getOptionName && getWithSelector(getOptionName, v) || getWithSelector(getOptionId, v);
       const id = getWithSelector(getOptionId, v);
@@ -2525,7 +2525,7 @@ const SelectionChipGroup$1 = (props, {
           after: /*#__PURE__*/jsx(Icon, {
             icon: mdiClose
           }),
-          className: element$O('chip', [customProps.className]),
+          className: element$P('chip', [customProps.className]),
           "data-option-id": id,
           isClickable: true,
           role: "option",
@@ -2564,10 +2564,10 @@ function createSelectorTreeWalker(container, selector) {
 }
 
 /** CSS selector for enabled chips (not aria-disabled). */
-const ENABLED_CHIP_SELECTOR = `.${CLASSNAME$1p}:not([aria-disabled="true"])`;
+const ENABLED_CHIP_SELECTOR = `.${CLASSNAME$1q}:not([aria-disabled="true"])`;
 
 /** Find the closest chip element from an event target. */
-const getChip = target => target?.closest?.(`.${CLASSNAME$1p}`) || null;
+const getChip = target => target?.closest?.(`.${CLASSNAME$1q}`) || null;
 
 /** Whether the chip is marked as disabled via aria-disabled. */
 const isChipDisabled = chip => chip?.getAttribute('aria-disabled') === 'true';
@@ -2808,20 +2808,20 @@ function wrapChildrenIconWithSpaces(children) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1p = 'Text';
+const COMPONENT_NAME$1q = 'Text';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1m = 'lumx-text';
+const CLASSNAME$1n = 'lumx-text';
 const {
-  block: block$11
-} = bem(CLASSNAME$1m);
+  block: block$12
+} = bem(CLASSNAME$1n);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$15 = {};
+const DEFAULT_PROPS$16 = {};
 
 /**
  * Text component common props
@@ -2857,7 +2857,7 @@ const getTextProps = props => {
     '--lumx-text-white-space': whiteSpace
   };
   return {
-    className: classnames(className, block$11({
+    className: classnames(className, block$12({
       'is-truncated': isTruncated && !isTruncatedMultiline,
       'is-truncated-multiline': isTruncatedMultiline,
       'no-wrap': noWrap
@@ -2906,9 +2906,9 @@ const Text = forwardRef((props, ref) => {
     children: wrapChildrenIconWithSpaces(children)
   });
 });
-Text.displayName = COMPONENT_NAME$1p;
-Text.className = CLASSNAME$1m;
-Text.defaultProps = DEFAULT_PROPS$15;
+Text.displayName = COMPONENT_NAME$1q;
+Text.className = CLASSNAME$1n;
+Text.defaultProps = DEFAULT_PROPS$16;
 
 /**
  * Custom positioning reference element.
@@ -4990,7 +4990,7 @@ const TOOLTIP_ZINDEX = 10000;
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$14 = {
+const DEFAULT_PROPS$15 = {
   placement: 'bottom',
   closeMode: 'unmount',
   ariaLinkMode: 'aria-describedby',
@@ -5000,16 +5000,16 @@ const DEFAULT_PROPS$14 = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1o = 'Tooltip';
+const COMPONENT_NAME$1p = 'Tooltip';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1l = 'lumx-tooltip';
+const CLASSNAME$1m = 'lumx-tooltip';
 const {
-  block: block$10,
-  element: element$N
-} = bem(CLASSNAME$1l);
+  block: block$11,
+  element: element$O
+} = bem(CLASSNAME$1m);
 
 /**
  * Props for the TooltipPopup rendering component.
@@ -5040,7 +5040,7 @@ const TooltipPopup = props => {
     ...forwardedProps,
     id: id,
     role: "tooltip",
-    className: classnames(className, block$10({
+    className: classnames(className, block$11({
       [`position-${position}`]: Boolean(position)
     }), isHidden && visuallyHidden()),
     style: {
@@ -5049,17 +5049,17 @@ const TooltipPopup = props => {
     },
     "data-popper-placement": position,
     children: [/*#__PURE__*/jsx("div", {
-      className: element$N('arrow')
+      className: element$O('arrow')
     }), /*#__PURE__*/jsx("div", {
-      className: element$N('inner'),
+      className: element$O('inner'),
       children: labelLines.map((line, index) => /*#__PURE__*/jsx("p", {
         children: line
       }, index))
     })]
   });
 };
-TooltipPopup.displayName = COMPONENT_NAME$1o;
-TooltipPopup.className = CLASSNAME$1l;
+TooltipPopup.displayName = COMPONENT_NAME$1p;
+TooltipPopup.className = CLASSNAME$1m;
 
 /**
  * Add ref and ARIA attribute(s) in tooltip children or wrapped children.
@@ -5354,11 +5354,11 @@ const Tooltip = forwardRef((props, ref) => {
     children,
     className,
     delay,
-    placement = DEFAULT_PROPS$14.placement,
+    placement = DEFAULT_PROPS$15.placement,
     forceOpen,
-    closeMode = DEFAULT_PROPS$14.closeMode,
-    ariaLinkMode = DEFAULT_PROPS$14.ariaLinkMode,
-    zIndex = DEFAULT_PROPS$14.zIndex,
+    closeMode = DEFAULT_PROPS$15.closeMode,
+    ariaLinkMode = DEFAULT_PROPS$15.ariaLinkMode,
+    zIndex = DEFAULT_PROPS$15.zIndex,
     ...forwardedProps
   } = props;
   // Disable in SSR.
@@ -5421,9 +5421,9 @@ const Tooltip = forwardRef((props, ref) => {
     })]
   });
 });
-Tooltip.displayName = COMPONENT_NAME$1o;
-Tooltip.className = CLASSNAME$1l;
-Tooltip.defaultProps = DEFAULT_PROPS$14;
+Tooltip.displayName = COMPONENT_NAME$1p;
+Tooltip.className = CLASSNAME$1m;
+Tooltip.defaultProps = DEFAULT_PROPS$15;
 
 /** Create a pending navigation store; discards intent on abort. */
 function createPendingNavigation(signal) {
@@ -6292,8 +6292,8 @@ const SelectionChipGroup = ({
   }, [container, inputRef, getOptionId]);
   useRovingTabIndexContainer({
     containerRef: container,
-    itemSelector: `.${CLASSNAME$1p}`,
-    itemDisabledSelector: `.${CLASSNAME$1p}[aria-disabled="true"]`
+    itemSelector: `.${CLASSNAME$1q}`,
+    itemDisabledSelector: `.${CLASSNAME$1q}[aria-disabled="true"]`
   });
 
   // Merge getChipProps and renderChip: getChipProps provides base props, renderChip overrides them,
@@ -6333,8 +6333,8 @@ const SelectionChipGroup = ({
     Tooltip
   });
 };
-SelectionChipGroup.displayName = COMPONENT_NAME$1q;
-SelectionChipGroup.className = CLASSNAME$1n;
+SelectionChipGroup.displayName = COMPONENT_NAME$1r;
+SelectionChipGroup.className = CLASSNAME$1o;
 
 /**
  * Get the value for a combobox option element.
@@ -7290,12 +7290,12 @@ function setupComboboxButton(button, callbacks) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1n = 'ComboboxButton';
+const COMPONENT_NAME$1o = 'ComboboxButton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1k = 'lumx-combobox-button';
+const CLASSNAME$1l = 'lumx-combobox-button';
 
 /**
  * ComboboxButton core template.
@@ -7335,7 +7335,7 @@ const ComboboxButton$1 = (props, {
   const componentProps = {
     ref,
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1k),
+    className: classnames(className, CLASSNAME$1l),
     role: 'combobox',
     'aria-controls': listboxId,
     'aria-haspopup': 'listbox',
@@ -7686,8 +7686,8 @@ const ComboboxButton = Object.assign(forwardRefPolymorphic((props, ref) => {
     Tooltip
   });
 }), {
-  displayName: COMPONENT_NAME$1n,
-  className: CLASSNAME$1k
+  displayName: COMPONENT_NAME$1o,
+  className: CLASSNAME$1l
 });
 
 /** Options for configuring the input-mode combobox controller. */
@@ -7851,12 +7851,12 @@ function getDisabledState(context, props) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1m = 'ComboboxInput';
+const COMPONENT_NAME$1n = 'ComboboxInput';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1j = 'lumx-combobox-input';
+const CLASSNAME$1k = 'lumx-combobox-input';
 
 /**
  * ComboboxInput core template.
@@ -7894,7 +7894,14 @@ const ComboboxInput$1 = (props, {
     readOnly: filter === 'off' || undefined,
     ...forwardedProps,
     ref: ref,
-    role: "combobox",
+    role: "combobox"
+    // The input text is not the combobox value: in multiple selection the input stays
+    // empty, and `filter="off"` makes the input read only. Native constraint validation
+    // is wrong in both cases. Set `aria-required` and remove the native `required`
+    // attribute that TextField derives from `isRequired`.
+    ,
+    required: false,
+    "aria-required": props.isRequired || undefined,
     "aria-autocomplete": "list",
     "aria-controls": listboxId,
     "aria-expanded": isOpen,
@@ -7919,22 +7926,22 @@ const ComboboxInput$1 = (props, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1l = 'TextField';
+const COMPONENT_NAME$1m = 'TextField';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1i = 'lumx-text-field';
+const CLASSNAME$1j = 'lumx-text-field';
 
 /**
  * Input native element class name.
  */
-const INPUT_NATIVE_CLASSNAME = `${CLASSNAME$1i}__input-native`;
+const INPUT_NATIVE_CLASSNAME = `${CLASSNAME$1j}__input-native`;
 
 const {
-  block: block$$,
-  element: element$M
-} = bem(CLASSNAME$1i);
+  block: block$10,
+  element: element$N
+} = bem(CLASSNAME$1j);
 
 /**
  * Defines the props of the component.
@@ -8007,7 +8014,7 @@ const TextField$1 = props => {
   const isNotEmpty = valueLength > 0;
   const remaining = maxLength ? maxLength - valueLength : 0;
   const charCounter = maxLength ? /*#__PURE__*/jsxs("span", {
-    className: element$M('char-counter'),
+    className: element$N('char-counter'),
     role: "status",
     children: [charCounterMessage ? charCounterMessage(remaining) : remaining, remaining === 0 && Icon$1({
       icon: mdiAlertCircle,
@@ -8016,7 +8023,7 @@ const TextField$1 = props => {
   }) : undefined;
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: classnames(className, block$$({
+    className: classnames(className, block$10({
       'has-chips': Boolean(chips),
       'has-error': !isValid && hasError,
       'has-icon': Boolean(icon),
@@ -8032,56 +8039,56 @@ const TextField$1 = props => {
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [(label || maxLength) && /*#__PURE__*/jsx("div", {
-      className: element$M('header'),
+      className: element$N('header'),
       children: InputLabel$1({
         ...labelProps,
         id: labelId,
         htmlFor: textFieldId,
-        className: element$M('label'),
+        className: element$N('label'),
         isRequired,
         theme,
         children: [label, charCounter]
       })
     }), /*#__PURE__*/jsxs("div", {
-      className: element$M('wrapper'),
+      className: element$N('wrapper'),
       ref: textFieldRef,
       children: [icon && Icon$1({
-        className: element$M('input-icon'),
+        className: element$N('input-icon'),
         color: theme === Theme.dark ? 'light' : undefined,
         icon,
         size: Size.xs
       }), chips ? /*#__PURE__*/jsxs("div", {
-        className: element$M('chips'),
+        className: element$N('chips'),
         children: [chips, input]
       }) : /*#__PURE__*/jsx("div", {
-        className: element$M('input-wrapper'),
+        className: element$N('input-wrapper'),
         children: input
       }), (isValid || hasError) && Icon$1({
-        className: element$M('input-validity'),
+        className: element$N('input-validity'),
         color: theme === Theme.dark ? 'light' : undefined,
         icon: isValid ? mdiCheckCircle : mdiAlertCircle,
         size: Size.xxs
       }), clearButtonProps && isNotEmpty && !isAnyDisabled && /*#__PURE__*/jsx(IconButton, {
         "aria-describedby": labelId,
         ...clearButtonProps,
-        className: element$M('input-clear'),
+        className: element$N('input-clear'),
         icon: mdiCloseCircle,
         emphasis: Emphasis.low,
         size: Size.s,
         theme: theme,
         type: "button"
       }), afterElement && /*#__PURE__*/jsx("div", {
-        className: element$M('after-element'),
+        className: element$N('after-element'),
         children: afterElement
       })]
     }), hasError && error && InputHelper$1({
       children: error,
-      className: element$M('helper'),
+      className: element$N('helper'),
       kind: Kind.error,
       theme,
       id: errorId
     }), helper && InputHelper$1({
-      className: element$M('helper'),
+      className: element$N('helper'),
       theme,
       id: helperId,
       children: helper
@@ -8090,7 +8097,7 @@ const TextField$1 = props => {
 };
 
 const {
-  block: block$_
+  block: block$$
 } = bem(INPUT_NATIVE_CLASSNAME);
 
 /**
@@ -8100,7 +8107,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$13 = {
+const DEFAULT_PROPS$14 = {
   type: 'text'
 };
 
@@ -8117,7 +8124,7 @@ const RawInputText$1 = props => {
     handleInput,
     handleFocus,
     handleBlur,
-    type = DEFAULT_PROPS$13.type,
+    type = DEFAULT_PROPS$14.type,
     name,
     ref,
     ...forwardedProps
@@ -8133,7 +8140,7 @@ const RawInputText$1 = props => {
     name: name,
     type: type,
     ref: ref,
-    className: classnames(className, block$_({
+    className: classnames(className, block$$({
       [`theme-${theme}`]: Boolean(theme),
       text: true
     })),
@@ -8169,7 +8176,7 @@ const RawInputText = forwardRef((props, ref) => {
 });
 
 const {
-  block: block$Z
+  block: block$_
 } = bem(INPUT_NATIVE_CLASSNAME);
 
 /**
@@ -8179,7 +8186,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$12 = {
+const DEFAULT_PROPS$13 = {
   rows: 2
 };
 
@@ -8196,7 +8203,7 @@ const RawInputTextarea$1 = props => {
     handleInput,
     handleFocus,
     handleBlur,
-    rows = DEFAULT_PROPS$12.rows,
+    rows = DEFAULT_PROPS$13.rows,
     name,
     ref,
     ...forwardedProps
@@ -8211,7 +8218,7 @@ const RawInputTextarea$1 = props => {
     ...forwardedProps,
     name: name,
     ref: ref,
-    className: classnames(className, block$Z({
+    className: classnames(className, block$_({
       [`theme-${theme}`]: Boolean(theme),
       textarea: true
     })),
@@ -8272,8 +8279,8 @@ function useFitRowsToContent(minimumRows, textareaRef, value) {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$11 = {
-  minimumRows: DEFAULT_PROPS$12.rows
+const DEFAULT_PROPS$12 = {
+  minimumRows: DEFAULT_PROPS$13.rows
 };
 
 /**
@@ -8284,7 +8291,7 @@ const RawInputTextarea = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     theme = defaultTheme,
-    minimumRows = DEFAULT_PROPS$11.minimumRows,
+    minimumRows = DEFAULT_PROPS$12.minimumRows,
     value,
     onChange,
     onFocus,
@@ -8308,7 +8315,7 @@ const RawInputTextarea = forwardRef((props, ref) => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$10 = {
+const DEFAULT_PROPS$11 = {
   type: 'text'
 };
 
@@ -8353,7 +8360,7 @@ const TextField = forwardRef((props, ref) => {
     placeholder,
     textFieldRef,
     theme = defaultTheme,
-    type = DEFAULT_PROPS$10.type,
+    type = DEFAULT_PROPS$11.type,
     value,
     afterElement,
     ...forwardedProps
@@ -8398,7 +8405,8 @@ const TextField = forwardRef((props, ref) => {
     ref: inputRef,
     ...disabledStateProps,
     ...forwardedProps,
-    required: isRequired,
+    // An explicit `required` attribute wins over the one derived from `isRequired`.
+    required: forwardedProps.required ?? isRequired,
     maxLength,
     onBlur(evt) {
       setFocus(false);
@@ -8459,9 +8467,9 @@ const TextField = forwardRef((props, ref) => {
     } : undefined
   });
 });
-TextField.displayName = COMPONENT_NAME$1l;
-TextField.className = CLASSNAME$1i;
-TextField.defaultProps = DEFAULT_PROPS$10;
+TextField.displayName = COMPONENT_NAME$1m;
+TextField.className = CLASSNAME$1j;
+TextField.defaultProps = DEFAULT_PROPS$11;
 
 /**
  * Props for Combobox.Input component.
@@ -8548,26 +8556,26 @@ const ComboboxInput = forwardRef((props, ref) => {
     IconButton
   });
 });
-ComboboxInput.displayName = COMPONENT_NAME$1m;
-ComboboxInput.className = CLASSNAME$1j;
+ComboboxInput.displayName = COMPONENT_NAME$1n;
+ComboboxInput.className = CLASSNAME$1k;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1k = 'List';
+const COMPONENT_NAME$1l = 'List';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1h = 'lumx-list';
+const CLASSNAME$1i = 'lumx-list';
 const {
-  block: block$Y
-} = bem(CLASSNAME$1h);
+  block: block$Z
+} = bem(CLASSNAME$1i);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$$ = {};
+const DEFAULT_PROPS$10 = {};
 
 /**
  * List component.
@@ -8585,16 +8593,16 @@ const List$1 = props => {
   } = props;
   return /*#__PURE__*/jsx("ul", {
     ...forwardedProps,
-    className: classnames(className, block$Y({
+    className: classnames(className, block$Z({
       [`item-padding-${itemPadding}`]: Boolean(itemPadding)
     })),
     ref: ref,
     children: children
   });
 };
-List$1.displayName = COMPONENT_NAME$1k;
-List$1.className = CLASSNAME$1h;
-List$1.defaultProps = DEFAULT_PROPS$$;
+List$1.displayName = COMPONENT_NAME$1l;
+List$1.className = CLASSNAME$1i;
+List$1.defaultProps = DEFAULT_PROPS$10;
 
 /**
  * Popup type for the combobox listbox.
@@ -8609,12 +8617,12 @@ List$1.defaultProps = DEFAULT_PROPS$$;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1j = 'ComboboxList';
+const COMPONENT_NAME$1k = 'ComboboxList';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1g = 'lumx-combobox-list';
+const CLASSNAME$1h = 'lumx-combobox-list';
 
 /**
  * ComboboxList core template.
@@ -8636,7 +8644,7 @@ const ComboboxList$1 = props => {
   } = props;
   return List$1({
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1g),
+    className: classnames(className, CLASSNAME$1h),
     ref,
     itemPadding: 'big',
     id,
@@ -8726,27 +8734,27 @@ const ComboboxList = forwardRef((props, ref) => {
     })
   });
 });
-ComboboxList.displayName = COMPONENT_NAME$1j;
-ComboboxList.className = CLASSNAME$1g;
+ComboboxList.displayName = COMPONENT_NAME$1k;
+ComboboxList.className = CLASSNAME$1h;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1i = 'ListItem';
+const COMPONENT_NAME$1j = 'ListItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1f = 'lumx-list-item';
+const CLASSNAME$1g = 'lumx-list-item';
 const {
-  block: block$X,
-  element: element$L
-} = bem(CLASSNAME$1f);
+  block: block$Y,
+  element: element$M
+} = bem(CLASSNAME$1g);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$_ = {
+const DEFAULT_PROPS$$ = {
   size: Size.regular
 };
 
@@ -8770,7 +8778,7 @@ const ListItem$1 = props => {
     linkProps = {},
     linkRef,
     handleClick,
-    size = DEFAULT_PROPS$_.size,
+    size = DEFAULT_PROPS$$.size,
     ref,
     ...forwardedProps
   } = props;
@@ -8778,7 +8786,7 @@ const ListItem$1 = props => {
   return /*#__PURE__*/jsx("li", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$X({
+    className: classnames(className, block$Y({
       [`size-${size}`]: Boolean(size)
     })),
     children: RawClickable({
@@ -8786,7 +8794,7 @@ const ListItem$1 = props => {
       isDisabled,
       'aria-disabled': ariaDisabled,
       ...linkProps,
-      className: element$L(clickable ? 'link' : 'wrapper', {
+      className: element$M(clickable ? 'link' : 'wrapper', {
         'is-highlighted': isHighlighted,
         'is-selected': isSelected,
         'is-disabled': isDisabled || ariaDisabled === 'true'
@@ -8795,22 +8803,22 @@ const ListItem$1 = props => {
       ref: linkRef,
       children: /*#__PURE__*/jsxs(Fragment, {
         children: [before && /*#__PURE__*/jsx("div", {
-          className: element$L('before'),
+          className: element$M('before'),
           children: before
         }), /*#__PURE__*/jsx("div", {
-          className: element$L('content'),
+          className: element$M('content'),
           children: children
         }), after && /*#__PURE__*/jsx("div", {
-          className: element$L('after'),
+          className: element$M('after'),
           children: after
         })]
       })
     })
   });
 };
-ListItem$1.displayName = COMPONENT_NAME$1i;
-ListItem$1.className = CLASSNAME$1f;
-ListItem$1.defaultProps = DEFAULT_PROPS$_;
+ListItem$1.displayName = COMPONENT_NAME$1j;
+ListItem$1.className = CLASSNAME$1g;
+ListItem$1.defaultProps = DEFAULT_PROPS$$;
 
 /**
  * ListItemAction props.
@@ -8819,13 +8827,13 @@ ListItem$1.defaultProps = DEFAULT_PROPS$_;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1h = 'ListItemAction';
+const COMPONENT_NAME$1i = 'ListItemAction';
 
 /**
  * Component classname (used by action area CSS pattern).
  */
-const CLASSNAME$1e = 'lumx-action-area__action';
-const DEFAULT_PROPS$Z = {};
+const CLASSNAME$1f = 'lumx-action-area__action';
+const DEFAULT_PROPS$_ = {};
 
 /**
  * ListItemAction component.
@@ -8858,16 +8866,16 @@ const ListItemAction$1 = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1g = 'ComboboxOption';
+const COMPONENT_NAME$1h = 'ComboboxOption';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1d = 'lumx-combobox-option';
+const CLASSNAME$1e = 'lumx-combobox-option';
 const {
-  block: block$W,
-  element: element$K
-} = bem(CLASSNAME$1d);
+  block: block$X,
+  element: element$L
+} = bem(CLASSNAME$1e);
 
 /**
  * ComboboxOption core template.
@@ -8911,7 +8919,7 @@ const ComboboxOption$1 = (props, {
     as: 'button',
     ...actionProps,
     id,
-    className: element$K('action'),
+    className: element$L('action'),
     handleClick,
     'aria-selected': isSelected ? 'true' : 'false',
     'data-value': value,
@@ -8929,7 +8937,7 @@ const ComboboxOption$1 = (props, {
     size: 'tiny',
     ...forwardedProps,
     hidden,
-    className: !hidden ? classnames(className, block$W()) : undefined,
+    className: !hidden ? classnames(className, block$X()) : undefined,
     before,
     after,
     role: itemRole,
@@ -8937,7 +8945,7 @@ const ComboboxOption$1 = (props, {
       children: [wrappedAction, description && /*#__PURE__*/jsx("p", {
         id: descriptionId,
         ...getTextProps({
-          className: element$K('description'),
+          className: element$L('description'),
           typography: 'caption',
           color: 'dark-L2'
         }),
@@ -9051,8 +9059,8 @@ const ComboboxOption = forwardRef((props, ref) => {
     Tooltip
   });
 });
-ComboboxOption.displayName = COMPONENT_NAME$1g;
-ComboboxOption.className = CLASSNAME$1d;
+ComboboxOption.displayName = COMPONENT_NAME$1h;
+ComboboxOption.className = CLASSNAME$1e;
 
 /**
  * Defines the props for the core ComboboxOptionAction template.
@@ -9061,12 +9069,12 @@ ComboboxOption.className = CLASSNAME$1d;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1f = 'ComboboxOptionAction';
+const COMPONENT_NAME$1g = 'ComboboxOptionAction';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1c = 'lumx-combobox-option-action';
+const CLASSNAME$1d = 'lumx-combobox-option-action';
 
 /**
  * ComboboxOptionAction core template.
@@ -9089,7 +9097,7 @@ const ComboboxOptionAction$1 = props => {
     as: Element,
     ...forwardedProps,
     role: 'gridcell',
-    className: classnames(className, CLASSNAME$1c),
+    className: classnames(className, CLASSNAME$1d),
     handleClick,
     children
   });
@@ -9139,23 +9147,23 @@ const ComboboxOptionAction = Object.assign(forwardRefPolymorphic((props, ref) =>
     children
   });
 }), {
-  displayName: COMPONENT_NAME$1f,
-  className: CLASSNAME$1c
+  displayName: COMPONENT_NAME$1g,
+  className: CLASSNAME$1d
 });
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1e = 'ComboboxOptionMoreInfo';
+const COMPONENT_NAME$1f = 'ComboboxOptionMoreInfo';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1b = 'lumx-combobox-option-more-info';
+const CLASSNAME$1c = 'lumx-combobox-option-more-info';
 const {
-  block: block$V,
-  element: element$J
-} = bem(CLASSNAME$1b);
+  block: block$W,
+  element: element$K
+} = bem(CLASSNAME$1c);
 
 /**
  * ComboboxOptionMoreInfo core template.
@@ -9189,7 +9197,7 @@ const ComboboxOptionMoreInfo$1 = (props, {
       icon: mdiInformationOutline,
       size: "s",
       ...buttonProps,
-      className: block$V([className, buttonProps?.className]),
+      className: block$W([className, buttonProps?.className]),
       emphasis: "low",
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave
@@ -9200,7 +9208,7 @@ const ComboboxOptionMoreInfo$1 = (props, {
       label: ""
     }), /*#__PURE__*/jsx(Popover, {
       id: popoverId,
-      className: element$J('popover'),
+      className: element$K('popover'),
       anchorRef: ref,
       isOpen: isOpen,
       closeMode: "unmount",
@@ -9468,21 +9476,21 @@ const POPOVER_ZINDEX = 9999;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1d = 'Popover';
+const COMPONENT_NAME$1e = 'Popover';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1a = 'lumx-popover';
+const CLASSNAME$1b = 'lumx-popover';
 const {
-  block: block$U,
-  element: element$I
-} = bem(CLASSNAME$1a);
+  block: block$V,
+  element: element$J
+} = bem(CLASSNAME$1b);
 
 /**
  * Component default props (used by framework wrappers).
  */
-const DEFAULT_PROPS$Y = {
+const DEFAULT_PROPS$Z = {
   closeMode: 'unmount',
   elevation: 3,
   placement: Placement.AUTO,
@@ -9506,8 +9514,8 @@ const Popover$1 = (props, {
     as: asTag = 'div',
     children,
     className,
-    closeMode = DEFAULT_PROPS$Y.closeMode,
-    elevation = DEFAULT_PROPS$Y.elevation,
+    closeMode = DEFAULT_PROPS$Z.closeMode,
+    elevation = DEFAULT_PROPS$Z.elevation,
     hasArrow,
     isOpen,
     position,
@@ -9517,7 +9525,7 @@ const Popover$1 = (props, {
     // Framework-specific
     ref,
     arrowRef,
-    usePortal = DEFAULT_PROPS$Y.usePortal,
+    usePortal = DEFAULT_PROPS$Z.usePortal,
     clickAwayCallback,
     clickAwayRefs,
     unmountSentinel,
@@ -9539,7 +9547,7 @@ const Popover$1 = (props, {
     children: /*#__PURE__*/jsxs(Component, {
       ...forwardedProps,
       ref: ref,
-      className: classnames(className, block$U({
+      className: classnames(className, block$V({
         [`theme-${theme}`]: Boolean(theme),
         [`elevation-${adjustedElevation}`]: Boolean(adjustedElevation),
         [`position-${position}`]: Boolean(position),
@@ -9553,7 +9561,7 @@ const Popover$1 = (props, {
         childrenRefs: clickAwayRefs,
         children: [hasArrow && /*#__PURE__*/jsx("div", {
           ref: arrowRef,
-          className: element$I('arrow'),
+          className: element$J('arrow'),
           style: isHidden ? undefined : arrowStyle,
           children: /*#__PURE__*/jsx("svg", {
             viewBox: "0 0 14 14",
@@ -9911,17 +9919,17 @@ const _InnerPopover = forwardRef((props, ref) => {
     as,
     children,
     className,
-    closeMode = DEFAULT_PROPS$Y.closeMode,
+    closeMode = DEFAULT_PROPS$Z.closeMode,
     closeOnClickAway,
     closeOnEscape,
-    elevation = DEFAULT_PROPS$Y.elevation,
+    elevation = DEFAULT_PROPS$Z.elevation,
     focusElement,
     hasArrow,
     isOpen,
     onClose,
     parentElement,
-    usePortal = DEFAULT_PROPS$Y.usePortal,
-    focusAnchorOnClose = DEFAULT_PROPS$Y.focusAnchorOnClose,
+    usePortal = DEFAULT_PROPS$Z.usePortal,
+    focusAnchorOnClose = DEFAULT_PROPS$Z.focusAnchorOnClose,
     withFocusTrap,
     boundaryRef,
     fitToAnchorWidth,
@@ -9934,10 +9942,10 @@ const _InnerPopover = forwardRef((props, ref) => {
     minHeight,
     maxHeight,
     offset,
-    placement = DEFAULT_PROPS$Y.placement,
+    placement = DEFAULT_PROPS$Z.placement,
     style,
     theme,
-    zIndex = DEFAULT_PROPS$Y.zIndex,
+    zIndex = DEFAULT_PROPS$Z.zIndex,
     ...forwardedProps
   } = props;
   const popoverRef = useRef(null);
@@ -10003,7 +10011,7 @@ const _InnerPopover = forwardRef((props, ref) => {
     ThemeProvider
   });
 });
-_InnerPopover.displayName = COMPONENT_NAME$1d;
+_InnerPopover.displayName = COMPONENT_NAME$1e;
 
 /**
  * Popover component.
@@ -10015,9 +10023,9 @@ _InnerPopover.displayName = COMPONENT_NAME$1d;
 const Popover = skipRender(
 // Skip render in SSR
 () => Boolean(DOCUMENT), _InnerPopover);
-Popover.displayName = COMPONENT_NAME$1d;
-Popover.className = CLASSNAME$1a;
-Popover.defaultProps = DEFAULT_PROPS$Y;
+Popover.displayName = COMPONENT_NAME$1e;
+Popover.className = CLASSNAME$1b;
+Popover.defaultProps = DEFAULT_PROPS$Z;
 
 /**
  * Props for Combobox.OptionMoreInfo component.
@@ -10079,22 +10087,22 @@ const ComboboxOptionMoreInfo = props => {
     Popover
   });
 };
-ComboboxOptionMoreInfo.displayName = COMPONENT_NAME$1e;
-ComboboxOptionMoreInfo.className = CLASSNAME$1b;
+ComboboxOptionMoreInfo.displayName = COMPONENT_NAME$1f;
+ComboboxOptionMoreInfo.className = CLASSNAME$1c;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1c = 'SkeletonTypography';
+const COMPONENT_NAME$1d = 'SkeletonTypography';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$19 = 'lumx-skeleton-typography';
+const CLASSNAME$1a = 'lumx-skeleton-typography';
 const {
-  block: block$T,
-  element: element$H
-} = bem(CLASSNAME$19);
+  block: block$U,
+  element: element$I
+} = bem(CLASSNAME$1a);
 
 /**
  * SkeletonTypography component.
@@ -10115,7 +10123,7 @@ const SkeletonTypography$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$T({
+    className: classnames(className, block$U({
       [`theme-${theme}`]: Boolean(theme),
       [`typography-${typography}`]: Boolean(typography),
       [`color-${color}`]: Boolean(color)
@@ -10125,7 +10133,7 @@ const SkeletonTypography$1 = props => {
       width
     },
     children: /*#__PURE__*/jsx("div", {
-      className: element$H('inner')
+      className: element$I('inner')
     })
   });
 };
@@ -10133,12 +10141,12 @@ const SkeletonTypography$1 = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1b = 'ComboboxOptionSkeleton';
+const COMPONENT_NAME$1c = 'ComboboxOptionSkeleton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$18 = 'lumx-combobox-option-skeleton';
+const CLASSNAME$19 = 'lumx-combobox-option-skeleton';
 
 /**
  * ComboboxOptionSkeleton core template.
@@ -10165,7 +10173,7 @@ const ComboboxOptionSkeleton$1 = props => {
     size: 'tiny',
     role: 'none',
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$18),
+    className: classnames(className, CLASSNAME$19),
     children: children || /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(SkeletonTypography$1, {
         typography: "body1",
@@ -10218,21 +10226,21 @@ const ComboboxOptionSkeleton = props => {
     ...props
   });
 };
-ComboboxOptionSkeleton.displayName = COMPONENT_NAME$1b;
-ComboboxOptionSkeleton.className = CLASSNAME$18;
+ComboboxOptionSkeleton.displayName = COMPONENT_NAME$1c;
+ComboboxOptionSkeleton.className = CLASSNAME$19;
 
 const DEFAULT_COMBOBOX_POPOVER_MAX_HEIGHT = '80vh';
 
-const COMPONENT_NAME$1a = 'ComboboxPopover';
+const COMPONENT_NAME$1b = 'ComboboxPopover';
 
 /**
  * Component default class name.
  */
-const CLASSNAME$17 = 'lumx-combobox-popover';
+const CLASSNAME$18 = 'lumx-combobox-popover';
 const {
-  block: block$S,
-  element: element$G
-} = bem(CLASSNAME$17);
+  block: block$T,
+  element: element$H
+} = bem(CLASSNAME$18);
 
 /**
  * Defines the props for the core ComboboxPopover template.
@@ -10275,7 +10283,7 @@ const ComboboxPopover$1 = (props, {
     placement: placement,
     fitToAnchorWidth: fitToAnchorWidth,
     maxHeight: maxHeight,
-    className: block$S([className]),
+    className: block$T([className]),
     anchorRef: anchorRef,
     isOpen: isOpen,
     onClose: handleClose,
@@ -10284,7 +10292,7 @@ const ComboboxPopover$1 = (props, {
     closeMode: "hide",
     children: /*#__PURE__*/jsx(FlexBox, {
       orientation: "vertical",
-      className: element$G('scroll'),
+      className: element$H('scroll'),
       children: children
     })
   });
@@ -10297,15 +10305,15 @@ const ComboboxPopover$1 = (props, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$19 = 'FlexBox';
+const COMPONENT_NAME$1a = 'FlexBox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$16 = 'lumx-flex-box';
+const CLASSNAME$17 = 'lumx-flex-box';
 const {
-  block: block$R
-} = bem(CLASSNAME$16);
+  block: block$S
+} = bem(CLASSNAME$17);
 
 /**
  * Get FlexBox component props (className computation).
@@ -10329,7 +10337,7 @@ function getFlexBoxProps(props) {
   const adjustedOrientation = orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null);
   return {
     ...forwardedProps,
-    className: classnames(className, block$R({
+    className: classnames(className, block$S({
       [`orientation-${adjustedOrientation}`]: Boolean(adjustedOrientation),
       [`v-align-${vAlign}`]: Boolean(vAlign),
       [`h-align-${hAlign}`]: Boolean(hAlign),
@@ -10361,8 +10369,8 @@ const FlexBox = forwardRef((props, ref) => {
     children: children
   });
 });
-FlexBox.displayName = COMPONENT_NAME$19;
-FlexBox.className = CLASSNAME$16;
+FlexBox.displayName = COMPONENT_NAME$1a;
+FlexBox.className = CLASSNAME$17;
 
 /**
  * Props for Popover that can be passed to Combobox.Popover.
@@ -10400,8 +10408,8 @@ const ComboboxPopover = props => {
     FlexBox
   });
 };
-ComboboxPopover.displayName = COMPONENT_NAME$1a;
-ComboboxPopover.className = CLASSNAME$17;
+ComboboxPopover.displayName = COMPONENT_NAME$1b;
+ComboboxPopover.className = CLASSNAME$18;
 
 /**
  * Combobox.Provider component.
@@ -10446,12 +10454,12 @@ ComboboxProvider.displayName = 'Combobox.Provider';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$18 = 'ComboboxSection';
+const COMPONENT_NAME$19 = 'ComboboxSection';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$15 = 'lumx-combobox-section';
+const CLASSNAME$16 = 'lumx-combobox-section';
 
 /**
  * ComboboxSection core template.
@@ -10478,7 +10486,7 @@ const ComboboxSection$1 = (props, {
     ...forwardedProps,
     hidden: hidden,
     "aria-hidden": ariaHidden || undefined,
-    className: !hidden ? classnames(className, CLASSNAME$15) : undefined,
+    className: !hidden ? classnames(className, CLASSNAME$16) : undefined,
     role: !ariaHidden ? 'none' : undefined,
     itemsWrapperProps: {
       role: 'group'
@@ -10490,21 +10498,21 @@ const ComboboxSection$1 = (props, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$17 = 'ListSection';
+const COMPONENT_NAME$18 = 'ListSection';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$14 = 'lumx-list-section';
+const CLASSNAME$15 = 'lumx-list-section';
 const {
-  block: block$Q,
-  element: element$F
-} = bem(CLASSNAME$14);
+  block: block$R,
+  element: element$G
+} = bem(CLASSNAME$15);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$X = {};
+const DEFAULT_PROPS$Y = {};
 
 /**
  * ListSection component.
@@ -10529,26 +10537,26 @@ const ListSection$1 = props => {
   return /*#__PURE__*/jsxs("li", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$Q()),
+    className: classnames(className, block$R()),
     children: [hasHeader && /*#__PURE__*/jsxs(Text, {
       as: "p",
       typography: "overline",
-      className: element$F('title'),
+      className: element$G('title'),
       id: labelId,
       children: [icon && Icon$1({
         icon
       }), label]
     }), /*#__PURE__*/jsx("ul", {
       ...itemsWrapperProps,
-      className: element$F('items'),
+      className: element$G('items'),
       "aria-labelledby": hasHeader ? labelId : undefined,
       children: children
     })]
   });
 };
-ListSection$1.displayName = COMPONENT_NAME$17;
-ListSection$1.className = CLASSNAME$14;
-ListSection$1.defaultProps = DEFAULT_PROPS$X;
+ListSection$1.displayName = COMPONENT_NAME$18;
+ListSection$1.className = CLASSNAME$15;
+ListSection$1.defaultProps = DEFAULT_PROPS$Y;
 
 /**
  * Defines the props of the component.
@@ -10570,9 +10578,9 @@ const ListSection = forwardRef((props, ref) => {
     Text
   });
 });
-ListSection.displayName = COMPONENT_NAME$17;
-ListSection.className = CLASSNAME$14;
-ListSection.defaultProps = DEFAULT_PROPS$X;
+ListSection.displayName = COMPONENT_NAME$18;
+ListSection.className = CLASSNAME$15;
+ListSection.defaultProps = DEFAULT_PROPS$Y;
 
 /**
  * Props for Combobox.Section component.
@@ -10620,21 +10628,21 @@ const ComboboxSection = forwardRef((props, ref) => {
     ListSection
   });
 });
-ComboboxSection.displayName = COMPONENT_NAME$18;
-ComboboxSection.className = CLASSNAME$15;
+ComboboxSection.displayName = COMPONENT_NAME$19;
+ComboboxSection.className = CLASSNAME$16;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$16 = 'ComboboxState';
+const COMPONENT_NAME$17 = 'ComboboxState';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$13 = 'lumx-combobox-state';
+const CLASSNAME$14 = 'lumx-combobox-state';
 const {
-  block: block$P
-} = bem(CLASSNAME$13);
+  block: block$Q
+} = bem(CLASSNAME$14);
 
 /**
  * Defines the props for the core ComboboxState template.
@@ -10695,7 +10703,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$P(), padding('regular')),
+    className: classnames(!show && visuallyHidden(), block$Q(), padding('regular')),
     orientation: "vertical",
     ...alignProps,
     role: "status",
@@ -10807,21 +10815,21 @@ function partitionMulti(elements, predicates) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$15 = 'GenericBlock';
+const COMPONENT_NAME$16 = 'GenericBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$12 = 'lumx-generic-block';
+const CLASSNAME$13 = 'lumx-generic-block';
 const {
-  block: block$O,
-  element: element$E
-} = bem(CLASSNAME$12);
+  block: block$P,
+  element: element$F
+} = bem(CLASSNAME$13);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$W = {
+const DEFAULT_PROPS$X = {
   gap: Size.big,
   orientation: Orientation.horizontal
 };
@@ -10845,33 +10853,33 @@ const GenericBlock$1 = props => {
     children,
     actions,
     actionsProps,
-    gap = DEFAULT_PROPS$W.gap,
+    gap = DEFAULT_PROPS$X.gap,
     ref,
     content,
-    orientation = DEFAULT_PROPS$W.orientation,
+    orientation = DEFAULT_PROPS$X.orientation,
     contentProps,
     FlexBox,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsxs(FlexBox, {
     ref: ref,
-    className: classnames(className, block$O()),
+    className: classnames(className, block$P()),
     gap: gap,
     orientation: orientation,
     ...forwardedProps,
     children: [figure && /*#__PURE__*/jsx(FlexBox, {
       ...figureProps,
-      className: classnames(figureProps?.className, element$E('figure')),
+      className: classnames(figureProps?.className, element$F('figure')),
       children: figure
     }), content && /*#__PURE__*/jsx(FlexBox, {
       orientation: Orientation.vertical,
       fillSpace: true,
       ...contentProps,
-      className: classnames(contentProps?.className, element$E('content')),
+      className: classnames(contentProps?.className, element$F('content')),
       children: content
     }), actions && /*#__PURE__*/jsx(FlexBox, {
       ...actionsProps,
-      className: classnames(actionsProps?.className, element$E('actions')),
+      className: classnames(actionsProps?.className, element$F('actions')),
       children: actions
     })]
   });
@@ -10958,9 +10966,9 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     }) : undefined
   });
 });
-BaseGenericBlock.displayName = COMPONENT_NAME$15;
-BaseGenericBlock.className = CLASSNAME$12;
-BaseGenericBlock.defaultProps = DEFAULT_PROPS$W;
+BaseGenericBlock.displayName = COMPONENT_NAME$16;
+BaseGenericBlock.className = CLASSNAME$13;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS$X;
 const GenericBlock = Object.assign(BaseGenericBlock, {
   Figure,
   Content,
@@ -11038,23 +11046,23 @@ const ComboboxState = props => {
     Text
   });
 };
-ComboboxState.displayName = COMPONENT_NAME$16;
-ComboboxState.className = CLASSNAME$13;
+ComboboxState.displayName = COMPONENT_NAME$17;
+ComboboxState.className = CLASSNAME$14;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$14 = 'ListDivider';
+const COMPONENT_NAME$15 = 'ListDivider';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$11 = 'lumx-list-divider';
+const CLASSNAME$12 = 'lumx-list-divider';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$V = {};
+const DEFAULT_PROPS$W = {};
 
 /**
  * ListDivider component.
@@ -11073,12 +11081,12 @@ const ListDivider$1 = props => {
     ref: ref,
     role: "none",
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$11)
+    className: classnames(className, CLASSNAME$12)
   });
 };
-ListDivider$1.displayName = COMPONENT_NAME$14;
-ListDivider$1.className = CLASSNAME$11;
-ListDivider$1.defaultProps = DEFAULT_PROPS$V;
+ListDivider$1.displayName = COMPONENT_NAME$15;
+ListDivider$1.className = CLASSNAME$12;
+ListDivider$1.defaultProps = DEFAULT_PROPS$W;
 
 /**
  * Defines the props of the component.
@@ -11098,9 +11106,9 @@ const ListDivider = forwardRef((props, ref) => {
     ref
   });
 });
-ListDivider.displayName = COMPONENT_NAME$14;
-ListDivider.className = CLASSNAME$11;
-ListDivider.defaultProps = DEFAULT_PROPS$V;
+ListDivider.displayName = COMPONENT_NAME$15;
+ListDivider.className = CLASSNAME$12;
+ListDivider.defaultProps = DEFAULT_PROPS$W;
 
 /**
  * Combobox compound component namespace.
@@ -11149,21 +11157,21 @@ const CommentBlockVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$13 = 'CommentBlock';
+const COMPONENT_NAME$14 = 'CommentBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$10 = 'lumx-comment-block';
+const CLASSNAME$11 = 'lumx-comment-block';
 const {
-  block: block$N,
-  element: element$D
-} = classNames.bem(CLASSNAME$10);
+  block: block$O,
+  element: element$E
+} = classNames.bem(CLASSNAME$11);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$U = {
+const DEFAULT_PROPS$V = {
   variant: CommentBlockVariant.indented
 };
 
@@ -11193,13 +11201,13 @@ const CommentBlock = forwardRef((props, ref) => {
     onMouseLeave,
     text,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$U.variant,
+    variant = DEFAULT_PROPS$V.variant,
     ...forwardedProps
   } = props;
   const hasChildren = Children.count(children) > 0;
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: classNames.join(className, block$N({
+    className: classNames.join(className, block$O({
       'has-children': hasChildren && isOpen,
       'has-indented-children': hasChildren && variant === CommentBlockVariant.indented,
       'has-linear-children': hasChildren && variant === CommentBlockVariant.linear,
@@ -11208,61 +11216,61 @@ const CommentBlock = forwardRef((props, ref) => {
     })),
     ...forwardedProps,
     children: [/*#__PURE__*/jsxs("div", {
-      className: element$D('wrapper'),
+      className: element$E('wrapper'),
       children: [/*#__PURE__*/jsx("div", {
-        className: element$D('avatar'),
+        className: element$E('avatar'),
         children: /*#__PURE__*/jsx(Avatar, {
           ...avatarProps,
           size: Size$1.m,
           onClick: onClick
         })
       }), /*#__PURE__*/jsxs("div", {
-        className: element$D('container'),
+        className: element$E('container'),
         children: [/*#__PURE__*/jsxs("div", {
-          className: element$D('content'),
+          className: element$E('content'),
           children: [/*#__PURE__*/jsxs("div", {
-            className: element$D('meta'),
+            className: element$E('meta'),
             children: [name &&
             /*#__PURE__*/
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
             jsx("span", {
-              className: element$D('name'),
+              className: element$E('name'),
               onClick: onClick,
               onMouseEnter: onMouseEnter,
               onMouseLeave: onMouseLeave,
               children: name
             }), headerActions && /*#__PURE__*/jsx("span", {
-              className: element$D('header-actions'),
+              className: element$E('header-actions'),
               children: headerActions
             })]
           }), /*#__PURE__*/jsx("div", {
-            className: element$D('text'),
+            className: element$E('text'),
             children: text
           }), date && (fullDate ? /*#__PURE__*/jsx(Tooltip, {
             label: fullDate,
             placement: "top",
             children: /*#__PURE__*/jsx("span", {
-              className: element$D('date'),
+              className: element$E('date'),
               children: date
             })
           }) : /*#__PURE__*/jsx("span", {
-            className: element$D('date'),
+            className: element$E('date'),
             children: date
           }))]
         }), hasActions && /*#__PURE__*/jsx("div", {
-          className: element$D('actions'),
+          className: element$E('actions'),
           children: actions
         })]
       })]
     }), hasChildren && isOpen && /*#__PURE__*/jsx("div", {
-      className: element$D('children'),
+      className: element$E('children'),
       children: children
     })]
   });
 });
-CommentBlock.displayName = COMPONENT_NAME$13;
-CommentBlock.className = CLASSNAME$10;
-CommentBlock.defaultProps = DEFAULT_PROPS$U;
+CommentBlock.displayName = COMPONENT_NAME$14;
+CommentBlock.className = CLASSNAME$11;
+CommentBlock.defaultProps = DEFAULT_PROPS$V;
 
 /**
  * Add a number of months from a date while resetting the day to prevent month length mismatches.
@@ -11282,12 +11290,12 @@ const isDateValid = date => date instanceof Date && !Number.isNaN(date.getTime()
 /**
  * Component display name.
  */
-const COMPONENT_NAME$12 = 'DatePicker';
+const COMPONENT_NAME$13 = 'DatePicker';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$$ = 'lumx-date-picker';
+const CLASSNAME$10 = 'lumx-date-picker';
 
 /** Get first day of week for locale from the browser API */
 const getFromBrowser = locale => {
@@ -11509,8 +11517,8 @@ function formatDayNumber(locale, date) {
 }
 
 const {
-  element: element$C
-} = classNames.bem(CLASSNAME$$);
+  element: element$D
+} = classNames.bem(CLASSNAME$10);
 
 /**
  * Defines the props of the component.
@@ -11519,7 +11527,7 @@ const {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$11 = 'DatePickerControlled';
+const COMPONENT_NAME$12 = 'DatePickerControlled';
 
 /**
  * DatePickerControlled component.
@@ -11604,10 +11612,10 @@ const DatePickerControlled = forwardRef((props, ref) => {
   const yearLabel = getYearDisplayName(locale);
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: `${CLASSNAME$$}`,
+    className: `${CLASSNAME$10}`,
     style: style,
     children: [/*#__PURE__*/jsx(Toolbar, {
-      className: element$C('toolbar'),
+      className: element$D('toolbar'),
       after: /*#__PURE__*/jsx(IconButton, {
         ...nextButtonProps,
         emphasis: Emphasis$1.low,
@@ -11627,7 +11635,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
           dir: "auto",
           children: monthYear
         }), onMonthChange && /*#__PURE__*/jsx(FlexBox, {
-          className: element$C('month'),
+          className: element$D('month'),
           orientation: "horizontal",
           hAlign: "center",
           gap: "regular",
@@ -11642,7 +11650,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
             min: 0,
             onBlur: updateYear,
             onKeyPress: updateYearOnEnterPressed,
-            className: element$C('year')
+            className: element$D('year')
           }, "year") : /*#__PURE__*/jsx(Text, {
             as: "p",
             children: part
@@ -11650,17 +11658,17 @@ const DatePickerControlled = forwardRef((props, ref) => {
         })]
       })
     }), /*#__PURE__*/jsxs("div", {
-      className: element$C('calendar'),
+      className: element$D('calendar'),
       children: [/*#__PURE__*/jsx("div", {
-        className: classNames.join(element$C('week-days'), element$C('days-wrapper')),
+        className: classNames.join(element$D('week-days'), element$D('days-wrapper')),
         children: weekDays.map(({
           letter,
           number,
           long
         }) => /*#__PURE__*/jsxs("div", {
-          className: element$C('day-wrapper'),
+          className: element$D('day-wrapper'),
           children: [/*#__PURE__*/jsx("span", {
-            className: element$C('week-day'),
+            className: element$D('week-day'),
             "aria-hidden": true,
             children: letter.toLocaleUpperCase()
           }), /*#__PURE__*/jsx("span", {
@@ -11669,7 +11677,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
           })]
         }, number))
       }), /*#__PURE__*/jsx("div", {
-        className: classNames.join(element$C('month-days'), element$C('days-wrapper')),
+        className: classNames.join(element$D('month-days'), element$D('days-wrapper')),
         children: weeks.flatMap((week, weekIndex) => {
           return weekDays.map((weekDay, dayIndex) => {
             const {
@@ -11680,10 +11688,10 @@ const DatePickerControlled = forwardRef((props, ref) => {
             const isToday = !isOutOfRange && date && isSameDay(date, new Date());
             const isSelected = date && value && isSameDay(value, date);
             return /*#__PURE__*/jsx("div", {
-              className: element$C('day-wrapper'),
+              className: element$D('day-wrapper'),
               children: date && /*#__PURE__*/jsxs(Button, {
                 ref: isSelected || !value && isToday ? todayOrSelectedDateRef : null,
-                className: element$C('month-day', {
+                className: element$D('month-day', {
                   'is-today': isToday
                 }),
                 disabled: isOutOfRange,
@@ -11709,8 +11717,8 @@ const DatePickerControlled = forwardRef((props, ref) => {
     })]
   });
 });
-DatePickerControlled.displayName = COMPONENT_NAME$11;
-DatePickerControlled.className = CLASSNAME$$;
+DatePickerControlled.displayName = COMPONENT_NAME$12;
+DatePickerControlled.className = CLASSNAME$10;
 
 /**
  * DatePicker component.
@@ -11752,8 +11760,8 @@ const DatePicker = forwardRef((props, ref) => {
     onMonthChange: setSelectedMonth
   });
 });
-DatePicker.displayName = COMPONENT_NAME$12;
-DatePicker.className = CLASSNAME$$;
+DatePicker.displayName = COMPONENT_NAME$13;
+DatePicker.className = CLASSNAME$10;
 
 const useBooleanState = defaultValue => {
   const [booleanValue, setBoolean] = useState(defaultValue);
@@ -11766,7 +11774,7 @@ const useBooleanState = defaultValue => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$10 = 'DatePickerField';
+const COMPONENT_NAME$11 = 'DatePickerField';
 
 /**
  * DatePickerField component.
@@ -11855,7 +11863,7 @@ const DatePickerField = forwardRef((props, ref) => {
     }) : null]
   });
 });
-DatePickerField.displayName = COMPONENT_NAME$10;
+DatePickerField.displayName = COMPONENT_NAME$11;
 
 /**
  * Convenient hook to create interaction observers.
@@ -12156,7 +12164,7 @@ const DIALOG_LABEL_KEY = 'dialog-label';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$$ = 'Dialog';
+const COMPONENT_NAME$10 = 'Dialog';
 
 /**
  * `DialogHeading` component display name.
@@ -12166,16 +12174,16 @@ const DIALOG_HEADING_COMPONENT_NAME = 'DialogHeading';
 /**
  * Component default class name and class prefix. Shared by the shell and the container modules.
  */
-const CLASSNAME$_ = 'lumx-dialog';
+const CLASSNAME$$ = 'lumx-dialog';
 const {
-  block: block$M,
-  element: element$B
-} = bem(CLASSNAME$_);
+  block: block$N,
+  element: element$C
+} = bem(CLASSNAME$$);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$T = {
+const DEFAULT_PROPS$U = {
   size: Size.big
 };
 
@@ -12192,7 +12200,7 @@ const DialogShell = props => {
     isOpen,
     isLoading,
     isVisible,
-    size = DEFAULT_PROPS$T.size,
+    size = DEFAULT_PROPS$U.size,
     zIndex,
     children,
     Portal,
@@ -12205,7 +12213,7 @@ const DialogShell = props => {
     children: /*#__PURE__*/jsxs("div", {
       ref: ref,
       ...forwardedProps,
-      className: classnames(className, block$M({
+      className: classnames(className, block$N({
         'is-hidden': !isOpen,
         'is-loading': isLoading,
         'is-shown': isOpen || isVisible,
@@ -12215,7 +12223,7 @@ const DialogShell = props => {
         zIndex
       },
       children: [/*#__PURE__*/jsx("div", {
-        className: element$B('overlay')
+        className: element$C('overlay')
       }), /*#__PURE__*/jsx(HeadingLevelProvider, {
         level: 2,
         children: /*#__PURE__*/jsx(ThemeProvider, {
@@ -12294,7 +12302,7 @@ const DialogContent$1 = props => {
     ...restDialogProps
   } = dialogProps ?? {};
   return /*#__PURE__*/jsx("div", {
-    className: element$B('container'),
+    className: element$C('container'),
     role: "dialog",
     "aria-modal": "true",
     ...restDialogProps,
@@ -12304,36 +12312,36 @@ const DialogContent$1 = props => {
       childrenRefs: clickAwayRefs,
       parentRef: rootRef,
       children: /*#__PURE__*/jsxs("section", {
-        className: element$B('wrapper'),
+        className: element$C('wrapper'),
         ref: wrapperRef,
         children: [(header || headerChildContent) && /*#__PURE__*/jsxs("header", {
           ...headerChildProps,
-          className: classnames(element$B('header', {
+          className: classnames(element$C('header', {
             'has-divider': Boolean(forceHeaderDivider || hasTopIntersection)
           }), headerChildProps?.className),
           children: [header, headerChildContent]
         }), /*#__PURE__*/jsxs("div", {
           ref: contentRef,
-          className: element$B('content'),
+          className: element$C('content'),
           children: [/*#__PURE__*/jsx("div", {
-            className: element$B('sentinel', {
+            className: element$C('sentinel', {
               top: true
             }),
             ref: setSentinelTop
           }), content, /*#__PURE__*/jsx("div", {
-            className: element$B('sentinel', {
+            className: element$C('sentinel', {
               bottom: true
             }),
             ref: setSentinelBottom
           })]
         }), (footer || footerChildContent) && /*#__PURE__*/jsxs("footer", {
           ...footerChildProps,
-          className: classnames(element$B('footer', {
+          className: classnames(element$C('footer', {
             'has-divider': Boolean(forceFooterDivider || hasBottomIntersection)
           }), footerChildProps?.className),
           children: [footer, footerChildContent]
         }), isLoading && /*#__PURE__*/jsx("div", {
-          className: element$B('progress-overlay'),
+          className: element$C('progress-overlay'),
           children: /*#__PURE__*/jsx(ProgressCircular, {})
         })]
       })
@@ -12488,7 +12496,7 @@ const isFooter$1 = isComponent('footer');
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$S = {
+const DEFAULT_PROPS$T = {
   closeMode: 'unmount',
   size: Size$1.big,
   disableBodyScroll: true
@@ -12505,7 +12513,7 @@ const DialogBody = forwardRef((props, ref) => {
   const {
     children,
     className,
-    closeMode = DEFAULT_PROPS$S.closeMode,
+    closeMode = DEFAULT_PROPS$T.closeMode,
     header,
     focusElement,
     forceFooterDivider,
@@ -12517,11 +12525,11 @@ const DialogBody = forwardRef((props, ref) => {
     parentElement,
     contentRef,
     preventAutoClose,
-    size = DEFAULT_PROPS$S.size,
+    size = DEFAULT_PROPS$T.size,
     zIndex,
     dialogProps,
     onVisibilityChange,
-    disableBodyScroll = DEFAULT_PROPS$S.disableBodyScroll,
+    disableBodyScroll = DEFAULT_PROPS$T.disableBodyScroll,
     preventCloseOnClick,
     preventCloseOnEscape,
     ...forwardedProps
@@ -12619,9 +12627,9 @@ const Dialog = forwardRef((props, ref) => {
     ref: ref
   });
 });
-Dialog.displayName = COMPONENT_NAME$$;
-Dialog.className = CLASSNAME$_;
-Dialog.defaultProps = DEFAULT_PROPS$S;
+Dialog.displayName = COMPONENT_NAME$10;
+Dialog.className = CLASSNAME$$;
+Dialog.defaultProps = DEFAULT_PROPS$T;
 
 /** The maximum authorized heading level. */
 const MAX_HEADING_LEVEL = 6;
@@ -12649,17 +12657,17 @@ const defaultContext = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$_ = 'Heading';
+const COMPONENT_NAME$$ = 'Heading';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Z = 'lumx-heading';
+const CLASSNAME$_ = 'lumx-heading';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$R = {};
+const DEFAULT_PROPS$S = {};
 
 /**
  * Get Heading component common props
@@ -12679,7 +12687,7 @@ const getHeadingProps = (props, contextHeadingElement) => {
   return {
     ...otherProps,
     as: computedHeadingElement,
-    className: classnames(className, CLASSNAME$Z),
+    className: classnames(className, CLASSNAME$_),
     typography: typography || DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]
   };
 };
@@ -12717,9 +12725,9 @@ const Heading = forwardRef((props, ref) => {
     children: children
   });
 });
-Heading.displayName = COMPONENT_NAME$_;
-Heading.className = CLASSNAME$Z;
-Heading.defaultProps = DEFAULT_PROPS$R;
+Heading.displayName = COMPONENT_NAME$$;
+Heading.className = CLASSNAME$_;
+Heading.defaultProps = DEFAULT_PROPS$S;
 
 /**
  * Computes the next heading level based on the optional prop level or the parent context level.
@@ -12794,15 +12802,15 @@ DialogHeading.displayName = DIALOG_HEADING_COMPONENT_NAME;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Z = 'Divider';
+const COMPONENT_NAME$_ = 'Divider';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Y = 'lumx-divider';
+const CLASSNAME$Z = 'lumx-divider';
 const {
-  block: block$L
-} = bem(CLASSNAME$Y);
+  block: block$M
+} = bem(CLASSNAME$Z);
 
 /**
  * Divider component.
@@ -12820,7 +12828,7 @@ const Divider$1 = props => {
   return /*#__PURE__*/jsx("hr", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$L({
+    className: classnames(className, block$M({
       [`theme-${theme}`]: Boolean(theme)
     }))
   });
@@ -12833,7 +12841,7 @@ const Divider$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Q = {};
+const DEFAULT_PROPS$R = {};
 
 /**
  * Divider component.
@@ -12854,22 +12862,22 @@ const Divider = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-Divider.displayName = COMPONENT_NAME$Z;
-Divider.className = CLASSNAME$Y;
-Divider.defaultProps = DEFAULT_PROPS$Q;
+Divider.displayName = COMPONENT_NAME$_;
+Divider.className = CLASSNAME$Z;
+Divider.defaultProps = DEFAULT_PROPS$R;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Y = 'DragHandle';
+const COMPONENT_NAME$Z = 'DragHandle';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$X = 'lumx-drag-handle';
+const CLASSNAME$Y = 'lumx-drag-handle';
 const {
-  block: block$K
-} = bem(CLASSNAME$X);
+  block: block$L
+} = bem(CLASSNAME$Y);
 
 /**
  * DragHandle component.
@@ -12887,7 +12895,7 @@ const DragHandle$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$K({
+    className: classnames(className, block$L({
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: Icon$1({
@@ -12905,7 +12913,7 @@ const DragHandle$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$P = {};
+const DEFAULT_PROPS$Q = {};
 
 /**
  * DragHandle component.
@@ -12926,9 +12934,9 @@ const DragHandle = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-DragHandle.displayName = COMPONENT_NAME$Y;
-DragHandle.className = CLASSNAME$X;
-DragHandle.defaultProps = DEFAULT_PROPS$P;
+DragHandle.displayName = COMPONENT_NAME$Z;
+DragHandle.className = CLASSNAME$Y;
+DragHandle.defaultProps = DEFAULT_PROPS$Q;
 
 const INITIAL_INDEX = -1;
 
@@ -13122,9 +13130,9 @@ const InternalList = forwardRef((props, ref) => {
     itemPadding: adjustedItemPadding
   });
 });
-InternalList.displayName = COMPONENT_NAME$1k;
-InternalList.className = CLASSNAME$1h;
-InternalList.defaultProps = DEFAULT_PROPS$$;
+InternalList.displayName = COMPONENT_NAME$1l;
+InternalList.className = CLASSNAME$1i;
+InternalList.defaultProps = DEFAULT_PROPS$10;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
 });
@@ -13173,21 +13181,21 @@ const useInfiniteScroll = (ref, callback, callbackOnMount = false, scrollTrigger
 /**
  * Component display name.
  */
-const COMPONENT_NAME$X = 'Dropdown';
+const COMPONENT_NAME$Y = 'Dropdown';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$W = 'lumx-dropdown';
+const CLASSNAME$X = 'lumx-dropdown';
 const {
-  block: block$J,
-  element: element$A
-} = classNames.bem(CLASSNAME$W);
+  block: block$K,
+  element: element$B
+} = classNames.bem(CLASSNAME$X);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$O = {
+const DEFAULT_PROPS$P = {
   closeOnClick: true,
   closeOnClickAway: true,
   closeOnEscape: true,
@@ -13211,18 +13219,18 @@ const Dropdown = forwardRef((props, ref) => {
     anchorRef,
     children,
     className,
-    closeOnClick = DEFAULT_PROPS$O.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$O.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$O.closeOnEscape,
-    fitToAnchorWidth = DEFAULT_PROPS$O.fitToAnchorWidth,
-    fitWithinViewportHeight = DEFAULT_PROPS$O.fitWithinViewportHeight,
+    closeOnClick = DEFAULT_PROPS$P.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$P.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$P.closeOnEscape,
+    fitToAnchorWidth = DEFAULT_PROPS$P.fitToAnchorWidth,
+    fitWithinViewportHeight = DEFAULT_PROPS$P.fitWithinViewportHeight,
     isOpen,
     offset,
-    focusAnchorOnClose = DEFAULT_PROPS$O.focusAnchorOnClose,
+    focusAnchorOnClose = DEFAULT_PROPS$P.focusAnchorOnClose,
     onClose,
     onInfiniteScroll,
-    placement = DEFAULT_PROPS$O.placement,
-    shouldFocusOnOpen = DEFAULT_PROPS$O.shouldFocusOnOpen,
+    placement = DEFAULT_PROPS$P.placement,
+    shouldFocusOnOpen = DEFAULT_PROPS$P.shouldFocusOnOpen,
     zIndex,
     ...forwardedProps
   } = props;
@@ -13247,7 +13255,7 @@ const Dropdown = forwardRef((props, ref) => {
     ...forwardedProps,
     focusAnchorOnClose: focusAnchorOnClose,
     anchorRef: anchorRef,
-    className: classNames.join(className, block$J()),
+    className: classNames.join(className, block$K()),
     elevation: 0,
     closeOnClickAway: closeOnClickAway,
     closeOnEscape: closeOnEscape,
@@ -13260,34 +13268,34 @@ const Dropdown = forwardRef((props, ref) => {
     placement: placement,
     zIndex: zIndex,
     children: /*#__PURE__*/jsx("div", {
-      className: element$A('menu'),
+      className: element$B('menu'),
       ref: innerRef,
       children: popperElement
     })
   }) : null;
 });
-Dropdown.displayName = COMPONENT_NAME$X;
-Dropdown.className = CLASSNAME$W;
-Dropdown.defaultProps = DEFAULT_PROPS$O;
+Dropdown.displayName = COMPONENT_NAME$Y;
+Dropdown.className = CLASSNAME$X;
+Dropdown.defaultProps = DEFAULT_PROPS$P;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$W = 'ExpansionPanel';
+const COMPONENT_NAME$X = 'ExpansionPanel';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$V = 'lumx-expansion-panel';
+const CLASSNAME$W = 'lumx-expansion-panel';
 const {
-  block: block$I,
-  element: element$z
-} = bem(CLASSNAME$V);
+  block: block$J,
+  element: element$A
+} = bem(CLASSNAME$W);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$N = {
+const DEFAULT_PROPS$O = {
   closeMode: 'unmount'
 };
 
@@ -13336,7 +13344,7 @@ const ExpansionPanel$1 = props => {
     }
   };
   const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
-  const rootClassName = classnames(className, block$I({
+  const rootClassName = classnames(className, block$J({
     'has-background': hasBackground,
     'has-header': Boolean(!isEmpty(headerProps.children)),
     'has-header-divider': hasHeaderDivider,
@@ -13350,17 +13358,17 @@ const ExpansionPanel$1 = props => {
     ...forwardedProps,
     className: rootClassName,
     children: [/*#__PURE__*/jsxs("header", {
-      className: element$z('header'),
+      className: element$A('header'),
       onClick: toggleOpen,
       children: [dragHandle && /*#__PURE__*/jsx("div", {
-        className: element$z('header-drag'),
+        className: element$A('header-drag'),
         children: dragHandle
       }), /*#__PURE__*/jsx("div", {
         ...headerProps,
-        className: element$z('header-content'),
+        className: element$A('header-content'),
         children: headerContent
       }), /*#__PURE__*/jsx("div", {
-        className: element$z('header-toggle'),
+        className: element$A('header-toggle'),
         children: /*#__PURE__*/jsx(IconButton, {
           ...toggleButtonProps,
           color: color,
@@ -13370,15 +13378,15 @@ const ExpansionPanel$1 = props => {
         })
       })]
     }), /*#__PURE__*/jsx("div", {
-      className: element$z('wrapper'),
+      className: element$A('wrapper'),
       ref: wrapperRef,
       children: (isOpen || isChildrenVisible) && /*#__PURE__*/jsxs("div", {
-        className: element$z('container'),
+        className: element$A('container'),
         children: [/*#__PURE__*/jsx("div", {
-          className: element$z('content'),
+          className: element$A('content'),
           children: content
         }), footer && /*#__PURE__*/jsx("div", {
-          className: element$z('footer'),
+          className: element$A('footer'),
           children: footer
         })]
       })
@@ -13400,7 +13408,7 @@ const isFooter = isComponent('footer');
 const ExpansionPanel = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
-    closeMode = DEFAULT_PROPS$N.closeMode,
+    closeMode = DEFAULT_PROPS$O.closeMode,
     children: anyChildren,
     isOpen,
     label,
@@ -13418,7 +13426,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   // Either take the header in children or create one with the label.
   const headerProps = /*#__PURE__*/React__default.isValidElement(header) ? header.props : {};
   const headerContent = !isEmpty(headerProps.children) ? headerProps.children : /*#__PURE__*/jsx("span", {
-    className: element$z('label'),
+    className: element$A('label'),
     children: label
   });
   const wrapperRef = useRef(null);
@@ -13471,17 +13479,17 @@ const ExpansionPanel = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-ExpansionPanel.displayName = COMPONENT_NAME$W;
-ExpansionPanel.className = CLASSNAME$V;
-ExpansionPanel.defaultProps = DEFAULT_PROPS$N;
+ExpansionPanel.displayName = COMPONENT_NAME$X;
+ExpansionPanel.className = CLASSNAME$W;
+ExpansionPanel.defaultProps = DEFAULT_PROPS$O;
 
-const COMPONENT_NAME$V = 'Flag';
-const CLASSNAME$U = 'lumx-flag';
-const DEFAULT_PROPS$M = {};
+const COMPONENT_NAME$W = 'Flag';
+const CLASSNAME$V = 'lumx-flag';
+const DEFAULT_PROPS$N = {};
 const {
-  block: block$H,
-  element: element$y
-} = bem(CLASSNAME$U);
+  block: block$I,
+  element: element$z
+} = bem(CLASSNAME$V);
 
 /**
  * Flag component.
@@ -13504,19 +13512,19 @@ const Flag$1 = props => {
   const isTruncated = !!truncate;
   return /*#__PURE__*/jsxs("div", {
     ...forwardedProps,
-    className: classnames(className, block$H({
+    className: classnames(className, block$I({
       [`color-${flagColor}`]: Boolean(flagColor),
       'is-truncated': isTruncated
     })),
     children: [icon && Icon$1({
       icon,
       size: Size.xxs,
-      className: element$y('icon')
+      className: element$z('icon')
     }), /*#__PURE__*/jsx(Text, {
       as: "span",
       truncate: !!truncate,
       typography: "overline",
-      className: element$y('label'),
+      className: element$z('label'),
       children: children
     })]
   });
@@ -13539,27 +13547,27 @@ const Flag = forwardRef((props, ref) => {
     Text
   });
 });
-Flag.displayName = COMPONENT_NAME$V;
-Flag.className = CLASSNAME$U;
-Flag.defaultProps = DEFAULT_PROPS$M;
+Flag.displayName = COMPONENT_NAME$W;
+Flag.className = CLASSNAME$V;
+Flag.defaultProps = DEFAULT_PROPS$N;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$U = 'Grid';
+const COMPONENT_NAME$V = 'Grid';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$T = 'lumx-grid';
+const CLASSNAME$U = 'lumx-grid';
 const {
-  block: block$G
-} = classNames.bem(CLASSNAME$T);
+  block: block$H
+} = classNames.bem(CLASSNAME$U);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$L = {
+const DEFAULT_PROPS$M = {
   orientation: Orientation$1.horizontal,
   wrap: 'nowrap'
 };
@@ -13577,15 +13585,15 @@ const Grid = forwardRef((props, ref) => {
     className,
     gutter,
     hAlign,
-    orientation = DEFAULT_PROPS$L.orientation,
+    orientation = DEFAULT_PROPS$M.orientation,
     vAlign,
-    wrap = DEFAULT_PROPS$L.wrap,
+    wrap = DEFAULT_PROPS$M.wrap,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, classNames.bem(`${CLASSNAME$T}-container`).block(), block$G({
+    className: classNames.join(className, classNames.bem(`${CLASSNAME$U}-container`).block(), block$H({
       [`h-align-${hAlign}`]: Boolean(hAlign),
       [`v-align-${vAlign}`]: Boolean(vAlign),
       [`orientation-${orientation}`]: Boolean(orientation),
@@ -13595,22 +13603,22 @@ const Grid = forwardRef((props, ref) => {
     children: children
   });
 });
-Grid.displayName = COMPONENT_NAME$U;
-Grid.className = CLASSNAME$T;
-Grid.defaultProps = DEFAULT_PROPS$L;
+Grid.displayName = COMPONENT_NAME$V;
+Grid.className = CLASSNAME$U;
+Grid.defaultProps = DEFAULT_PROPS$M;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$T = 'GridItem';
+const COMPONENT_NAME$U = 'GridItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$S = 'lumx-grid-item';
+const CLASSNAME$T = 'lumx-grid-item';
 const {
-  block: block$F
-} = classNames.bem(CLASSNAME$S);
+  block: block$G
+} = classNames.bem(CLASSNAME$T);
 
 /**
  * GridItem component.
@@ -13631,7 +13639,7 @@ const GridItem = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$F({
+    className: classNames.join(className, block$G({
       [`width-${width}`]: Boolean(width),
       [`order-${order}`]: Boolean(order),
       [`align-${align}`]: Boolean(align)
@@ -13639,23 +13647,23 @@ const GridItem = forwardRef((props, ref) => {
     children: children
   });
 });
-GridItem.displayName = COMPONENT_NAME$T;
-GridItem.className = CLASSNAME$S;
+GridItem.displayName = COMPONENT_NAME$U;
+GridItem.className = CLASSNAME$T;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$S = 'GridColumn';
+const COMPONENT_NAME$T = 'GridColumn';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$R = 'lumx-grid-column';
+const CLASSNAME$S = 'lumx-grid-column';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$K = {};
+const DEFAULT_PROPS$L = {};
 
 /**
  * The GridColumn is a layout component that can display children in a grid
@@ -13680,7 +13688,7 @@ const GridColumn$1 = props => {
   return /*#__PURE__*/jsx(Component, {
     ...forwardedProps,
     ref: ref,
-    className: classnames(className, CLASSNAME$R),
+    className: classnames(className, CLASSNAME$S),
     style: {
       ...style,
       ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
@@ -13690,9 +13698,9 @@ const GridColumn$1 = props => {
     children: children
   });
 };
-GridColumn$1.displayName = COMPONENT_NAME$S;
-GridColumn$1.className = CLASSNAME$R;
-GridColumn$1.defaultProps = DEFAULT_PROPS$K;
+GridColumn$1.displayName = COMPONENT_NAME$T;
+GridColumn$1.className = CLASSNAME$S;
+GridColumn$1.defaultProps = DEFAULT_PROPS$L;
 
 /**
  * Defines the props of the component.
@@ -13703,7 +13711,7 @@ GridColumn$1.defaultProps = DEFAULT_PROPS$K;
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$J = {};
+const DEFAULT_PROPS$K = {};
 
 /**
  * The GridColumn is a layout component that can display children in a grid
@@ -13720,9 +13728,9 @@ const GridColumn = forwardRef((props, ref) => {
     ...props
   });
 });
-GridColumn.displayName = COMPONENT_NAME$S;
-GridColumn.className = CLASSNAME$R;
-GridColumn.defaultProps = DEFAULT_PROPS$J;
+GridColumn.displayName = COMPONENT_NAME$T;
+GridColumn.className = CLASSNAME$S;
+GridColumn.defaultProps = DEFAULT_PROPS$K;
 
 /**
  * Image block variants.
@@ -13743,21 +13751,21 @@ const ImageBlockCaptionPosition = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$R = 'ImageBlock';
+const COMPONENT_NAME$S = 'ImageBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Q = 'lumx-image-block';
+const CLASSNAME$R = 'lumx-image-block';
 const {
-  block: block$E,
-  element: element$x
-} = bem(CLASSNAME$Q);
+  block: block$F,
+  element: element$y
+} = bem(CLASSNAME$R);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$I = {
+const DEFAULT_PROPS$J = {
   captionPosition: ImageBlockCaptionPosition.below,
   align: Alignment.left
 };
@@ -13772,9 +13780,9 @@ const DEFAULT_PROPS$I = {
 const ImageBlock$1 = props => {
   const {
     actions,
-    align = DEFAULT_PROPS$I.align,
+    align = DEFAULT_PROPS$J.align,
     alt,
-    captionPosition = DEFAULT_PROPS$I.captionPosition,
+    captionPosition = DEFAULT_PROPS$J.captionPosition,
     captionStyle,
     className,
     description,
@@ -13795,7 +13803,7 @@ const ImageBlock$1 = props => {
   return /*#__PURE__*/jsxs("figure", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$E({
+    className: classnames(className, block$F({
       [`caption-position-${captionPosition}`]: Boolean(captionPosition),
       [`align-${align}`]: Boolean(align),
       [`size-${size}`]: Boolean(size),
@@ -13804,7 +13812,7 @@ const ImageBlock$1 = props => {
     })),
     children: [/*#__PURE__*/jsx(Thumbnail, {
       ...thumbnailProps,
-      className: classnames(element$x('image'), thumbnailProps?.className),
+      className: classnames(element$y('image'), thumbnailProps?.className),
       fillHeight: fillHeight,
       align: align,
       image: image,
@@ -13813,7 +13821,7 @@ const ImageBlock$1 = props => {
       alt: alt || title
     }), /*#__PURE__*/jsx(ImageCaption, {
       as: "figcaption",
-      baseClassName: CLASSNAME$Q,
+      baseClassName: CLASSNAME$R,
       theme: theme,
       title: title,
       titleProps: titleProps,
@@ -13824,7 +13832,7 @@ const ImageBlock$1 = props => {
       align: align,
       truncate: captionPosition === 'over'
     }), actions && /*#__PURE__*/jsx("div", {
-      className: element$x('actions'),
+      className: element$y('actions'),
       children: actions
     })]
   });
@@ -13944,19 +13952,19 @@ const ImageBlock = forwardRef((props, ref) => {
     ImageCaption
   });
 });
-ImageBlock.displayName = COMPONENT_NAME$R;
-ImageBlock.className = CLASSNAME$Q;
-ImageBlock.defaultProps = DEFAULT_PROPS$I;
+ImageBlock.displayName = COMPONENT_NAME$S;
+ImageBlock.className = CLASSNAME$R;
+ImageBlock.defaultProps = DEFAULT_PROPS$J;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Q = 'ImageLightbox';
+const COMPONENT_NAME$R = 'ImageLightbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$P = 'lumx-image-lightbox';
+const CLASSNAME$Q = 'lumx-image-lightbox';
 
 /**
  * Observe element size (only works if it's size depends on the window size).
@@ -14201,8 +14209,8 @@ function useAnimateScroll(scrollAreaRef) {
 }
 
 const {
-  element: element$w
-} = classNames.bem(CLASSNAME$P);
+  element: element$x
+} = classNames.bem(CLASSNAME$Q);
 /** Internal image slide component for ImageLightbox */
 const ImageSlide = /*#__PURE__*/React__default.memo(props => {
   const {
@@ -14269,12 +14277,12 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
     // Make it accessible to keyboard nav when the zone is scrollable
     ,
     tabIndex: isScrollable ? 0 : undefined,
-    className: element$w('image-slide'),
+    className: element$x('image-slide'),
     children: /*#__PURE__*/jsx(Thumbnail, {
       imgRef: useMergeRefs(imgRef, propImgRef),
       image: image,
       alt: alt,
-      className: element$w('thumbnail'),
+      className: element$x('thumbnail'),
       imgProps: {
         ...imgProps,
         style: {
@@ -14293,8 +14301,8 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
 }, isEqual);
 
 const {
-  element: element$v
-} = classNames.bem(CLASSNAME$P);
+  element: element$w
+} = classNames.bem(CLASSNAME$Q);
 /** Internal image slideshow component for ImageLightbox */
 const ImageSlideshow = ({
   activeImageIndex,
@@ -14415,12 +14423,12 @@ const ImageSlideshow = ({
       })
     }), (metadata || slideShowControls || zoomControls) && /*#__PURE__*/jsxs(FlexBox, {
       ref: footerRef,
-      className: element$v('footer'),
+      className: element$w('footer'),
       orientation: "vertical",
       vAlign: "center",
       gap: "big",
       children: [metadata, /*#__PURE__*/jsxs(FlexBox, {
-        className: element$v('footer-actions'),
+        className: element$w('footer-actions'),
         orientation: "horizontal",
         gap: "regular",
         children: [slideShowControls, zoomControls]
@@ -14534,7 +14542,7 @@ function useImageLightbox(props) {
         viewTransitionName: {
           source: currentImageRef,
           target: triggerImageRefs[currentIndex],
-          name: CLASSNAME$P
+          name: CLASSNAME$Q
         }
       });
     }
@@ -14586,7 +14594,7 @@ function useImageLightbox(props) {
         viewTransitionName: {
           source: triggerImage,
           target: currentImageRef,
-          name: CLASSNAME$P
+          name: CLASSNAME$Q
         }
       });
     }
@@ -14641,7 +14649,7 @@ const Inner = forwardRef((props, ref) => {
   }, [onClose]);
   return /*#__PURE__*/jsx(Lightbox, {
     ref: ref,
-    className: classNames.join(className, CLASSNAME$P),
+    className: classNames.join(className, CLASSNAME$Q),
     parentElement: parentElement,
     isOpen: isOpen,
     onClose: onClose,
@@ -14670,8 +14678,8 @@ const Inner = forwardRef((props, ref) => {
     })
   });
 });
-Inner.displayName = COMPONENT_NAME$Q;
-Inner.className = CLASSNAME$P;
+Inner.displayName = COMPONENT_NAME$R;
+Inner.className = CLASSNAME$Q;
 
 /**
  * ImageLightbox component.
@@ -14687,21 +14695,21 @@ const ImageLightbox = Object.assign(Inner, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$P = 'InlineList';
+const COMPONENT_NAME$Q = 'InlineList';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$O = 'lumx-inline-list';
+const CLASSNAME$P = 'lumx-inline-list';
 const {
-  block: block$D,
-  element: element$u
-} = bem(CLASSNAME$O);
+  block: block$E,
+  element: element$v
+} = bem(CLASSNAME$P);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$H = {};
+const DEFAULT_PROPS$I = {};
 
 /**
  * InlineList component.
@@ -14726,7 +14734,7 @@ const InlineList$1 = props => {
     jsx("ul", {
       ...forwardedProps,
       ref: ref,
-      className: classnames(className, block$D({
+      className: classnames(className, block$E({
         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
@@ -14738,9 +14746,9 @@ const InlineList$1 = props => {
       // eslint-disable-next-line jsx-a11y/no-redundant-roles
       jsxs("li", {
         role: "listitem",
-        className: element$u('item'),
+        className: element$v('item'),
         children: [index !== 0 && /*#__PURE__*/jsx("span", {
-          className: element$u('item-separator'),
+          className: element$v('item-separator'),
           "aria-hidden": "true",
           children: '\u00A0•\u00A0'
         }), item]
@@ -14748,9 +14756,9 @@ const InlineList$1 = props => {
     })
   );
 };
-InlineList$1.displayName = COMPONENT_NAME$P;
-InlineList$1.className = CLASSNAME$O;
-InlineList$1.defaultProps = DEFAULT_PROPS$H;
+InlineList$1.displayName = COMPONENT_NAME$Q;
+InlineList$1.className = CLASSNAME$P;
+InlineList$1.defaultProps = DEFAULT_PROPS$I;
 
 /**
  * Defines the props of the component.
@@ -14774,9 +14782,9 @@ const InlineList = forwardRef((props, ref) => {
     items: Children.toArray(children)
   });
 });
-InlineList.displayName = COMPONENT_NAME$P;
-InlineList.className = CLASSNAME$O;
-InlineList.defaultProps = DEFAULT_PROPS$H;
+InlineList.displayName = COMPONENT_NAME$Q;
+InlineList.className = CLASSNAME$P;
+InlineList.defaultProps = DEFAULT_PROPS$I;
 
 /**
  * InputHelper component.
@@ -14816,6 +14824,73 @@ InputLabel.displayName = InputLabel$1.displayName;
 InputLabel.className = InputLabel$1.className;
 InputLabel.defaultProps = InputLabel$1.defaultProps;
 
+const COMPONENT_NAME$P = 'InputRequiredLegend';
+const InputRequiredLegendClassName = 'lumx-input-required-legend';
+
+/**
+ * Defines the props of the component.
+ */
+
+const CLASSNAME$O = InputRequiredLegendClassName;
+const {
+  block: block$D,
+  element: element$u
+} = bem(CLASSNAME$O);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$H = {};
+
+/**
+ * InputRequiredLegend component.
+ *
+ * Explains the required field marker (`*`) displayed by `InputLabel` with `isRequired`.
+ * Place it at the top of a form that contains required fields.
+ */
+function InputRequiredLegend$1(props) {
+  const {
+    className,
+    label,
+    theme,
+    ref,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsxs("p", {
+    ref: ref,
+    ...forwardedProps,
+    className: classnames(className, block$D({
+      [`theme-${theme}`]: Boolean(theme)
+    })),
+    children: [/*#__PURE__*/jsx("span", {
+      className: element$u('marker'),
+      children: "*"
+    }), label]
+  });
+}
+InputRequiredLegend$1.displayName = COMPONENT_NAME$P;
+InputRequiredLegend$1.className = CLASSNAME$O;
+InputRequiredLegend$1.defaultProps = DEFAULT_PROPS$H;
+
+/**
+ * InputRequiredLegend component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const InputRequiredLegend = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  return InputRequiredLegend$1({
+    ...props,
+    ref,
+    theme: props.theme || defaultTheme
+  });
+});
+InputRequiredLegend.displayName = InputRequiredLegend$1.displayName;
+InputRequiredLegend.className = InputRequiredLegend$1.className;
+InputRequiredLegend.defaultProps = InputRequiredLegend$1.defaultProps;
+
 /**
  * Component display name.
  */
@@ -15292,9 +15367,9 @@ const ListItemAction = Object.assign(forwardRefPolymorphic((props, ref) => {
     children
   });
 }), {
-  displayName: COMPONENT_NAME$1h,
-  className: CLASSNAME$1e,
-  defaultProps: DEFAULT_PROPS$Z
+  displayName: COMPONENT_NAME$1i,
+  className: CLASSNAME$1f,
+  defaultProps: DEFAULT_PROPS$_
 });
 
 /**
@@ -15332,9 +15407,9 @@ const _ListItem = forwardRef((props, ref) => {
     handleClick: onItemSelected || props.onClick ? handleClick : undefined
   });
 });
-_ListItem.displayName = COMPONENT_NAME$1i;
-_ListItem.className = CLASSNAME$1f;
-_ListItem.defaultProps = DEFAULT_PROPS$_;
+_ListItem.displayName = COMPONENT_NAME$1j;
+_ListItem.className = CLASSNAME$1g;
+_ListItem.defaultProps = DEFAULT_PROPS$$;
 
 /**
  * ListItem component with Action sub-component.
@@ -18726,7 +18801,7 @@ const SelectButton$1 = React__default.forwardRef((props, ref) => {
   // sentinel is trivially always "intersecting" its non-clipping `<ul>` parent.
   const [scrollContainer, setScrollContainer] = useState(null);
   const setListElement = useCallback(listElement => {
-    setScrollContainer(listElement?.closest(`.${CLASSNAME$17}__scroll`) ?? null);
+    setScrollContainer(listElement?.closest(`.${CLASSNAME$18}__scroll`) ?? null);
   }, []);
   const isMultiple = selectionType === 'multiple';
 
@@ -18967,7 +19042,7 @@ const SelectTextField$1 = props => {
   // sentinel is trivially always "intersecting" its non-clipping `<ul>` parent.
   const [scrollContainer, setScrollContainer] = useState(null);
   const setListElement = useCallback(listElement => {
-    setScrollContainer(listElement?.closest(`.${CLASSNAME$17}__scroll`) ?? null);
+    setScrollContainer(listElement?.closest(`.${CLASSNAME$18}__scroll`) ?? null);
   }, []);
   const localInputRef = useRef(null);
   const mergedInputRef = useMergeRefs(localInputRef, externalInputRef);
@@ -19519,9 +19594,9 @@ const SkeletonTypography = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-SkeletonTypography.displayName = COMPONENT_NAME$1c;
+SkeletonTypography.displayName = COMPONENT_NAME$1d;
 SkeletonTypography.defaultProps = DEFAULT_PROPS$j;
-SkeletonTypography.className = CLASSNAME$19;
+SkeletonTypography.className = CLASSNAME$1a;
 
 /**
  * Clamp value in range.
@@ -22502,7 +22577,7 @@ function timeOfDayMinutes(date) {
 /** Options for `buildTimeList`. */
 
 const MINUTES_IN_HOUR = 60;
-const MINUTES_IN_DAY = 24 * MINUTES_IN_HOUR;
+const MINUTES_IN_DAY$1 = 24 * MINUTES_IN_HOUR;
 
 /**
  * Build a full-day list of `TimeOfDay` entries spaced `step` minutes apart.
@@ -22522,7 +22597,7 @@ function buildTimeList(options = {}) {
   const minMinutes = minTime ? timeOfDayMinutes(minTime) : undefined;
   const maxMinutes = maxTime ? timeOfDayMinutes(maxTime) : undefined;
   const list = [];
-  for (let minutes = 0; minutes < MINUTES_IN_DAY; minutes += step) {
+  for (let minutes = 0; minutes < MINUTES_IN_DAY$1; 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;
@@ -22588,24 +22663,42 @@ function parseTimeInput(raw) {
   };
 }
 
+const MINUTES_IN_DAY = 24 * 60;
+function ceilToStep(minutes, step) {
+  return Math.ceil(minutes / step) * step;
+}
+function floorToStep(minutes, step) {
+  return Math.floor(minutes / step) * step;
+}
+function minutesToTimeOfDay(minutes) {
+  return {
+    hour: Math.floor(minutes / 60),
+    minute: minutes % 60
+  };
+}
+
 /**
- * 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.
+ * Clamp `time` to `[minTime, maxTime]`, snapping to the nearest `step`-aligned
+ * option (as generated by `buildTimeList`) rather than to the raw bound.
+ * Inputs below the effective `minTime` snap up to it. Inputs above the
+ * effective `maxTime` snap down to it. Others are returned unchanged. When no
+ * `step`-aligned option exists inside `[minTime, maxTime]`, `time` is returned
+ * unchanged since there is nothing to snap to. Only the time-of-day of
+ * `minTime`/`maxTime` is used.
  */
-function snapTimeToBounds(time, minTime, maxTime) {
+function snapTimeToBounds(time, minTime, maxTime, step = 30) {
   const totalMinutes = time.hour * 60 + time.minute;
-  if (minTime && totalMinutes < timeOfDayMinutes(minTime)) {
-    return {
-      hour: minTime.getHours(),
-      minute: minTime.getMinutes()
-    };
+  const effectiveMin = minTime ? ceilToStep(timeOfDayMinutes(minTime), step) : undefined;
+  const effectiveMax = maxTime ? floorToStep(timeOfDayMinutes(maxTime), step) : undefined;
+  const noOptionInBounds = effectiveMin !== undefined && (effectiveMin >= MINUTES_IN_DAY || effectiveMax !== undefined && effectiveMin > effectiveMax);
+  if (noOptionInBounds) {
+    return time;
   }
-  if (maxTime && totalMinutes > timeOfDayMinutes(maxTime)) {
-    return {
-      hour: maxTime.getHours(),
-      minute: maxTime.getMinutes()
-    };
+  if (effectiveMin !== undefined && totalMinutes < effectiveMin) {
+    return minutesToTimeOfDay(effectiveMin);
+  }
+  if (effectiveMax !== undefined && totalMinutes > effectiveMax) {
+    return minutesToTimeOfDay(effectiveMax);
   }
   return time;
 }
@@ -22684,11 +22777,11 @@ const TimePickerField = props => {
       hour: value.getHours(),
       minute: value.getMinutes()
     };
-    const clamped = snapTimeToBounds(timeOfDay, minTime, maxTime);
+    const clamped = snapTimeToBounds(timeOfDay, minTime, maxTime, step);
     if (clamped.hour !== value.getHours() || clamped.minute !== value.getMinutes()) {
       onChange(getDateAtTime(clamped, value), name);
     }
-  }, [boundsMode, value, minTime, maxTime, onChange, name]);
+  }, [boundsMode, value, step, minTime, maxTime, onChange, name]);
   const handleChange = useCallback(next => {
     const date = next ? getDateAtTime(next, value) : undefined;
     onChange(date, name);
@@ -22701,10 +22794,10 @@ const TimePickerField = props => {
     if (!parsed) return;
 
     // Snap to bounds if needed, then dedup against the current value.
-    const time = snapTimeToBounds(parsed, minTime, maxTime);
+    const time = snapTimeToBounds(parsed, minTime, maxTime, step);
     if (value && isDateOnTime(value, time)) return;
     onChange(getDateAtTime(time, value), name);
-  }, [maxTime, minTime, name, onChange, searchValue, value]);
+  }, [maxTime, minTime, name, onChange, searchValue, step, value]);
   const searchInputValue = value ? formatTime(value, locale) : undefined;
   return TimePickerField$1({
     ...forwardedProps,
@@ -23196,5 +23289,5 @@ UserBlock.displayName = COMPONENT_NAME;
 UserBlock.className = CLASSNAME;
 UserBlock.defaultProps = DEFAULT_PROPS;
 
-export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1x as CLASSNAME, COMPONENT_NAME$1A as COMPONENT_NAME, Card, Checkbox, Chip, ChipGroup, Combobox, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$1f as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, DialogHeading, 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, MenuButton, ListDivider as MenuDivider, MenuItem, 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$3 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 };
+export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1y as CLASSNAME, COMPONENT_NAME$1B as COMPONENT_NAME, Card, Checkbox, Chip, ChipGroup, Combobox, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$1g as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, DialogHeading, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, InputRequiredLegend, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSection, ListSubheader, MenuButton, ListDivider as MenuDivider, MenuItem, 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$3 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