@lumx/react 4.6.0 → 4.6.1-alpha.0

package/index.js

@@ -97,20 +97,20 @@ const CONFIG$1 = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1k = 'AlertDialog';
+const COMPONENT_NAME$1m = 'AlertDialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1j = 'lumx-alert-dialog';
+const CLASSNAME$1l = 'lumx-alert-dialog';
 const {
-  block: block$14
-} = classNames.bem(CLASSNAME$1j);
+  block: block$15
+} = classNames.bem(CLASSNAME$1l);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1a = {
+const DEFAULT_PROPS$1d = {
   size: Size$1.tiny,
   kind: Kind$1.info
 };
@@ -131,8 +131,8 @@ const AlertDialog = forwardRef((props, ref) => {
     className,
     cancelProps,
     confirmProps,
-    kind = DEFAULT_PROPS$1a.kind,
-    size = DEFAULT_PROPS$1a.size,
+    kind = DEFAULT_PROPS$1d.kind,
+    size = DEFAULT_PROPS$1d.size,
     dialogProps,
     children,
     ...forwardedProps
@@ -173,7 +173,7 @@ const AlertDialog = forwardRef((props, ref) => {
       'aria-describedby': descriptionId,
       ...dialogProps
     },
-    className: classNames.join(className, block$14({
+    className: classNames.join(className, block$15({
       [`kind-${kind}`]: Boolean(kind)
     })),
     ...forwardedProps,
@@ -218,9 +218,9 @@ const AlertDialog = forwardRef((props, ref) => {
     })]
   });
 });
-AlertDialog.displayName = COMPONENT_NAME$1k;
-AlertDialog.className = CLASSNAME$1j;
-AlertDialog.defaultProps = DEFAULT_PROPS$1a;
+AlertDialog.displayName = COMPONENT_NAME$1m;
+AlertDialog.className = CLASSNAME$1l;
+AlertDialog.defaultProps = DEFAULT_PROPS$1d;
 
 /**
  * Hook focusing an element when defined and `focus` boolean `true`.
@@ -312,17 +312,17 @@ function useDisableStateProps(props) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1j = 'Autocomplete';
+const COMPONENT_NAME$1l = 'Autocomplete';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1i = 'lumx-autocomplete';
+const CLASSNAME$1k = 'lumx-autocomplete';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$19 = {
+const DEFAULT_PROPS$1c = {
   anchorToInput: false,
   closeOnClick: false,
   closeOnClickAway: true,
@@ -344,13 +344,13 @@ const Autocomplete = forwardRef((props, ref) => {
     otherProps
   } = useDisableStateProps(props);
   const {
-    anchorToInput = DEFAULT_PROPS$19.anchorToInput,
+    anchorToInput = DEFAULT_PROPS$1c.anchorToInput,
     children,
     chips,
     className,
-    closeOnClick = DEFAULT_PROPS$19.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$19.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$19.closeOnEscape,
+    closeOnClick = DEFAULT_PROPS$1c.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$1c.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$1c.closeOnEscape,
     error,
     fitToAnchorWidth,
     hasError,
@@ -371,7 +371,7 @@ const Autocomplete = forwardRef((props, ref) => {
     onInfiniteScroll,
     placeholder,
     placement,
-    shouldFocusOnClose = DEFAULT_PROPS$19.shouldFocusOnClose,
+    shouldFocusOnClose = DEFAULT_PROPS$1c.shouldFocusOnClose,
     theme = defaultTheme,
     value,
     textFieldProps = {},
@@ -384,7 +384,7 @@ const Autocomplete = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$1i),
+    className: classNames.join(className, CLASSNAME$1k),
     children: [/*#__PURE__*/jsx(TextField, {
       ...textFieldProps,
       chips: chips,
@@ -424,24 +424,24 @@ const Autocomplete = forwardRef((props, ref) => {
     })]
   });
 });
-Autocomplete.displayName = COMPONENT_NAME$1j;
-Autocomplete.className = CLASSNAME$1i;
-Autocomplete.defaultProps = DEFAULT_PROPS$19;
+Autocomplete.displayName = COMPONENT_NAME$1l;
+Autocomplete.className = CLASSNAME$1k;
+Autocomplete.defaultProps = DEFAULT_PROPS$1c;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1i = 'AutocompleteMultiple';
+const COMPONENT_NAME$1k = 'AutocompleteMultiple';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1h = 'lumx-autocomplete-multiple';
+const CLASSNAME$1j = 'lumx-autocomplete-multiple';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$18 = {
+const DEFAULT_PROPS$1b = {
   closeOnClickAway: true,
   closeOnEscape: true,
   selectedChipRender(choice, index, onClear, isDisabled) {
@@ -481,8 +481,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     chipsAlignment,
     className,
-    closeOnClickAway = DEFAULT_PROPS$18.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$18.closeOnEscape,
+    closeOnClickAway = DEFAULT_PROPS$1b.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$1b.closeOnEscape,
     fitToAnchorWidth,
     hasError,
     helper,
@@ -504,19 +504,19 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     onKeyDown,
     placeholder,
     placement,
-    selectedChipRender = DEFAULT_PROPS$18.selectedChipRender,
+    selectedChipRender = DEFAULT_PROPS$1b.selectedChipRender,
     shouldFocusOnClose,
     theme = defaultTheme,
     type,
     value,
-    values = DEFAULT_PROPS$18.values,
+    values = DEFAULT_PROPS$1b.values,
     ...forwardedProps
   } = otherProps;
   return /*#__PURE__*/jsx(Autocomplete, {
     ref: ref,
     ...forwardedProps,
     anchorToInput: anchorToInput,
-    className: classNames.join(className, CLASSNAME$1h),
+    className: classNames.join(className, CLASSNAME$1j),
     name: name,
     value: value,
     onChange: onChange,
@@ -549,9 +549,9 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     children: children
   });
 });
-AutocompleteMultiple.displayName = COMPONENT_NAME$1i;
-AutocompleteMultiple.className = CLASSNAME$1h;
-AutocompleteMultiple.defaultProps = DEFAULT_PROPS$18;
+AutocompleteMultiple.displayName = COMPONENT_NAME$1k;
+AutocompleteMultiple.className = CLASSNAME$1j;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS$1b;
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -626,62 +626,6 @@ function requireClassnames () {
 var classnamesExports = requireClassnames();
 var classnames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
-/** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
-function resolveColorWithVariants(colorWithVariants, colorVariant) {
-  if (!colorWithVariants) return [undefined, colorVariant];
-  const [color, baseColorVariant] = colorWithVariants.split('-');
-  return [color, colorVariant || baseColorVariant];
-}
-
-/**
- * Generates a Lumx color class name for the given type, color and variant.
- * This is the base function used by font() and background() utilities.
- *
- * @param type - The color class type ('font' or 'background')
- * @param propColor - The color palette name (e.g., 'primary', 'dark') with optional variant suffix (e.g., 'primary-L2')
- * @param propColorVariant - Optional color variant override (e.g., 'L1', 'L2', 'D1', 'N')
- * @returns The Lumx color class name or undefined if no color is provided
- *
- * @example
- * color('font', 'dark', 'L2'); // 'lumx-color-font-dark-L2'
- * color('background', 'primary'); // 'lumx-color-background-primary-N'
- * color('font', 'primary-L2'); // 'lumx-color-font-primary-L2'
- * color('font', undefined); // undefined
- */
-function color(type, propColor, propColorVariant) {
-  const [cColor, cColorVariant = ColorVariant.N] = resolveColorWithVariants(propColor, propColorVariant);
-  return `lumx-color-${type}-${cColor}-${cColorVariant}`;
-}
-
-/**
- * Generates a Lumx font color class name for the given color and variant.
- *
- * @param propColor - The color palette name (e.g., 'primary', 'dark') with optional variant suffix (e.g., 'primary-L2')
- * @param propColorVariant - Optional color variant override (e.g., 'L1', 'L2', 'D1', 'N')
- * @returns The Lumx font color class name or undefined if no color is provided
- *
- * @example
- * font('dark', 'L2'); // 'lumx-color-font-dark-L2'
- * font('primary-L2'); // 'lumx-color-font-primary-L2'
- * font('primary'); // 'lumx-color-font-primary-N'
- * font(undefined); // undefined
- */
-const font = (propColor, propColorVariant) => color('font', propColor, propColorVariant);
-
-/**
- * Returns the classname associated to the given typography. For example, for Typography.title it returns
- * lumx-typography-title
- */
-function typography(typo) {
-  return `lumx-typography-${typo}`;
-}
-
-/**
- * Visually hidden class name.
- * Used to hide elements from view but keep them readable from screen readers
- */
-const visuallyHidden = () => VISUALLY_HIDDEN;
-
 /**
  * Modifier
  * @example { 'is-disabled': true, 'is-selected': false }
@@ -719,7 +663,7 @@ function modifier$1(baseName, modifiers) {
  * block('button', { active: true, disabled: false }); // 'button button--active'
  */
 
-function block$13(baseName, modifiersOrAdditionalClasses, additionalClasses) {
+function block$14(baseName, modifiersOrAdditionalClasses, additionalClasses) {
   let modifiers;
   let classes;
   if (Array.isArray(modifiersOrAdditionalClasses)) {
@@ -740,6 +684,79 @@ function block$13(baseName, modifiersOrAdditionalClasses, additionalClasses) {
   modifiers ? modifier$1(baseName, modifiers) : null);
 }
 
+const PREFIX = 'lumx-action-area';
+const ACTION_ELEMENT = `${PREFIX}__action`;
+/**
+ * Action area CSS utility.
+ *
+ * Apply `actionArea()` to the container element to make it a positioning context
+ * for the action's expanded click area.
+ *
+ * Apply `actionArea.action()` to the primary interactive element (link or button)
+ * whose click area should expand to fill the entire container.
+ */
+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$14(ACTION_ELEMENT, modifiers)
+});
+
+/** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
+function resolveColorWithVariants(colorWithVariants, colorVariant) {
+  if (!colorWithVariants) return [undefined, colorVariant];
+  const [color, baseColorVariant] = colorWithVariants.split('-');
+  return [color, colorVariant || baseColorVariant];
+}
+
+/**
+ * Generates a Lumx color class name for the given type, color and variant.
+ * This is the base function used by font() and background() utilities.
+ *
+ * @param type - The color class type ('font' or 'background')
+ * @param propColor - The color palette name (e.g., 'primary', 'dark') with optional variant suffix (e.g., 'primary-L2')
+ * @param propColorVariant - Optional color variant override (e.g., 'L1', 'L2', 'D1', 'N')
+ * @returns The Lumx color class name or undefined if no color is provided
+ *
+ * @example
+ * color('font', 'dark', 'L2'); // 'lumx-color-font-dark-L2'
+ * color('background', 'primary'); // 'lumx-color-background-primary-N'
+ * color('font', 'primary-L2'); // 'lumx-color-font-primary-L2'
+ * color('font', undefined); // undefined
+ */
+function color(type, propColor, propColorVariant) {
+  const [cColor, cColorVariant = ColorVariant.N] = resolveColorWithVariants(propColor, propColorVariant);
+  return `lumx-color-${type}-${cColor}-${cColorVariant}`;
+}
+
+/**
+ * Generates a Lumx font color class name for the given color and variant.
+ *
+ * @param propColor - The color palette name (e.g., 'primary', 'dark') with optional variant suffix (e.g., 'primary-L2')
+ * @param propColorVariant - Optional color variant override (e.g., 'L1', 'L2', 'D1', 'N')
+ * @returns The Lumx font color class name or undefined if no color is provided
+ *
+ * @example
+ * font('dark', 'L2'); // 'lumx-color-font-dark-L2'
+ * font('primary-L2'); // 'lumx-color-font-primary-L2'
+ * font('primary'); // 'lumx-color-font-primary-N'
+ * font(undefined); // undefined
+ */
+const font = (propColor, propColorVariant) => color('font', propColor, propColorVariant);
+
+/**
+ * Returns the classname associated to the given typography. For example, for Typography.title it returns
+ * lumx-typography-title
+ */
+function typography(typo) {
+  return `lumx-typography-${typo}`;
+}
+
+/**
+ * Visually hidden class name.
+ * Used to hide elements from view but keep them readable from screen readers
+ */
+const visuallyHidden = () => VISUALLY_HIDDEN;
+
 /**
  * Creates a BEM element class generator function for the given base class.
  * Returns a function that generates BEM element class names with optional modifiers.
@@ -754,11 +771,11 @@ function block$13(baseName, modifiersOrAdditionalClasses, additionalClasses) {
  * element('my-button', 'icon', { active: true }); // 'my-button__icon my-button__icon--active'
  */
 
-function element$N(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
+function element$O(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
   if (Array.isArray(modifiersOrAdditionalClasses)) {
-    return block$13(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
+    return block$14(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
   }
-  return block$13(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
+  return block$14(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
 }
 
 /**
@@ -767,15 +784,15 @@ function element$N(baseClass, elem, modifiersOrAdditionalClasses, additionalClas
 function bem(baseName) {
   function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return block$13(baseName, modifiersOrAdditionalClasses);
+      return block$14(baseName, modifiersOrAdditionalClasses);
     }
-    return block$13(baseName, modifiersOrAdditionalClasses, additionalClasses);
+    return block$14(baseName, modifiersOrAdditionalClasses, additionalClasses);
   }
   function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return element$N(baseName, elem, modifiersOrAdditionalClasses);
+      return element$O(baseName, elem, modifiersOrAdditionalClasses);
     }
-    return element$N(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
+    return element$O(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
   }
   return {
     block: blockFn,
@@ -896,21 +913,21 @@ const IS_BROWSER = typeof window !== 'undefined' && !window.navigator.userAgent.
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1h = 'Avatar';
+const COMPONENT_NAME$1j = 'Avatar';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1g = 'lumx-avatar';
+const CLASSNAME$1i = 'lumx-avatar';
 const {
-  block: block$12,
-  element: element$M
-} = bem(CLASSNAME$1g);
+  block: block$13,
+  element: element$N
+} = bem(CLASSNAME$1i);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$17 = {
+const DEFAULT_PROPS$1a = {
   size: Size.m
 };
 
@@ -927,7 +944,7 @@ const Avatar$1 = props => {
     badge,
     className,
     image,
-    size = DEFAULT_PROPS$17.size,
+    size = DEFAULT_PROPS$1a.size,
     theme,
     ref,
     ...forwardedProps
@@ -935,15 +952,15 @@ const Avatar$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$12({
+    className: classnames(className, block$13({
       [`size-${size}`]: Boolean(size),
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [image, actions && /*#__PURE__*/jsx("div", {
-      className: element$M('actions'),
+      className: element$N('actions'),
       children: actions
     }), badge && /*#__PURE__*/jsx("div", {
-      className: element$M('badge'),
+      className: element$N('badge'),
       children: badge
     })]
   });
@@ -968,7 +985,7 @@ const Avatar = forwardRef((props, ref) => {
     linkAs,
     onClick,
     onKeyPress,
-    size = DEFAULT_PROPS$17.size,
+    size = DEFAULT_PROPS$1a.size,
     theme = defaultTheme,
     thumbnailProps,
     ...forwardedProps
@@ -984,7 +1001,7 @@ const Avatar = forwardRef((props, ref) => {
     image: /*#__PURE__*/jsx(Thumbnail, {
       linkProps: linkProps,
       linkAs: linkAs,
-      className: element$M('thumbnail'),
+      className: element$N('thumbnail'),
       onClick: onClick,
       onKeyPress: onKeyPress,
       ...thumbnailProps,
@@ -996,27 +1013,27 @@ const Avatar = forwardRef((props, ref) => {
     })
   });
 });
-Avatar.displayName = COMPONENT_NAME$1h;
-Avatar.className = CLASSNAME$1g;
-Avatar.defaultProps = DEFAULT_PROPS$17;
+Avatar.displayName = COMPONENT_NAME$1j;
+Avatar.className = CLASSNAME$1i;
+Avatar.defaultProps = DEFAULT_PROPS$1a;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1g = 'Badge';
+const COMPONENT_NAME$1i = 'Badge';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1f = 'lumx-badge';
+const CLASSNAME$1h = 'lumx-badge';
 const {
-  block: block$11
-} = bem(CLASSNAME$1f);
+  block: block$12
+} = bem(CLASSNAME$1h);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$16 = {
+const DEFAULT_PROPS$19 = {
   color: ColorPalette.primary
 };
 
@@ -1030,22 +1047,22 @@ const Badge$1 = props => {
   const {
     children,
     className,
-    color = DEFAULT_PROPS$16.color,
+    color = DEFAULT_PROPS$19.color,
     ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$11({
+    className: classnames(className, block$12({
       [`color-${color}`]: Boolean(color)
     })),
     children: children
   });
 };
-Badge$1.displayName = COMPONENT_NAME$1g;
-Badge$1.className = CLASSNAME$1f;
-Badge$1.defaultProps = DEFAULT_PROPS$16;
+Badge$1.displayName = COMPONENT_NAME$1i;
+Badge$1.className = CLASSNAME$1h;
+Badge$1.defaultProps = DEFAULT_PROPS$19;
 
 /**
  * Defines the props of the component.
@@ -1068,12 +1085,12 @@ Badge.displayName = Badge$1.displayName;
 Badge.className = Badge$1.className;
 Badge.defaultProps = Badge$1.defaultProps;
 
-const COMPONENT_NAME$1f = 'BadgeWrapper';
-const CLASSNAME$1e = 'lumx-badge-wrapper';
+const COMPONENT_NAME$1h = 'BadgeWrapper';
+const CLASSNAME$1g = 'lumx-badge-wrapper';
 const {
-  block: block$10,
-  element: element$L
-} = bem(CLASSNAME$1e);
+  block: block$11,
+  element: element$M
+} = bem(CLASSNAME$1g);
 const BadgeWrapper$1 = props => {
   const {
     badge,
@@ -1085,9 +1102,9 @@ const BadgeWrapper$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$10()),
+    className: classnames(className, block$11()),
     children: [children, badge && /*#__PURE__*/jsx("div", {
-      className: element$L('badge'),
+      className: element$M('badge'),
       children: badge
     })]
   });
@@ -1099,8 +1116,8 @@ const BadgeWrapper = forwardRef((props, ref) => {
     ref
   });
 });
-BadgeWrapper.displayName = COMPONENT_NAME$1f;
-BadgeWrapper.className = CLASSNAME$1e;
+BadgeWrapper.displayName = COMPONENT_NAME$1h;
+BadgeWrapper.className = CLASSNAME$1g;
 
 /**
  * Render clickable element (link, button or custom element)
@@ -1150,7 +1167,7 @@ const RawClickable = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1e = 'ButtonRoot';
+const COMPONENT_NAME$1g = 'ButtonRoot';
 const BUTTON_WRAPPER_CLASSNAME = `lumx-button-wrapper`;
 const {
   block: buttonWrapperBlock
@@ -1248,7 +1265,7 @@ const ButtonRoot = props => {
     children
   });
 };
-ButtonRoot.displayName = COMPONENT_NAME$1e;
+ButtonRoot.displayName = COMPONENT_NAME$1g;
 ButtonRoot.defaultProps = {};
 
 /**
@@ -1258,20 +1275,20 @@ ButtonRoot.defaultProps = {};
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1d = 'Button';
+const COMPONENT_NAME$1f = 'Button';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1d = 'lumx-button';
+const CLASSNAME$1f = 'lumx-button';
 const {
   modifier
-} = bem(CLASSNAME$1d);
+} = bem(CLASSNAME$1f);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$15 = {
+const DEFAULT_PROPS$18 = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1285,10 +1302,10 @@ const DEFAULT_PROPS$15 = {
 const Button$1 = props => {
   const {
     className,
-    emphasis = DEFAULT_PROPS$15.emphasis,
+    emphasis = DEFAULT_PROPS$18.emphasis,
     leftIcon,
     rightIcon,
-    size = DEFAULT_PROPS$15.size,
+    size = DEFAULT_PROPS$18.size,
     ...forwardedProps
   } = props;
   const buttonClassName = classnames(className, modifier({
@@ -1303,9 +1320,9 @@ const Button$1 = props => {
     variant: 'button'
   });
 };
-Button$1.displayName = COMPONENT_NAME$1d;
-Button$1.className = CLASSNAME$1d;
-Button$1.defaultProps = DEFAULT_PROPS$15;
+Button$1.displayName = COMPONENT_NAME$1f;
+Button$1.className = CLASSNAME$1f;
+Button$1.defaultProps = DEFAULT_PROPS$18;
 
 /**
  * Properties of a component to use to determine it's name.
@@ -1378,26 +1395,26 @@ const Button = forwardRef((props, ref) => {
     })
   });
 });
-Button.displayName = COMPONENT_NAME$1d;
-Button.className = CLASSNAME$1d;
-Button.defaultProps = DEFAULT_PROPS$15;
+Button.displayName = COMPONENT_NAME$1f;
+Button.className = CLASSNAME$1f;
+Button.defaultProps = DEFAULT_PROPS$18;
 
-const COMPONENT_NAME$1c = 'Icon';
+const COMPONENT_NAME$1e = 'Icon';
 const IconClassName = 'lumx-icon';
 
 /**
  * Defines the props of the component.
  */
 
-const CLASSNAME$1c = IconClassName;
+const CLASSNAME$1e = IconClassName;
 const {
-  block: block$$
-} = bem(CLASSNAME$1c);
+  block: block$10
+} = bem(CLASSNAME$1e);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$14 = {};
+const DEFAULT_PROPS$17 = {};
 
 /**
  * Icon component.
@@ -1446,7 +1463,7 @@ const Icon$1 = props => {
   return /*#__PURE__*/jsx("i", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$$({
+    className: classnames(className, block$10({
       [`color-${iconColor}`]: Boolean(iconColor),
       [`color-variant-${iconColorVariant}`]: Boolean(iconColorVariant),
       'has-shape': hasShape,
@@ -1475,24 +1492,24 @@ const Icon$1 = props => {
     })
   });
 };
-Icon$1.displayName = COMPONENT_NAME$1c;
-Icon$1.className = CLASSNAME$1c;
-Icon$1.defaultProps = DEFAULT_PROPS$14;
+Icon$1.displayName = COMPONENT_NAME$1e;
+Icon$1.className = CLASSNAME$1e;
+Icon$1.defaultProps = DEFAULT_PROPS$17;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1b = 'IconButton';
+const COMPONENT_NAME$1d = 'IconButton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1b = 'lumx-icon-button';
+const CLASSNAME$1d = 'lumx-icon-button';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$13 = {
+const DEFAULT_PROPS$16 = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1505,11 +1522,11 @@ const DEFAULT_PROPS$13 = {
  */
 const IconButton$1 = props => {
   const {
-    emphasis = DEFAULT_PROPS$13.emphasis,
+    emphasis = DEFAULT_PROPS$16.emphasis,
     image,
     icon,
     label,
-    size = DEFAULT_PROPS$13.size,
+    size = DEFAULT_PROPS$16.size,
     ...forwardedProps
   } = props;
   const defaultChildren = image ? /*#__PURE__*/jsx("img", {
@@ -1528,9 +1545,9 @@ const IconButton$1 = props => {
     children: defaultChildren
   });
 };
-IconButton$1.displayName = COMPONENT_NAME$1b;
-IconButton$1.className = CLASSNAME$1b;
-IconButton$1.defaultProps = DEFAULT_PROPS$13;
+IconButton$1.displayName = COMPONENT_NAME$1d;
+IconButton$1.className = CLASSNAME$1d;
+IconButton$1.defaultProps = DEFAULT_PROPS$16;
 
 /**
  * IconButton component.
@@ -1572,24 +1589,24 @@ const IconButton = forwardRef((props, ref) => {
     })
   });
 });
-IconButton.displayName = COMPONENT_NAME$1b;
-IconButton.className = CLASSNAME$1b;
-IconButton.defaultProps = DEFAULT_PROPS$13;
+IconButton.displayName = COMPONENT_NAME$1d;
+IconButton.className = CLASSNAME$1d;
+IconButton.defaultProps = DEFAULT_PROPS$16;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1a = 'ButtonGroup';
+const COMPONENT_NAME$1c = 'ButtonGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1a = 'lumx-button-group';
+const CLASSNAME$1c = 'lumx-button-group';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$12 = {};
+const DEFAULT_PROPS$15 = {};
 
 /**
  * ButtonGroup component.
@@ -1605,13 +1622,13 @@ const ButtonGroup$1 = props => {
   } = props;
   return /*#__PURE__*/jsx("div", {
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1a),
+    className: classnames(className, CLASSNAME$1c),
     children: children
   });
 };
-ButtonGroup$1.displayName = COMPONENT_NAME$1a;
-ButtonGroup$1.className = CLASSNAME$1a;
-ButtonGroup$1.defaultProps = DEFAULT_PROPS$12;
+ButtonGroup$1.displayName = COMPONENT_NAME$1c;
+ButtonGroup$1.className = CLASSNAME$1c;
+ButtonGroup$1.defaultProps = DEFAULT_PROPS$15;
 
 /**
  * ButtonGroup component.
@@ -1626,17 +1643,17 @@ const ButtonGroup = forwardRef((props, ref) => {
     ...props
   });
 });
-ButtonGroup.displayName = COMPONENT_NAME$1a;
-ButtonGroup.className = CLASSNAME$1a;
-ButtonGroup.defaultProps = DEFAULT_PROPS$12;
+ButtonGroup.displayName = COMPONENT_NAME$1c;
+ButtonGroup.className = CLASSNAME$1c;
+ButtonGroup.defaultProps = DEFAULT_PROPS$15;
 
-const COMPONENT_NAME$19 = 'InputLabel';
+const COMPONENT_NAME$1b = 'InputLabel';
 const InputLabelClassName = 'lumx-input-label';
-const CLASSNAME$19 = InputLabelClassName;
+const CLASSNAME$1b = InputLabelClassName;
 const {
-  block: block$_
-} = bem(CLASSNAME$19);
-const DEFAULT_PROPS$11 = {};
+  block: block$$
+} = bem(CLASSNAME$1b);
+const DEFAULT_PROPS$14 = {};
 
 /**
  * InputLabel component.
@@ -1656,7 +1673,7 @@ function InputLabel$1(props) {
     ref: ref,
     ...forwardedProps,
     htmlFor: htmlFor,
-    className: classnames(className, block$_({
+    className: classnames(className, block$$({
       'is-required': isRequired,
       [`theme-${theme}`]: Boolean(theme),
       'has-custom-typography': Boolean(typography$1)
@@ -1664,9 +1681,9 @@ function InputLabel$1(props) {
     children: children
   });
 }
-InputLabel$1.displayName = COMPONENT_NAME$19;
-InputLabel$1.className = CLASSNAME$19;
-InputLabel$1.defaultProps = DEFAULT_PROPS$11;
+InputLabel$1.displayName = COMPONENT_NAME$1b;
+InputLabel$1.className = CLASSNAME$1b;
+InputLabel$1.defaultProps = DEFAULT_PROPS$14;
 
 const INPUT_HELPER_CONFIGURATION = {
   [Kind.error]: {
@@ -1680,22 +1697,22 @@ const INPUT_HELPER_CONFIGURATION = {
   }
 };
 
-const COMPONENT_NAME$18 = 'InputHelper';
+const COMPONENT_NAME$1a = 'InputHelper';
 const InputHelperClassName = 'lumx-input-helper';
 
 /**
  * Defines the props of the component.
  */
 
-const CLASSNAME$18 = InputHelperClassName;
+const CLASSNAME$1a = InputHelperClassName;
 const {
-  block: block$Z
-} = bem(CLASSNAME$18);
+  block: block$_
+} = bem(CLASSNAME$1a);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$10 = {
+const DEFAULT_PROPS$13 = {
   kind: Kind.info
 };
 
@@ -1706,7 +1723,7 @@ function InputHelper$1(props) {
   const {
     children,
     className,
-    kind = DEFAULT_PROPS$10.kind,
+    kind = DEFAULT_PROPS$13.kind,
     theme,
     ref,
     ...forwardedProps
@@ -1717,16 +1734,16 @@ function InputHelper$1(props) {
   return /*#__PURE__*/jsx("p", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$Z({
+    className: classnames(className, block$_({
       [`color-${color}`]: Boolean(color),
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: children
   });
 }
-InputHelper$1.displayName = COMPONENT_NAME$18;
-InputHelper$1.className = CLASSNAME$18;
-InputHelper$1.defaultProps = DEFAULT_PROPS$10;
+InputHelper$1.displayName = COMPONENT_NAME$1a;
+InputHelper$1.className = CLASSNAME$1a;
+InputHelper$1.defaultProps = DEFAULT_PROPS$13;
 
 const INTERMEDIATE_STATE = 'intermediate';
 
@@ -1737,16 +1754,16 @@ const INTERMEDIATE_STATE = 'intermediate';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$17 = 'Checkbox';
+const COMPONENT_NAME$19 = 'Checkbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$17 = 'lumx-checkbox';
+const CLASSNAME$19 = 'lumx-checkbox';
 const {
-  block: block$Y,
-  element: element$K
-} = bem(CLASSNAME$17);
+  block: block$Z,
+  element: element$L
+} = bem(CLASSNAME$19);
 
 /**
  * Checkbox component.
@@ -1782,7 +1799,7 @@ const Checkbox$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$Y({
+    className: classnames(className, block$Z({
       // Whether state is intermediate class name will "-checked"
       'is-checked': intermediateState ? true : isChecked,
       'is-disabled': isDisabled,
@@ -1790,12 +1807,12 @@ const Checkbox$1 = props => {
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsxs("div", {
-      className: element$K('input-wrapper'),
+      className: element$L('input-wrapper'),
       children: [/*#__PURE__*/jsx("input", {
         ref: inputRef,
         type: "checkbox",
         id: inputId,
-        className: element$K('input-native'),
+        className: element$L('input-native'),
         name: name,
         value: value,
         checked: isChecked,
@@ -1807,26 +1824,26 @@ const Checkbox$1 = props => {
         } : {}),
         ...inputProps
       }), /*#__PURE__*/jsxs("div", {
-        className: element$K('input-placeholder'),
+        className: element$L('input-placeholder'),
         children: [/*#__PURE__*/jsx("div", {
-          className: element$K('input-background')
+          className: element$L('input-background')
         }), /*#__PURE__*/jsx("div", {
-          className: element$K('input-indicator'),
+          className: element$L('input-indicator'),
           children: Icon$1({
             icon: intermediateState ? mdiMinus : mdiCheck
           })
         })]
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: element$K('content'),
+      className: element$L('content'),
       children: [label && InputLabel$1({
         htmlFor: inputId,
-        className: element$K('label'),
+        className: element$L('label'),
         theme,
         children: label
       }), helper && InputHelper$1({
         id: `${inputId}-helper`,
-        className: element$K('helper'),
+        className: element$L('helper'),
         theme,
         children: helper
       })]
@@ -1841,7 +1858,7 @@ const Checkbox$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$$ = {};
+const DEFAULT_PROPS$12 = {};
 
 /**
  * Checkbox component.
@@ -1901,9 +1918,9 @@ const Checkbox = forwardRef((props, ref) => {
     inputId
   });
 });
-Checkbox.displayName = COMPONENT_NAME$17;
-Checkbox.className = CLASSNAME$17;
-Checkbox.defaultProps = DEFAULT_PROPS$$;
+Checkbox.displayName = COMPONENT_NAME$19;
+Checkbox.className = CLASSNAME$19;
+Checkbox.defaultProps = DEFAULT_PROPS$12;
 
 /**
  * Wrap mouse event handler to stop event propagation.
@@ -1924,21 +1941,21 @@ function useStopPropagation(handler) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$16 = 'Chip';
+const COMPONENT_NAME$18 = 'Chip';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$16 = 'lumx-chip';
+const CLASSNAME$18 = 'lumx-chip';
 const {
-  block: block$X,
-  element: element$J
-} = bem(CLASSNAME$16);
+  block: block$Y,
+  element: element$K
+} = bem(CLASSNAME$18);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$_ = {
+const DEFAULT_PROPS$11 = {
   size: Size.m
 };
 
@@ -1965,7 +1982,7 @@ const Chip$1 = props => {
     hasAfterClick,
     hasBeforeClick,
     hasOnClick,
-    size = DEFAULT_PROPS$_.size,
+    size = DEFAULT_PROPS$11.size,
     theme,
     ref,
     href,
@@ -2000,7 +2017,7 @@ const Chip$1 = props => {
       ...forwardedProps,
       href: !disabledStateProps.disabled ? href : undefined,
       ref: ref,
-      className: classnames(className, block$X({
+      className: classnames(className, block$Y({
         'is-clickable': isClickable,
         [`color-${chipColor}`]: Boolean(chipColor),
         'is-disabled': isAnyDisabled,
@@ -2017,19 +2034,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$J('before', {
+        className: element$K('before', {
           'is-clickable': hasBeforeClick
         }),
         onClick: handleBeforeClick,
         children: before
       }), /*#__PURE__*/jsx("div", {
-        className: element$J('label'),
+        className: element$K('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$J('after', {
+        className: element$K('after', {
           'is-clickable': hasAfterClick
         }),
         onClick: handleAfterClick,
@@ -2085,9 +2102,45 @@ const Chip = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-Chip.displayName = COMPONENT_NAME$16;
-Chip.className = CLASSNAME$16;
-Chip.defaultProps = DEFAULT_PROPS$_;
+Chip.displayName = COMPONENT_NAME$18;
+Chip.className = CLASSNAME$18;
+Chip.defaultProps = DEFAULT_PROPS$11;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$17 = 'ChipGroup';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$17 = 'lumx-chip-group';
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$10 = {};
+
+/**
+ * ChipGroup component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+const ChipGroup$1 = props => {
+  const {
+    children,
+    className,
+    ref,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classnames(className, CLASSNAME$17),
+    children: children
+  });
+};
 
 const INITIAL_STATE_ACTIVE_CHIP = -1;
 
@@ -2141,19 +2194,8 @@ const useChipGroupNavigation = (chips, onChipDeleted, initialActiveChip = INITIA
 };
 
 /**
- * Component default props.
- */
-const DEFAULT_PROPS$Z = {};
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$15 = 'ChipGroup';
-
-/**
- * Component default class name and class prefix.
+ * Defines the props of the component.
  */
-const CLASSNAME$15 = 'lumx-chip-group';
 
 /**
  * ChipGroup component.
@@ -2164,21 +2206,18 @@ const CLASSNAME$15 = 'lumx-chip-group';
  */
 const InternalChipGroup = forwardRef((props, ref) => {
   const {
-    align,
     children,
-    className,
     ...forwardedProps
   } = props;
-  return /*#__PURE__*/jsx("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$15),
-    children: children
+  return ChipGroup$1({
+    ref,
+    children,
+    ...forwardedProps
   });
 });
-InternalChipGroup.displayName = COMPONENT_NAME$15;
-InternalChipGroup.className = CLASSNAME$15;
-InternalChipGroup.defaultProps = DEFAULT_PROPS$Z;
+InternalChipGroup.displayName = COMPONENT_NAME$17;
+InternalChipGroup.className = CLASSNAME$17;
+InternalChipGroup.defaultProps = DEFAULT_PROPS$10;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
 });
@@ -2268,11 +2307,11 @@ function useFocusLastChipOnBackspace(chipRefs, inputRef) {
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$14 = 'lumx-selection-chip-group';
+const CLASSNAME$16 = 'lumx-selection-chip-group';
 const {
-  block: block$W,
-  element: element$I
-} = classNames.bem(CLASSNAME$14);
+  block: block$X,
+  element: element$J
+} = classNames.bem(CLASSNAME$16);
 
 /**
  * SelectionChipGroup component.
@@ -2302,7 +2341,7 @@ const SelectionChipGroup = ({
   return /*#__PURE__*/jsx(ChipGroup, {
     role: "group",
     "aria-label": label,
-    className: block$W(),
+    className: block$X(),
     ...forwardedProps,
     children: value?.map((v, index) => {
       const name = getWithSelector(getOptionName, v);
@@ -2346,7 +2385,7 @@ const SelectionChipGroup = ({
           after: /*#__PURE__*/jsx(Icon, {
             icon: mdiClose
           }),
-          className: element$I('chip', [props?.className]),
+          className: element$J('chip', [props?.className]),
           size: "s",
           ref: ref,
           onClick: onClick,
@@ -2376,21 +2415,21 @@ const CommentBlockVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$14 = 'CommentBlock';
+const COMPONENT_NAME$16 = 'CommentBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$13 = 'lumx-comment-block';
+const CLASSNAME$15 = 'lumx-comment-block';
 const {
-  block: block$V,
-  element: element$H
-} = classNames.bem(CLASSNAME$13);
+  block: block$W,
+  element: element$I
+} = classNames.bem(CLASSNAME$15);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Y = {
+const DEFAULT_PROPS$$ = {
   variant: CommentBlockVariant.indented
 };
 
@@ -2420,13 +2459,13 @@ const CommentBlock = forwardRef((props, ref) => {
     onMouseLeave,
     text,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$Y.variant,
+    variant = DEFAULT_PROPS$$.variant,
     ...forwardedProps
   } = props;
   const hasChildren = Children.count(children) > 0;
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: classNames.join(className, block$V({
+    className: classNames.join(className, block$W({
       'has-children': hasChildren && isOpen,
       'has-indented-children': hasChildren && variant === CommentBlockVariant.indented,
       'has-linear-children': hasChildren && variant === CommentBlockVariant.linear,
@@ -2435,61 +2474,61 @@ const CommentBlock = forwardRef((props, ref) => {
     })),
     ...forwardedProps,
     children: [/*#__PURE__*/jsxs("div", {
-      className: element$H('wrapper'),
+      className: element$I('wrapper'),
       children: [/*#__PURE__*/jsx("div", {
-        className: element$H('avatar'),
+        className: element$I('avatar'),
         children: /*#__PURE__*/jsx(Avatar, {
           ...avatarProps,
           size: Size$1.m,
           onClick: onClick
         })
       }), /*#__PURE__*/jsxs("div", {
-        className: element$H('container'),
+        className: element$I('container'),
         children: [/*#__PURE__*/jsxs("div", {
-          className: element$H('content'),
+          className: element$I('content'),
           children: [/*#__PURE__*/jsxs("div", {
-            className: element$H('meta'),
+            className: element$I('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$H('name'),
+              className: element$I('name'),
               onClick: onClick,
               onMouseEnter: onMouseEnter,
               onMouseLeave: onMouseLeave,
               children: name
             }), headerActions && /*#__PURE__*/jsx("span", {
-              className: element$H('header-actions'),
+              className: element$I('header-actions'),
               children: headerActions
             })]
           }), /*#__PURE__*/jsx("div", {
-            className: element$H('text'),
+            className: element$I('text'),
             children: text
           }), date && (fullDate ? /*#__PURE__*/jsx(Tooltip, {
             label: fullDate,
             placement: "top",
             children: /*#__PURE__*/jsx("span", {
-              className: element$H('date'),
+              className: element$I('date'),
               children: date
             })
           }) : /*#__PURE__*/jsx("span", {
-            className: element$H('date'),
+            className: element$I('date'),
             children: date
           }))]
         }), hasActions && /*#__PURE__*/jsx("div", {
-          className: element$H('actions'),
+          className: element$I('actions'),
           children: actions
         })]
       })]
     }), hasChildren && isOpen && /*#__PURE__*/jsx("div", {
-      className: element$H('children'),
+      className: element$I('children'),
       children: children
     })]
   });
 });
-CommentBlock.displayName = COMPONENT_NAME$14;
-CommentBlock.className = CLASSNAME$13;
-CommentBlock.defaultProps = DEFAULT_PROPS$Y;
+CommentBlock.displayName = COMPONENT_NAME$16;
+CommentBlock.className = CLASSNAME$15;
+CommentBlock.defaultProps = DEFAULT_PROPS$$;
 
 /**
  * Add a number of months from a date while resetting the day to prevent month length mismatches.
@@ -2509,12 +2548,12 @@ const isDateValid = date => date instanceof Date && !Number.isNaN(date.getTime()
 /**
  * Component display name.
  */
-const COMPONENT_NAME$13 = 'DatePicker';
+const COMPONENT_NAME$15 = 'DatePicker';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$12 = 'lumx-date-picker';
+const CLASSNAME$14 = 'lumx-date-picker';
 
 /** Get first day of week for locale from the browser API */
 const getFromBrowser = locale => {
@@ -2733,8 +2772,8 @@ function formatDayNumber(locale, date) {
 }
 
 const {
-  element: element$G
-} = classNames.bem(CLASSNAME$12);
+  element: element$H
+} = classNames.bem(CLASSNAME$14);
 
 /**
  * Defines the props of the component.
@@ -2743,7 +2782,7 @@ const {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$12 = 'DatePickerControlled';
+const COMPONENT_NAME$14 = 'DatePickerControlled';
 
 /**
  * DatePickerControlled component.
@@ -2828,10 +2867,10 @@ const DatePickerControlled = forwardRef((props, ref) => {
   const yearLabel = getYearDisplayName(locale);
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: `${CLASSNAME$12}`,
+    className: `${CLASSNAME$14}`,
     style: style,
     children: [/*#__PURE__*/jsx(Toolbar, {
-      className: element$G('toolbar'),
+      className: element$H('toolbar'),
       after: /*#__PURE__*/jsx(IconButton, {
         ...nextButtonProps,
         emphasis: Emphasis$1.low,
@@ -2851,7 +2890,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
           dir: "auto",
           children: monthYear
         }), onMonthChange && /*#__PURE__*/jsx(FlexBox, {
-          className: element$G('month'),
+          className: element$H('month'),
           orientation: "horizontal",
           hAlign: "center",
           gap: "regular",
@@ -2866,7 +2905,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
             min: 0,
             onBlur: updateYear,
             onKeyPress: updateYearOnEnterPressed,
-            className: element$G('year')
+            className: element$H('year')
           }, "year") : /*#__PURE__*/jsx(Text, {
             as: "p",
             children: part
@@ -2874,17 +2913,17 @@ const DatePickerControlled = forwardRef((props, ref) => {
         })]
       })
     }), /*#__PURE__*/jsxs("div", {
-      className: element$G('calendar'),
+      className: element$H('calendar'),
       children: [/*#__PURE__*/jsx("div", {
-        className: classNames.join(element$G('week-days'), element$G('days-wrapper')),
+        className: classNames.join(element$H('week-days'), element$H('days-wrapper')),
         children: weekDays.map(({
           letter,
           number,
           long
         }) => /*#__PURE__*/jsxs("div", {
-          className: element$G('day-wrapper'),
+          className: element$H('day-wrapper'),
           children: [/*#__PURE__*/jsx("span", {
-            className: element$G('week-day'),
+            className: element$H('week-day'),
             "aria-hidden": true,
             children: letter.toLocaleUpperCase()
           }), /*#__PURE__*/jsx("span", {
@@ -2893,7 +2932,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
           })]
         }, number))
       }), /*#__PURE__*/jsx("div", {
-        className: classNames.join(element$G('month-days'), element$G('days-wrapper')),
+        className: classNames.join(element$H('month-days'), element$H('days-wrapper')),
         children: weeks.flatMap((week, weekIndex) => {
           return weekDays.map((weekDay, dayIndex) => {
             const {
@@ -2904,10 +2943,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$G('day-wrapper'),
+              className: element$H('day-wrapper'),
               children: date && /*#__PURE__*/jsxs(Button, {
                 ref: isSelected || !value && isToday ? todayOrSelectedDateRef : null,
-                className: element$G('month-day', {
+                className: element$H('month-day', {
                   'is-today': isToday
                 }),
                 disabled: isOutOfRange,
@@ -2933,8 +2972,8 @@ const DatePickerControlled = forwardRef((props, ref) => {
     })]
   });
 });
-DatePickerControlled.displayName = COMPONENT_NAME$12;
-DatePickerControlled.className = CLASSNAME$12;
+DatePickerControlled.displayName = COMPONENT_NAME$14;
+DatePickerControlled.className = CLASSNAME$14;
 
 /**
  * DatePicker component.
@@ -2976,8 +3015,8 @@ const DatePicker = forwardRef((props, ref) => {
     onMonthChange: setSelectedMonth
   });
 });
-DatePicker.displayName = COMPONENT_NAME$13;
-DatePicker.className = CLASSNAME$12;
+DatePicker.displayName = COMPONENT_NAME$15;
+DatePicker.className = CLASSNAME$14;
 
 const useBooleanState = defaultValue => {
   const [booleanValue, setBoolean] = useState(defaultValue);
@@ -2990,7 +3029,7 @@ const useBooleanState = defaultValue => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$11 = 'DatePickerField';
+const COMPONENT_NAME$13 = 'DatePickerField';
 
 /**
  * DatePickerField component.
@@ -3079,7 +3118,7 @@ const DatePickerField = forwardRef((props, ref) => {
     }) : null]
   });
 });
-DatePickerField.displayName = COMPONENT_NAME$11;
+DatePickerField.displayName = COMPONENT_NAME$13;
 
 /**
  * Keep track of listeners, only the last registered listener gets activated at any point (previously registered
@@ -3565,21 +3604,21 @@ const isFooter$1 = isComponent('footer');
 /**
  * Component display name.
  */
-const COMPONENT_NAME$10 = 'Dialog';
+const COMPONENT_NAME$12 = 'Dialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$11 = 'lumx-dialog';
+const CLASSNAME$13 = 'lumx-dialog';
 const {
-  block: block$U,
-  element: element$F
-} = classNames.bem(CLASSNAME$11);
+  block: block$V,
+  element: element$G
+} = classNames.bem(CLASSNAME$13);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$X = {
+const DEFAULT_PROPS$_ = {
   closeMode: 'unmount',
   size: Size$1.big,
   disableBodyScroll: true
@@ -3600,7 +3639,7 @@ const Dialog = forwardRef((props, ref) => {
   const {
     children,
     className,
-    closeMode = DEFAULT_PROPS$X.closeMode,
+    closeMode = DEFAULT_PROPS$_.closeMode,
     header,
     focusElement,
     forceFooterDivider,
@@ -3612,11 +3651,11 @@ const Dialog = forwardRef((props, ref) => {
     parentElement,
     contentRef,
     preventAutoClose,
-    size = DEFAULT_PROPS$X.size,
+    size = DEFAULT_PROPS$_.size,
     zIndex,
     dialogProps,
     onVisibilityChange,
-    disableBodyScroll = DEFAULT_PROPS$X.disableBodyScroll,
+    disableBodyScroll = DEFAULT_PROPS$_.disableBodyScroll,
     preventCloseOnClick,
     preventCloseOnEscape,
     ...forwardedProps
@@ -3688,7 +3727,7 @@ const Dialog = forwardRef((props, ref) => {
     children: /*#__PURE__*/jsxs("div", {
       ref: mergeRefs(rootRef, ref),
       ...forwardedProps,
-      className: classNames.join(className, block$U({
+      className: classNames.join(className, block$V({
         'is-hidden': !isOpen,
         'is-loading': isLoading,
         'is-shown': isOpen || isVisible,
@@ -3698,13 +3737,13 @@ const Dialog = forwardRef((props, ref) => {
         zIndex
       },
       children: [/*#__PURE__*/jsx("div", {
-        className: element$F('overlay')
+        className: element$G('overlay')
       }), /*#__PURE__*/jsx(HeadingLevelProvider, {
         level: 2,
         children: /*#__PURE__*/jsx(ThemeProvider, {
           value: undefined,
           children: /*#__PURE__*/jsx("div", {
-            className: element$F('container'),
+            className: element$G('container'),
             role: "dialog",
             "aria-modal": "true",
             ...dialogProps,
@@ -3713,36 +3752,36 @@ const Dialog = forwardRef((props, ref) => {
               childrenRefs: clickAwayRefs,
               parentRef: rootRef,
               children: /*#__PURE__*/jsxs("section", {
-                className: element$F('wrapper'),
+                className: element$G('wrapper'),
                 ref: wrapperRef,
                 children: [(header || headerChildContent) && /*#__PURE__*/jsxs("header", {
                   ...headerChildProps,
-                  className: classNames.join(element$F('header', {
+                  className: classNames.join(element$G('header', {
                     'has-divider': Boolean(forceHeaderDivider || hasTopIntersection)
                   }), headerChildProps?.className),
                   children: [header, headerChildContent]
                 }), /*#__PURE__*/jsxs("div", {
                   ref: mergeRefs(contentRef, localContentRef),
-                  className: element$F('content'),
+                  className: element$G('content'),
                   children: [/*#__PURE__*/jsx("div", {
-                    className: element$F('sentinel', {
+                    className: element$G('sentinel', {
                       top: true
                     }),
                     ref: setSentinelTop
                   }), content, /*#__PURE__*/jsx("div", {
-                    className: element$F('sentinel', {
+                    className: element$G('sentinel', {
                       bottom: true
                     }),
                     ref: setSentinelBottom
                   })]
                 }), (footer || footerChildContent) && /*#__PURE__*/jsxs("footer", {
                   ...footerChildProps,
-                  className: classNames.join(element$F('footer', {
+                  className: classNames.join(element$G('footer', {
                     'has-divider': Boolean(forceFooterDivider || hasBottomIntersection)
                   }), footerChildProps?.className),
                   children: [footer, footerChildContent]
                 }), isLoading && /*#__PURE__*/jsx("div", {
-                  className: element$F('progress-overlay'),
+                  className: element$G('progress-overlay'),
                   children: /*#__PURE__*/jsx(Progress, {
                     variant: ProgressVariant.circular
                   })
@@ -3755,22 +3794,22 @@ const Dialog = forwardRef((props, ref) => {
     })
   }) : null;
 });
-Dialog.displayName = COMPONENT_NAME$10;
-Dialog.className = CLASSNAME$11;
-Dialog.defaultProps = DEFAULT_PROPS$X;
+Dialog.displayName = COMPONENT_NAME$12;
+Dialog.className = CLASSNAME$13;
+Dialog.defaultProps = DEFAULT_PROPS$_;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$$ = 'Divider';
+const COMPONENT_NAME$11 = 'Divider';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$10 = 'lumx-divider';
+const CLASSNAME$12 = 'lumx-divider';
 const {
-  block: block$T
-} = bem(CLASSNAME$10);
+  block: block$U
+} = bem(CLASSNAME$12);
 
 /**
  * Divider component.
@@ -3788,7 +3827,7 @@ const Divider$1 = props => {
   return /*#__PURE__*/jsx("hr", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$T({
+    className: classnames(className, block$U({
       [`theme-${theme}`]: Boolean(theme)
     }))
   });
@@ -3801,7 +3840,7 @@ const Divider$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$W = {};
+const DEFAULT_PROPS$Z = {};
 
 /**
  * Divider component.
@@ -3822,22 +3861,22 @@ const Divider = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-Divider.displayName = COMPONENT_NAME$$;
-Divider.className = CLASSNAME$10;
-Divider.defaultProps = DEFAULT_PROPS$W;
+Divider.displayName = COMPONENT_NAME$11;
+Divider.className = CLASSNAME$12;
+Divider.defaultProps = DEFAULT_PROPS$Z;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$_ = 'DragHandle';
+const COMPONENT_NAME$10 = 'DragHandle';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$$ = 'lumx-drag-handle';
+const CLASSNAME$11 = 'lumx-drag-handle';
 const {
-  block: block$S
-} = classNames.bem(CLASSNAME$$);
+  block: block$T
+} = classNames.bem(CLASSNAME$11);
 
 /**
  * DragHandle component.
@@ -3856,7 +3895,7 @@ const DragHandle = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$S({
+    className: classNames.join(className, block$T({
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: /*#__PURE__*/jsx(Icon, {
@@ -3866,8 +3905,8 @@ const DragHandle = forwardRef((props, ref) => {
     })
   });
 });
-DragHandle.displayName = COMPONENT_NAME$_;
-DragHandle.className = CLASSNAME$$;
+DragHandle.displayName = COMPONENT_NAME$10;
+DragHandle.className = CLASSNAME$11;
 
 const INITIAL_INDEX = -1;
 
@@ -4036,22 +4075,20 @@ const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNav
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Z = 'List';
+const COMPONENT_NAME$$ = 'List';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$_ = 'lumx-list';
+const CLASSNAME$10 = 'lumx-list';
 const {
-  block: block$R
-} = classNames.bem(CLASSNAME$_);
+  block: block$S
+} = classNames.bem(CLASSNAME$10);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$V = {
-  tabIndex: -1
-};
+const DEFAULT_PROPS$Y = {};
 
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 /**
@@ -4068,23 +4105,21 @@ const InternalList = forwardRef((props, ref) => {
     isClickable,
     itemPadding,
     onListItemSelected,
-    tabIndex = DEFAULT_PROPS$V.tabIndex,
     ...forwardedProps
   } = props;
   const adjustedItemPadding = itemPadding ?? (isClickable ? Size$1.big : undefined);
   return /*#__PURE__*/jsx("ul", {
     ...forwardedProps,
-    className: classNames.join(className, block$R({
+    className: classNames.join(className, block$S({
       [`item-padding-${adjustedItemPadding}`]: Boolean(adjustedItemPadding)
     })),
-    tabIndex: tabIndex,
     ref: ref,
     children: children
   });
 });
-InternalList.displayName = COMPONENT_NAME$Z;
-InternalList.className = CLASSNAME$_;
-InternalList.defaultProps = DEFAULT_PROPS$V;
+InternalList.displayName = COMPONENT_NAME$$;
+InternalList.className = CLASSNAME$10;
+InternalList.defaultProps = DEFAULT_PROPS$Y;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
 });
@@ -4154,21 +4189,22 @@ const POPOVER_ZINDEX = 9999;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Y = 'Popover';
+const COMPONENT_NAME$_ = 'Popover';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Z = 'lumx-popover';
+const CLASSNAME$$ = 'lumx-popover';
 const {
-  block: block$Q,
-  element: element$E
-} = bem(CLASSNAME$Z);
+  block: block$R,
+  element: element$F
+} = bem(CLASSNAME$$);
 
 /**
  * Component default props (used by framework wrappers).
  */
-const DEFAULT_PROPS$U = {
+const DEFAULT_PROPS$X = {
+  closeMode: 'unmount',
   elevation: 3,
   placement: Placement.AUTO,
   focusAnchorOnClose: true,
@@ -4191,7 +4227,8 @@ const Popover$1 = (props, {
     as: asTag = 'div',
     children,
     className,
-    elevation = DEFAULT_PROPS$U.elevation,
+    closeMode = DEFAULT_PROPS$X.closeMode,
+    elevation = DEFAULT_PROPS$X.elevation,
     hasArrow,
     isOpen,
     position,
@@ -4201,7 +4238,7 @@ const Popover$1 = (props, {
     // Framework-specific
     ref,
     arrowRef,
-    usePortal = DEFAULT_PROPS$U.usePortal,
+    usePortal = DEFAULT_PROPS$X.usePortal,
     clickAwayCallback,
     clickAwayRefs,
     unmountSentinel,
@@ -4209,30 +4246,35 @@ const Popover$1 = (props, {
     ...forwardedProps
   } = props;
 
+  // Compute hidden/mounted state from closeMode and isOpen.
+  const isHidden = !isOpen && closeMode === 'hide';
+  const isMounted = isOpen || closeMode === 'hide';
+
   // Cast to `any` to avoid "union type too complex" error when using a dynamic tag name in JSX.
   // This is safe because `asTag` is always a valid HTML element tag (e.g. 'div').
   const Component = asTag;
   const adjustedElevation = Math.min(elevation || 0, 5);
-  if (!isOpen) return null;
+  if (!isMounted) return null;
   return /*#__PURE__*/jsx(Portal, {
     enabled: usePortal,
     children: /*#__PURE__*/jsxs(Component, {
       ...forwardedProps,
       ref: ref,
-      className: classnames(className, block$Q({
+      className: classnames(className, block$R({
         [`theme-${theme}`]: Boolean(theme),
         [`elevation-${adjustedElevation}`]: Boolean(adjustedElevation),
-        [`position-${position}`]: Boolean(position)
+        [`position-${position}`]: Boolean(position),
+        'is-hidden': Boolean(isHidden)
       })),
-      style: popoverStyle,
+      style: isHidden ? undefined : popoverStyle,
       "data-popper-placement": position,
       children: [unmountSentinel, /*#__PURE__*/jsxs(ClickAwayProvider, {
-        callback: clickAwayCallback,
+        callback: !isHidden && clickAwayCallback,
         childrenRefs: clickAwayRefs,
         children: [hasArrow && /*#__PURE__*/jsx("div", {
           ref: arrowRef,
-          className: element$E('arrow'),
-          style: arrowStyle,
+          className: element$F('arrow'),
+          style: isHidden ? undefined : arrowStyle,
           children: /*#__PURE__*/jsx("svg", {
             viewBox: "0 0 14 14",
             "aria-hidden": true,
@@ -4277,33 +4319,44 @@ function useRestoreFocusOnClose({
   focusAnchorOnClose,
   anchorRef,
   parentElement
-}, popoverElement) {
+}, popoverElement, isOpen) {
   const onBeforeUnmountRef = React__default.useRef();
+  const prevIsOpenRef = React__default.useRef(isOpen);
+  const tryRestoreFocus = React__default.useCallback(() => {
+    if (!popoverElement || !focusAnchorOnClose) return;
+    const isFocusWithin = popoverElement.contains(document.activeElement);
+    if (!isFocusWithin) return;
+
+    // On next render
+    setTimeout(() => {
+      const anchor = anchorRef.current;
+      const elementToFocus =
+      // Provided parent element
+      parentElement?.current || (
+      // Or first focusable element in anchor
+      anchor ? getFirstAndLastFocusable(anchor).first : undefined) ||
+      // Fallback to anchor
+      anchor;
+      elementToFocus?.focus({
+        preventScroll: true
+      });
+    }, 0);
+  }, [anchorRef, focusAnchorOnClose, parentElement, popoverElement]);
   React__default.useEffect(() => {
     if (!popoverElement || !focusAnchorOnClose) {
       onBeforeUnmountRef.current = undefined;
       return;
     }
-    onBeforeUnmountRef.current = () => {
-      const isFocusWithin = popoverElement?.contains(document.activeElement);
-      if (!isFocusWithin) return;
-
-      // On next render
-      setTimeout(() => {
-        const anchor = anchorRef.current;
-        const elementToFocus =
-        // Provided parent element
-        parentElement?.current || (
-        // Or first focusable element in anchor
-        anchor ? getFirstAndLastFocusable(anchor).first : undefined) ||
-        // Fallback to anchor
-        anchor;
-        elementToFocus?.focus({
-          preventScroll: true
-        });
-      }, 0);
-    };
-  }, [anchorRef, focusAnchorOnClose, parentElement, popoverElement]);
+    onBeforeUnmountRef.current = tryRestoreFocus;
+  }, [focusAnchorOnClose, popoverElement, tryRestoreFocus]);
+
+  // Handle closeMode="hide": detect isOpen going from true to false (popover stays mounted).
+  React__default.useEffect(() => {
+    if (prevIsOpenRef.current && !isOpen) {
+      tryRestoreFocus();
+    }
+    prevIsOpenRef.current = isOpen;
+  }, [isOpen, tryRestoreFocus]);
   return /*#__PURE__*/jsx(OnBeforeUnmount, {
     callbackRef: onBeforeUnmountRef
   });
@@ -6583,26 +6636,27 @@ const _InnerPopover = forwardRef((props, ref) => {
     as,
     children,
     className,
+    closeMode = DEFAULT_PROPS$X.closeMode,
     closeOnClickAway,
     closeOnEscape,
-    elevation = DEFAULT_PROPS$U.elevation,
+    elevation = DEFAULT_PROPS$X.elevation,
     focusElement,
     hasArrow,
     isOpen,
     onClose,
     parentElement,
-    usePortal = DEFAULT_PROPS$U.usePortal,
-    focusAnchorOnClose = DEFAULT_PROPS$U.focusAnchorOnClose,
+    usePortal = DEFAULT_PROPS$X.usePortal,
+    focusAnchorOnClose = DEFAULT_PROPS$X.focusAnchorOnClose,
     withFocusTrap,
     boundaryRef,
     fitToAnchorWidth,
     fitWithinViewportHeight,
     focusTrapZoneElement,
     offset,
-    placement = DEFAULT_PROPS$U.placement,
+    placement = DEFAULT_PROPS$X.placement,
     style,
     theme,
-    zIndex = DEFAULT_PROPS$U.zIndex,
+    zIndex = DEFAULT_PROPS$X.zIndex,
     ...forwardedProps
   } = props;
   const popoverRef = useRef(null);
@@ -6628,7 +6682,7 @@ const _InnerPopover = forwardRef((props, ref) => {
     focusAnchorOnClose,
     anchorRef,
     parentElement
-  }, popperElement);
+  }, popperElement, isOpen);
   const focusZoneElement = focusTrapZoneElement?.current || popoverRef?.current;
   useCallbackOnEscape(onClose, isOpen && closeOnEscape);
 
@@ -6642,6 +6696,7 @@ const _InnerPopover = forwardRef((props, ref) => {
     as: as,
     children,
     className,
+    closeMode,
     elevation,
     hasArrow,
     isOpen,
@@ -6661,7 +6716,7 @@ const _InnerPopover = forwardRef((props, ref) => {
     ThemeProvider
   });
 });
-_InnerPopover.displayName = COMPONENT_NAME$Y;
+_InnerPopover.displayName = COMPONENT_NAME$_;
 
 /**
  * Popover component.
@@ -6673,9 +6728,9 @@ _InnerPopover.displayName = COMPONENT_NAME$Y;
 const Popover = skipRender(
 // Skip render in SSR
 () => Boolean(DOCUMENT), _InnerPopover);
-Popover.displayName = COMPONENT_NAME$Y;
-Popover.className = CLASSNAME$Z;
-Popover.defaultProps = DEFAULT_PROPS$U;
+Popover.displayName = COMPONENT_NAME$_;
+Popover.className = CLASSNAME$$;
+Popover.defaultProps = DEFAULT_PROPS$X;
 
 // The error margin in px we want to have for triggering infinite scroll
 const SCROLL_TRIGGER_MARGIN = 5;
@@ -6721,21 +6776,21 @@ const useInfiniteScroll = (ref, callback, callbackOnMount = false, scrollTrigger
 /**
  * Component display name.
  */
-const COMPONENT_NAME$X = 'Dropdown';
+const COMPONENT_NAME$Z = 'Dropdown';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Y = 'lumx-dropdown';
+const CLASSNAME$_ = 'lumx-dropdown';
 const {
-  block: block$P,
-  element: element$D
-} = classNames.bem(CLASSNAME$Y);
+  block: block$Q,
+  element: element$E
+} = classNames.bem(CLASSNAME$_);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$T = {
+const DEFAULT_PROPS$W = {
   closeOnClick: true,
   closeOnClickAway: true,
   closeOnEscape: true,
@@ -6758,18 +6813,18 @@ const Dropdown = forwardRef((props, ref) => {
     anchorRef,
     children,
     className,
-    closeOnClick = DEFAULT_PROPS$T.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$T.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$T.closeOnEscape,
-    fitToAnchorWidth = DEFAULT_PROPS$T.fitToAnchorWidth,
-    fitWithinViewportHeight = DEFAULT_PROPS$T.fitWithinViewportHeight,
+    closeOnClick = DEFAULT_PROPS$W.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$W.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$W.closeOnEscape,
+    fitToAnchorWidth = DEFAULT_PROPS$W.fitToAnchorWidth,
+    fitWithinViewportHeight = DEFAULT_PROPS$W.fitWithinViewportHeight,
     isOpen,
     offset,
-    focusAnchorOnClose = DEFAULT_PROPS$T.focusAnchorOnClose,
+    focusAnchorOnClose = DEFAULT_PROPS$W.focusAnchorOnClose,
     onClose,
     onInfiniteScroll,
-    placement = DEFAULT_PROPS$T.placement,
-    shouldFocusOnOpen = DEFAULT_PROPS$T.shouldFocusOnOpen,
+    placement = DEFAULT_PROPS$W.placement,
+    shouldFocusOnOpen = DEFAULT_PROPS$W.shouldFocusOnOpen,
     zIndex,
     ...forwardedProps
   } = props;
@@ -6794,7 +6849,7 @@ const Dropdown = forwardRef((props, ref) => {
     ...forwardedProps,
     focusAnchorOnClose: focusAnchorOnClose,
     anchorRef: anchorRef,
-    className: classNames.join(className, block$P()),
+    className: classNames.join(className, block$Q()),
     elevation: 0,
     closeOnClickAway: closeOnClickAway,
     closeOnEscape: closeOnEscape,
@@ -6807,34 +6862,34 @@ const Dropdown = forwardRef((props, ref) => {
     placement: placement,
     zIndex: zIndex,
     children: /*#__PURE__*/jsx("div", {
-      className: element$D('menu'),
+      className: element$E('menu'),
       ref: innerRef,
       children: popperElement
     })
   }) : null;
 });
-Dropdown.displayName = COMPONENT_NAME$X;
-Dropdown.className = CLASSNAME$Y;
-Dropdown.defaultProps = DEFAULT_PROPS$T;
+Dropdown.displayName = COMPONENT_NAME$Z;
+Dropdown.className = CLASSNAME$_;
+Dropdown.defaultProps = DEFAULT_PROPS$W;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$W = 'ExpansionPanel';
+const COMPONENT_NAME$Y = 'ExpansionPanel';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$X = 'lumx-expansion-panel';
+const CLASSNAME$Z = 'lumx-expansion-panel';
 const {
-  block: block$O,
-  element: element$C
-} = classNames.bem(CLASSNAME$X);
+  block: block$P,
+  element: element$D
+} = classNames.bem(CLASSNAME$Z);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$S = {
+const DEFAULT_PROPS$V = {
   closeMode: 'unmount'
 };
 const isDragHandle = isComponent(DragHandle);
@@ -6852,7 +6907,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     className,
-    closeMode = DEFAULT_PROPS$S.closeMode,
+    closeMode = DEFAULT_PROPS$V.closeMode,
     children: anyChildren,
     hasBackground,
     hasHeaderDivider,
@@ -6873,7 +6928,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$C('label'),
+    className: element$D('label'),
     children: label
   });
   const toggleOpen = event => {
@@ -6889,7 +6944,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
     }
   };
   const color = theme === Theme$1.dark ? ColorPalette$1.light : ColorPalette$1.dark;
-  const rootClassName = classNames.join(className, block$O({
+  const rootClassName = classNames.join(className, block$P({
     'has-background': hasBackground,
     'has-header': Boolean(!isEmpty(headerProps.children)),
     'has-header-divider': hasHeaderDivider,
@@ -6932,17 +6987,17 @@ const ExpansionPanel = forwardRef((props, ref) => {
     ...forwardedProps,
     className: rootClassName,
     children: [/*#__PURE__*/jsxs("header", {
-      className: element$C('header'),
+      className: element$D('header'),
       onClick: toggleOpen,
       children: [dragHandle && /*#__PURE__*/jsx("div", {
-        className: element$C('header-drag'),
+        className: element$D('header-drag'),
         children: dragHandle
       }), /*#__PURE__*/jsx("div", {
         ...headerProps,
-        className: element$C('header-content'),
+        className: element$D('header-content'),
         children: headerContent
       }), /*#__PURE__*/jsx("div", {
-        className: element$C('header-toggle'),
+        className: element$D('header-toggle'),
         children: /*#__PURE__*/jsx(IconButton, {
           ...toggleButtonProps,
           color: color,
@@ -6952,32 +7007,32 @@ const ExpansionPanel = forwardRef((props, ref) => {
         })
       })]
     }), /*#__PURE__*/jsx("div", {
-      className: element$C('wrapper'),
+      className: element$D('wrapper'),
       ref: wrapperRef,
       children: (isOpen || isChildrenVisible) && /*#__PURE__*/jsxs("div", {
-        className: element$C('container'),
+        className: element$D('container'),
         children: [/*#__PURE__*/jsx("div", {
-          className: element$C('content'),
+          className: element$D('content'),
           children: content
         }), footer && /*#__PURE__*/jsx("div", {
-          className: element$C('footer'),
+          className: element$D('footer'),
           children: footer
         })]
       })
     })]
   });
 });
-ExpansionPanel.displayName = COMPONENT_NAME$W;
-ExpansionPanel.className = CLASSNAME$X;
-ExpansionPanel.defaultProps = DEFAULT_PROPS$S;
+ExpansionPanel.displayName = COMPONENT_NAME$Y;
+ExpansionPanel.className = CLASSNAME$Z;
+ExpansionPanel.defaultProps = DEFAULT_PROPS$V;
 
-const COMPONENT_NAME$V = 'Flag';
-const CLASSNAME$W = 'lumx-flag';
-const DEFAULT_PROPS$R = {};
+const COMPONENT_NAME$X = 'Flag';
+const CLASSNAME$Y = 'lumx-flag';
+const DEFAULT_PROPS$U = {};
 const {
-  block: block$N,
-  element: element$B
-} = bem(CLASSNAME$W);
+  block: block$O,
+  element: element$C
+} = bem(CLASSNAME$Y);
 
 /**
  * Flag component.
@@ -7000,19 +7055,19 @@ const Flag$1 = props => {
   const isTruncated = !!truncate;
   return /*#__PURE__*/jsxs("div", {
     ...forwardedProps,
-    className: classnames(className, block$N({
+    className: classnames(className, block$O({
       [`color-${flagColor}`]: Boolean(flagColor),
       'is-truncated': isTruncated
     })),
     children: [icon && Icon$1({
       icon,
       size: Size.xxs,
-      className: element$B('icon')
+      className: element$C('icon')
     }), /*#__PURE__*/jsx(Text, {
       as: "span",
       truncate: !!truncate,
       typography: "overline",
-      className: element$B('label'),
+      className: element$C('label'),
       children: children
     })]
   });
@@ -7035,9 +7090,9 @@ const Flag = forwardRef((props, ref) => {
     Text
   });
 });
-Flag.displayName = COMPONENT_NAME$V;
-Flag.className = CLASSNAME$W;
-Flag.defaultProps = DEFAULT_PROPS$R;
+Flag.displayName = COMPONENT_NAME$X;
+Flag.className = CLASSNAME$Y;
+Flag.defaultProps = DEFAULT_PROPS$U;
 
 /**
  * Defines the props of the component.
@@ -7046,15 +7101,15 @@ Flag.defaultProps = DEFAULT_PROPS$R;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$U = 'FlexBox';
+const COMPONENT_NAME$W = 'FlexBox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$V = 'lumx-flex-box';
+const CLASSNAME$X = 'lumx-flex-box';
 const {
-  block: block$M
-} = bem(CLASSNAME$V);
+  block: block$N
+} = bem(CLASSNAME$X);
 
 /**
  * Get FlexBox component props (className computation).
@@ -7078,7 +7133,7 @@ function getFlexBoxProps(props) {
   const adjustedOrientation = orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null);
   return {
     ...forwardedProps,
-    className: classnames(className, block$M({
+    className: classnames(className, block$N({
       [`orientation-${adjustedOrientation}`]: Boolean(adjustedOrientation),
       [`v-align-${vAlign}`]: Boolean(vAlign),
       [`h-align-${hAlign}`]: Boolean(hAlign),
@@ -7110,27 +7165,27 @@ const FlexBox = forwardRef((props, ref) => {
     children: children
   });
 });
-FlexBox.displayName = COMPONENT_NAME$U;
-FlexBox.className = CLASSNAME$V;
+FlexBox.displayName = COMPONENT_NAME$W;
+FlexBox.className = CLASSNAME$X;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$T = 'GenericBlock';
+const COMPONENT_NAME$V = 'GenericBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$U = 'lumx-generic-block';
+const CLASSNAME$W = 'lumx-generic-block';
 const {
-  block: block$L,
-  element: element$A
-} = classNames.bem(CLASSNAME$U);
+  block: block$M,
+  element: element$B
+} = classNames.bem(CLASSNAME$W);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Q = {
+const DEFAULT_PROPS$T = {
   gap: Size$1.big,
   orientation: Orientation$1.horizontal
 };
@@ -7160,8 +7215,8 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     children,
     actions,
     actionsProps,
-    gap = DEFAULT_PROPS$Q.gap,
-    orientation = DEFAULT_PROPS$Q.orientation,
+    gap = DEFAULT_PROPS$T.gap,
+    orientation = DEFAULT_PROPS$T.orientation,
     contentProps,
     ...forwardedProps
   } = props;
@@ -7180,7 +7235,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
   }, [children]);
   return /*#__PURE__*/jsxs(FlexBox, {
     ref: ref,
-    className: classNames.join(className, block$L()),
+    className: classNames.join(className, block$M()),
     gap: gap,
     orientation: orientation,
     ...forwardedProps,
@@ -7190,7 +7245,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       hAlign: forwardedProps.hAlign,
       ...figureProps,
       ...sections.figureChildProps,
-      className: classNames.join(figureProps?.className, sections.figureChildProps?.className, element$A('figure')),
+      className: classNames.join(figureProps?.className, sections.figureChildProps?.className, element$B('figure')),
       children: [figure, sections.figureChildProps?.children]
     }), (sections.contentChildProps?.children || sections.otherChildren.length > 0) && /*#__PURE__*/jsxs(FlexBox, {
       ref: sections.contentChild?.ref,
@@ -7200,7 +7255,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       hAlign: forwardedProps.hAlign,
       ...contentProps,
       ...sections.contentChildProps,
-      className: classNames.join(contentProps?.className, sections.contentChildProps?.className, element$A('content')),
+      className: classNames.join(contentProps?.className, sections.contentChildProps?.className, element$B('content')),
       children: [sections.contentChildProps?.children, sections.otherChildren]
     }), (actions || sections.actionsChildProps?.children) && /*#__PURE__*/jsxs(FlexBox, {
       ref: sections.actionsChild?.ref,
@@ -7208,14 +7263,14 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       hAlign: forwardedProps.hAlign,
       ...actionsProps,
       ...sections.actionsChildProps,
-      className: classNames.join(actionsProps?.className, sections.actionsChildProps?.className, element$A('actions')),
+      className: classNames.join(actionsProps?.className, sections.actionsChildProps?.className, element$B('actions')),
       children: [actions, sections.actionsChildProps?.children]
     })]
   });
 });
-BaseGenericBlock.displayName = COMPONENT_NAME$T;
-BaseGenericBlock.className = CLASSNAME$U;
-BaseGenericBlock.defaultProps = DEFAULT_PROPS$Q;
+BaseGenericBlock.displayName = COMPONENT_NAME$V;
+BaseGenericBlock.className = CLASSNAME$W;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS$T;
 const GenericBlock = Object.assign(BaseGenericBlock, {
   Figure,
   Content,
@@ -7253,17 +7308,17 @@ const defaultContext = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$S = 'Heading';
+const COMPONENT_NAME$U = 'Heading';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$T = 'lumx-heading';
+const CLASSNAME$V = 'lumx-heading';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$P = {};
+const DEFAULT_PROPS$S = {};
 
 /**
  * Get Heading component common props
@@ -7283,7 +7338,7 @@ const getHeadingProps = (props, contextHeadingElement) => {
   return {
     ...otherProps,
     as: computedHeadingElement,
-    className: classnames(className, CLASSNAME$T),
+    className: classnames(className, CLASSNAME$V),
     typography: typography || DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]
   };
 };
@@ -7351,20 +7406,20 @@ function wrapChildrenIconWithSpaces(children) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$R = 'Text';
+const COMPONENT_NAME$T = 'Text';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$S = 'lumx-text';
+const CLASSNAME$U = 'lumx-text';
 const {
-  block: block$K
-} = bem(CLASSNAME$S);
+  block: block$L
+} = bem(CLASSNAME$U);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$O = {};
+const DEFAULT_PROPS$R = {};
 
 /**
  * Text component common props
@@ -7400,7 +7455,7 @@ const getTextProps = props => {
     '--lumx-text-white-space': whiteSpace
   };
   return {
-    className: classnames(className, block$K({
+    className: classnames(className, block$L({
       'is-truncated': isTruncated && !isTruncatedMultiline,
       'is-truncated-multiline': isTruncatedMultiline,
       'no-wrap': noWrap
@@ -7449,9 +7504,9 @@ const Text = forwardRef((props, ref) => {
     children: wrapChildrenIconWithSpaces(children)
   });
 });
-Text.displayName = COMPONENT_NAME$R;
-Text.className = CLASSNAME$S;
-Text.defaultProps = DEFAULT_PROPS$O;
+Text.displayName = COMPONENT_NAME$T;
+Text.className = CLASSNAME$U;
+Text.defaultProps = DEFAULT_PROPS$R;
 
 const HeadingLevelContext = /*#__PURE__*/createContext(defaultContext);
 
@@ -7486,9 +7541,9 @@ const Heading = forwardRef((props, ref) => {
     children: children
   });
 });
-Heading.displayName = COMPONENT_NAME$S;
-Heading.className = CLASSNAME$T;
-Heading.defaultProps = DEFAULT_PROPS$P;
+Heading.displayName = COMPONENT_NAME$U;
+Heading.className = CLASSNAME$V;
+Heading.defaultProps = DEFAULT_PROPS$S;
 
 /**
  * Computes the next heading level based on the optional prop level or the parent context level.
@@ -7526,20 +7581,20 @@ const HeadingLevelProvider = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Q = 'Grid';
+const COMPONENT_NAME$S = 'Grid';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$R = 'lumx-grid';
+const CLASSNAME$T = 'lumx-grid';
 const {
-  block: block$J
-} = classNames.bem(CLASSNAME$R);
+  block: block$K
+} = classNames.bem(CLASSNAME$T);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$N = {
+const DEFAULT_PROPS$Q = {
   orientation: Orientation$1.horizontal,
   wrap: 'nowrap'
 };
@@ -7557,15 +7612,15 @@ const Grid = forwardRef((props, ref) => {
     className,
     gutter,
     hAlign,
-    orientation = DEFAULT_PROPS$N.orientation,
+    orientation = DEFAULT_PROPS$Q.orientation,
     vAlign,
-    wrap = DEFAULT_PROPS$N.wrap,
+    wrap = DEFAULT_PROPS$Q.wrap,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, classNames.bem(`${CLASSNAME$R}-container`).block(), block$J({
+    className: classNames.join(className, classNames.bem(`${CLASSNAME$T}-container`).block(), block$K({
       [`h-align-${hAlign}`]: Boolean(hAlign),
       [`v-align-${vAlign}`]: Boolean(vAlign),
       [`orientation-${orientation}`]: Boolean(orientation),
@@ -7575,22 +7630,22 @@ const Grid = forwardRef((props, ref) => {
     children: children
   });
 });
-Grid.displayName = COMPONENT_NAME$Q;
-Grid.className = CLASSNAME$R;
-Grid.defaultProps = DEFAULT_PROPS$N;
+Grid.displayName = COMPONENT_NAME$S;
+Grid.className = CLASSNAME$T;
+Grid.defaultProps = DEFAULT_PROPS$Q;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$P = 'GridItem';
+const COMPONENT_NAME$R = 'GridItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Q = 'lumx-grid-item';
+const CLASSNAME$S = 'lumx-grid-item';
 const {
-  block: block$I
-} = classNames.bem(CLASSNAME$Q);
+  block: block$J
+} = classNames.bem(CLASSNAME$S);
 
 /**
  * GridItem component.
@@ -7611,7 +7666,7 @@ const GridItem = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$I({
+    className: classNames.join(className, block$J({
       [`width-${width}`]: Boolean(width),
       [`order-${order}`]: Boolean(order),
       [`align-${align}`]: Boolean(align)
@@ -7619,23 +7674,23 @@ const GridItem = forwardRef((props, ref) => {
     children: children
   });
 });
-GridItem.displayName = COMPONENT_NAME$P;
-GridItem.className = CLASSNAME$Q;
+GridItem.displayName = COMPONENT_NAME$R;
+GridItem.className = CLASSNAME$S;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$O = 'GridColumn';
+const COMPONENT_NAME$Q = 'GridColumn';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$P = 'lumx-grid-column';
+const CLASSNAME$R = 'lumx-grid-column';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$M = {};
+const DEFAULT_PROPS$P = {};
 
 /**
  * The GridColumn is a layout component that can display children in a grid
@@ -7660,7 +7715,7 @@ const GridColumn$1 = props => {
   return /*#__PURE__*/jsx(Component, {
     ...forwardedProps,
     ref: ref,
-    className: classnames(className, CLASSNAME$P),
+    className: classnames(className, CLASSNAME$R),
     style: {
       ...style,
       ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
@@ -7670,9 +7725,9 @@ const GridColumn$1 = props => {
     children: children
   });
 };
-GridColumn$1.displayName = COMPONENT_NAME$O;
-GridColumn$1.className = CLASSNAME$P;
-GridColumn$1.defaultProps = DEFAULT_PROPS$M;
+GridColumn$1.displayName = COMPONENT_NAME$Q;
+GridColumn$1.className = CLASSNAME$R;
+GridColumn$1.defaultProps = DEFAULT_PROPS$P;
 
 /**
  * Defines the props of the component.
@@ -7683,7 +7738,7 @@ GridColumn$1.defaultProps = DEFAULT_PROPS$M;
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$L = {};
+const DEFAULT_PROPS$O = {};
 
 /**
  * The GridColumn is a layout component that can display children in a grid
@@ -7700,9 +7755,9 @@ const GridColumn = forwardRef((props, ref) => {
     ...props
   });
 });
-GridColumn.displayName = COMPONENT_NAME$O;
-GridColumn.className = CLASSNAME$P;
-GridColumn.defaultProps = DEFAULT_PROPS$L;
+GridColumn.displayName = COMPONENT_NAME$Q;
+GridColumn.className = CLASSNAME$R;
+GridColumn.defaultProps = DEFAULT_PROPS$O;
 
 /**
  * Icon component.
@@ -7806,21 +7861,21 @@ const ImageBlockCaptionPosition = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$N = 'ImageBlock';
+const COMPONENT_NAME$P = 'ImageBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$O = 'lumx-image-block';
+const CLASSNAME$Q = 'lumx-image-block';
 const {
-  block: block$H,
-  element: element$z
-} = classNames.bem(CLASSNAME$O);
+  block: block$I,
+  element: element$A
+} = classNames.bem(CLASSNAME$Q);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$K = {
+const DEFAULT_PROPS$N = {
   captionPosition: ImageBlockCaptionPosition.below,
   align: Alignment.left
 };
@@ -7836,9 +7891,9 @@ const ImageBlock = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     actions,
-    align = DEFAULT_PROPS$K.align,
+    align = DEFAULT_PROPS$N.align,
     alt,
-    captionPosition = DEFAULT_PROPS$K.captionPosition,
+    captionPosition = DEFAULT_PROPS$N.captionPosition,
     captionStyle,
     className,
     description,
@@ -7856,7 +7911,7 @@ const ImageBlock = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("figure", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$H({
+    className: classNames.join(className, block$I({
       [`caption-position-${captionPosition}`]: Boolean(captionPosition),
       [`align-${align}`]: Boolean(align),
       [`size-${size}`]: Boolean(size),
@@ -7865,7 +7920,7 @@ const ImageBlock = forwardRef((props, ref) => {
     })),
     children: [/*#__PURE__*/jsx(Thumbnail, {
       ...thumbnailProps,
-      className: classNames.join(element$z('image'), thumbnailProps?.className),
+      className: classNames.join(element$A('image'), thumbnailProps?.className),
       fillHeight: fillHeight,
       align: align,
       image: image,
@@ -7874,7 +7929,7 @@ const ImageBlock = forwardRef((props, ref) => {
       alt: alt || title
     }), /*#__PURE__*/jsx(ImageCaption, {
       as: "figcaption",
-      baseClassName: CLASSNAME$O,
+      baseClassName: CLASSNAME$Q,
       theme: theme,
       title: title,
       titleProps: titleProps,
@@ -7885,24 +7940,24 @@ const ImageBlock = forwardRef((props, ref) => {
       align: align,
       truncate: captionPosition === 'over'
     }), actions && /*#__PURE__*/jsx("div", {
-      className: element$z('actions'),
+      className: element$A('actions'),
       children: actions
     })]
   });
 });
-ImageBlock.displayName = COMPONENT_NAME$N;
-ImageBlock.className = CLASSNAME$O;
-ImageBlock.defaultProps = DEFAULT_PROPS$K;
+ImageBlock.displayName = COMPONENT_NAME$P;
+ImageBlock.className = CLASSNAME$Q;
+ImageBlock.defaultProps = DEFAULT_PROPS$N;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$M = 'ImageLightbox';
+const COMPONENT_NAME$O = 'ImageLightbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$N = 'lumx-image-lightbox';
+const CLASSNAME$P = 'lumx-image-lightbox';
 
 /**
  * Observe element size (only works if it's size depends on the window size).
@@ -8147,8 +8202,8 @@ function useAnimateScroll(scrollAreaRef) {
 }
 
 const {
-  element: element$y
-} = classNames.bem(CLASSNAME$N);
+  element: element$z
+} = classNames.bem(CLASSNAME$P);
 /** Internal image slide component for ImageLightbox */
 const ImageSlide = /*#__PURE__*/React__default.memo(props => {
   const {
@@ -8215,12 +8270,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$y('image-slide'),
+    className: element$z('image-slide'),
     children: /*#__PURE__*/jsx(Thumbnail, {
       imgRef: useMergeRefs(imgRef, propImgRef),
       image: image,
       alt: alt,
-      className: element$y('thumbnail'),
+      className: element$z('thumbnail'),
       imgProps: {
         ...imgProps,
         style: {
@@ -8239,8 +8294,8 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
 }, isEqual);
 
 const {
-  element: element$x
-} = classNames.bem(CLASSNAME$N);
+  element: element$y
+} = classNames.bem(CLASSNAME$P);
 /** Internal image slideshow component for ImageLightbox */
 const ImageSlideshow = ({
   activeImageIndex,
@@ -8361,12 +8416,12 @@ const ImageSlideshow = ({
       })
     }), (metadata || slideShowControls || zoomControls) && /*#__PURE__*/jsxs(FlexBox, {
       ref: footerRef,
-      className: element$x('footer'),
+      className: element$y('footer'),
       orientation: "vertical",
       vAlign: "center",
       gap: "big",
       children: [metadata, /*#__PURE__*/jsxs(FlexBox, {
-        className: element$x('footer-actions'),
+        className: element$y('footer-actions'),
         orientation: "horizontal",
         gap: "regular",
         children: [slideShowControls, zoomControls]
@@ -8486,7 +8541,7 @@ function useImageLightbox(props) {
         viewTransitionName: {
           source: currentImageRef,
           target: triggerImageRefs[currentIndex],
-          name: CLASSNAME$N
+          name: CLASSNAME$P
         }
       });
     }
@@ -8538,7 +8593,7 @@ function useImageLightbox(props) {
         viewTransitionName: {
           source: triggerImage,
           target: currentImageRef,
-          name: CLASSNAME$N
+          name: CLASSNAME$P
         }
       });
     }
@@ -8592,7 +8647,7 @@ const Inner = forwardRef((props, ref) => {
   }, [onClose]);
   return /*#__PURE__*/jsx(Lightbox, {
     ref: ref,
-    className: classNames.join(className, CLASSNAME$N),
+    className: classNames.join(className, CLASSNAME$P),
     parentElement: parentElement,
     isOpen: isOpen,
     onClose: onClose,
@@ -8621,8 +8676,8 @@ const Inner = forwardRef((props, ref) => {
     })
   });
 });
-Inner.displayName = COMPONENT_NAME$M;
-Inner.className = CLASSNAME$N;
+Inner.displayName = COMPONENT_NAME$O;
+Inner.className = CLASSNAME$P;
 
 /**
  * ImageLightbox component.
@@ -8638,21 +8693,21 @@ const ImageLightbox = Object.assign(Inner, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$L = 'InlineList';
+const COMPONENT_NAME$N = 'InlineList';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$M = 'lumx-inline-list';
+const CLASSNAME$O = 'lumx-inline-list';
 const {
-  block: block$G,
-  element: element$w
-} = classNames.bem(CLASSNAME$M);
+  block: block$H,
+  element: element$x
+} = classNames.bem(CLASSNAME$O);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$J = {};
+const DEFAULT_PROPS$M = {};
 
 /**
  * InlineList component.
@@ -8677,7 +8732,7 @@ const InlineList = forwardRef((props, ref) => {
     jsx("ul", {
       ...forwardedProps,
       ref: ref,
-      className: classNames.join(className, block$G({
+      className: classNames.join(className, block$H({
         wrap: Boolean(wrap)
       }), color && classNames.font(color, colorVariant), typography && classNames.typography(typography))
       // Lists with removed bullet style can lose their a11y list role on some browsers
@@ -8691,9 +8746,9 @@ const InlineList = forwardRef((props, ref) => {
           // eslint-disable-next-line jsx-a11y/no-redundant-roles
           jsxs("li", {
             role: "listitem",
-            className: element$w('item'),
+            className: element$x('item'),
             children: [index !== 0 && /*#__PURE__*/jsx("span", {
-              className: element$w('item-separator'),
+              className: element$x('item-separator'),
               "aria-hidden": "true",
               children: '\u00A0•\u00A0'
             }), child]
@@ -8703,9 +8758,9 @@ const InlineList = forwardRef((props, ref) => {
     })
   );
 });
-InlineList.displayName = COMPONENT_NAME$L;
-InlineList.className = CLASSNAME$M;
-InlineList.defaultProps = DEFAULT_PROPS$J;
+InlineList.displayName = COMPONENT_NAME$N;
+InlineList.className = CLASSNAME$O;
+InlineList.defaultProps = DEFAULT_PROPS$M;
 
 /**
  * InputHelper component.
@@ -8748,16 +8803,16 @@ InputLabel.defaultProps = InputLabel$1.defaultProps;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$K = 'Lightbox';
+const COMPONENT_NAME$M = 'Lightbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$L = 'lumx-lightbox';
+const CLASSNAME$N = 'lumx-lightbox';
 const {
-  block: block$F,
-  element: element$v
-} = classNames.bem(CLASSNAME$L);
+  block: block$G,
+  element: element$w
+} = classNames.bem(CLASSNAME$N);
 
 /**
  * Lightbox component.
@@ -8841,7 +8896,7 @@ const Lightbox = forwardRef((props, ref) => {
       "aria-modal": "true",
       role: "dialog",
       tabIndex: -1,
-      className: classNames.join(className, block$F({
+      className: classNames.join(className, block$G({
         'is-hidden': !isOpen,
         'is-shown': isOpen || isVisible,
         [`theme-${theme}`]: Boolean(theme)
@@ -8850,7 +8905,7 @@ const Lightbox = forwardRef((props, ref) => {
         zIndex
       },
       children: [closeButtonProps && /*#__PURE__*/jsx("div", {
-        className: element$v('close'),
+        className: element$w('close'),
         children: /*#__PURE__*/jsx(IconButton, {
           ...closeButtonProps,
           ref: closeButtonRef,
@@ -8870,7 +8925,7 @@ const Lightbox = forwardRef((props, ref) => {
             childrenRefs: clickAwayRefs,
             children: /*#__PURE__*/jsx("div", {
               ref: childrenRef,
-              className: element$v('wrapper'),
+              className: element$w('wrapper'),
               role: "presentation",
               children: children
             })
@@ -8880,8 +8935,8 @@ const Lightbox = forwardRef((props, ref) => {
     })
   });
 });
-Lightbox.displayName = COMPONENT_NAME$K;
-Lightbox.className = CLASSNAME$L;
+Lightbox.displayName = COMPONENT_NAME$M;
+Lightbox.className = CLASSNAME$N;
 
 /**
  * Defines the props of the component.
@@ -8890,15 +8945,15 @@ Lightbox.className = CLASSNAME$L;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$J = 'Link';
+const COMPONENT_NAME$L = 'Link';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$K = 'lumx-link';
+const CLASSNAME$M = 'lumx-link';
 const {
-  block: block$E
-} = bem(CLASSNAME$K);
+  block: block$F
+} = bem(CLASSNAME$M);
 
 /**
  * Link component.
@@ -8927,7 +8982,7 @@ const Link$1 = props => {
     ...forwardedProps,
     handleClick,
     children,
-    className: classnames(className, block$E({
+    className: classnames(className, block$F({
       [`color-${color}`]: Boolean(color),
       [`color-variant-${colorVariant}`]: Boolean(colorVariant),
       'has-typography': !!typography$1
@@ -8936,8 +8991,8 @@ const Link$1 = props => {
 };
 
 const {
-  element: element$u
-} = classNames.bem(CLASSNAME$K);
+  element: element$v
+} = classNames.bem(CLASSNAME$M);
 
 /**
  * Defines the props of the component.
@@ -8972,38 +9027,38 @@ const Link = forwardRef((props, ref) => {
     children: wrapChildrenIconWithSpaces(/*#__PURE__*/jsxs(Fragment, {
       children: [leftIcon && /*#__PURE__*/jsx(Icon, {
         icon: leftIcon,
-        className: element$u('left-icon')
+        className: element$v('left-icon')
       }), children && /*#__PURE__*/jsx("span", {
-        className: element$u('content'),
+        className: element$v('content'),
         children: children
       }), rightIcon && /*#__PURE__*/jsx(Icon, {
         icon: rightIcon,
-        className: element$u('right-icon')
+        className: element$v('right-icon')
       })]
     }))
   });
 });
-Link.displayName = COMPONENT_NAME$J;
-Link.className = CLASSNAME$K;
+Link.displayName = COMPONENT_NAME$L;
+Link.className = CLASSNAME$M;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$I = 'LinkPreview';
+const COMPONENT_NAME$K = 'LinkPreview';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$J = 'lumx-link-preview';
+const CLASSNAME$L = 'lumx-link-preview';
 const {
-  block: block$D,
-  element: element$t
-} = classNames.bem(CLASSNAME$J);
+  block: block$E,
+  element: element$u
+} = classNames.bem(CLASSNAME$L);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$I = {
+const DEFAULT_PROPS$L = {
   size: Size$1.regular,
   titleHeading: 'h2'
 };
@@ -9023,11 +9078,11 @@ const LinkPreview = forwardRef((props, ref) => {
     link,
     linkAs,
     linkProps,
-    size = DEFAULT_PROPS$I.size,
+    size = DEFAULT_PROPS$L.size,
     theme = defaultTheme,
     thumbnailProps,
     title,
-    titleHeading = DEFAULT_PROPS$I.titleHeading,
+    titleHeading = DEFAULT_PROPS$L.titleHeading,
     ...forwardedProps
   } = props;
   // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
@@ -9036,14 +9091,14 @@ const LinkPreview = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("article", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$D({
+    className: classNames.join(className, block$E({
       [`size-${adjustedSize}`]: Boolean(adjustedSize),
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: /*#__PURE__*/jsxs("div", {
-      className: element$t('wrapper'),
+      className: element$u('wrapper'),
       children: [thumbnailProps && /*#__PURE__*/jsx("div", {
-        className: element$t('thumbnail'),
+        className: element$u('thumbnail'),
         children: /*#__PURE__*/jsx(Thumbnail, {
           ...thumbnailProps,
           linkAs: linkAs,
@@ -9058,9 +9113,9 @@ const LinkPreview = forwardRef((props, ref) => {
           fillHeight: true
         })
       }), /*#__PURE__*/jsxs("div", {
-        className: element$t('container'),
+        className: element$u('container'),
         children: [title && /*#__PURE__*/jsx(TitleHeading, {
-          className: element$t('title'),
+          className: element$u('title'),
           children: /*#__PURE__*/jsx(Link, {
             ...linkProps,
             linkAs: linkAs,
@@ -9071,14 +9126,14 @@ const LinkPreview = forwardRef((props, ref) => {
             children: title
           })
         }), description && /*#__PURE__*/jsx("p", {
-          className: element$t('description'),
+          className: element$u('description'),
           children: description
         }), /*#__PURE__*/jsx("div", {
-          className: element$t('link'),
+          className: element$u('link'),
           children: /*#__PURE__*/jsx(Link, {
             ...linkProps,
             linkAs: linkAs,
-            className: classNames.join(element$t('link'), linkProps?.className),
+            className: classNames.join(element$u('link'), linkProps?.className),
             target: "_blank",
             href: link,
             color: theme === Theme$1.light ? ColorPalette$1.primary : ColorPalette$1.light,
@@ -9093,28 +9148,108 @@ const LinkPreview = forwardRef((props, ref) => {
     })
   });
 });
-LinkPreview.displayName = COMPONENT_NAME$I;
-LinkPreview.className = CLASSNAME$J;
-LinkPreview.defaultProps = DEFAULT_PROPS$I;
+LinkPreview.displayName = COMPONENT_NAME$K;
+LinkPreview.className = CLASSNAME$L;
+LinkPreview.defaultProps = DEFAULT_PROPS$L;
+
+/**
+ * ListItemAction props.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$J = 'ListItemAction';
+
+/**
+ * Component classname (used by action area CSS pattern).
+ */
+const CLASSNAME$K = 'lumx-action-area__action';
+const DEFAULT_PROPS$K = {};
+
+/**
+ * ListItemAction component.
+ *
+ * Renders a button or link with action area classes.
+ * When placed as a child of ListItem, it activates the action area pattern:
+ * the entire list item becomes visually clickable, while other interactive
+ * elements (in `before`/`after` slots) remain independently clickable.
+ */
+const ListItemAction$1 = props => {
+  const {
+    children,
+    className,
+    as: Element = 'button',
+    handleClick,
+    ...forwardedProps
+  } = props;
+  return RawClickable({
+    as: Element,
+    ...forwardedProps,
+    className: classnames(className, actionArea.action({
+      'has-overlay': true,
+      'focus-inset': true
+    })),
+    handleClick,
+    children
+  });
+};
+
+/** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
+const forwardRefPolymorphic = React__default.forwardRef;
+
+/**
+ * ListItem.Action props.
+ */
+
+/**
+ * ListItem.Action sub-component.
+ *
+ * Renders a button or link with action area classes.
+ * When placed as a child of ListItem, it activates the action area pattern:
+ * the entire list item becomes visually clickable, while other interactive
+ * elements (in `before`/`after` slots) remain independently clickable.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ListItemAction = Object.assign(forwardRefPolymorphic((props, ref) => {
+  const {
+    children,
+    onClick,
+    ...forwardedProps
+  } = props;
+  return ListItemAction$1({
+    ...forwardedProps,
+    handleClick: onClick,
+    ref,
+    children
+  });
+}), {
+  displayName: COMPONENT_NAME$J,
+  className: CLASSNAME$K,
+  defaultProps: DEFAULT_PROPS$K
+});
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$H = 'ListItem';
+const COMPONENT_NAME$I = 'ListItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$I = 'lumx-list-item';
+const CLASSNAME$J = 'lumx-list-item';
 const {
-  block: block$C,
-  element: element$s
-} = classNames.bem(CLASSNAME$I);
+  block: block$D,
+  element: element$t
+} = classNames.bem(CLASSNAME$J);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$H = {
+const DEFAULT_PROPS$J = {
   size: Size$1.regular
 };
 
@@ -9137,7 +9272,7 @@ function isClickable({
  * @param  ref   Component ref.
  * @return React element.
  */
-const ListItem = forwardRef((props, ref) => {
+const _ListItem = forwardRef((props, ref) => {
   const {
     isAnyDisabled,
     disabledStateProps,
@@ -9154,62 +9289,75 @@ const ListItem = forwardRef((props, ref) => {
     linkProps = {},
     linkRef,
     onItemSelected,
-    size = DEFAULT_PROPS$H.size,
+    onClick,
+    size = DEFAULT_PROPS$J.size,
     ...forwardedProps
   } = otherProps;
   const clickable = isClickable({
     linkAs,
     linkProps,
-    onItemSelected
+    onItemSelected: onItemSelected || onClick
   });
   return /*#__PURE__*/jsx("li", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$C({
+    className: classNames.join(className, block$D({
       [`size-${size}`]: Boolean(size)
     })),
     children: RawClickable({
       as: clickable ? linkAs || (linkProps.href ? 'a' : 'button') : 'div',
       ...disabledStateProps,
       ...linkProps,
-      className: classNames.join(element$s(clickable ? 'link' : 'wrapper', {
+      className: classNames.join(element$t(clickable ? 'link' : 'wrapper', {
         'is-highlighted': isHighlighted,
         'is-selected': isSelected,
         'is-disabled': isAnyDisabled
       })),
-      handleClick: onItemSelected,
+      handleClick(event) {
+        onItemSelected?.(event);
+        onClick?.(event);
+      },
       ref: linkRef,
       children: /*#__PURE__*/jsxs(Fragment, {
         children: [before && /*#__PURE__*/jsx("div", {
-          className: element$s('before'),
+          className: element$t('before'),
           children: before
         }), /*#__PURE__*/jsx("div", {
-          className: element$s('content'),
+          className: element$t('content'),
           children: children
         }), after && /*#__PURE__*/jsx("div", {
-          className: element$s('after'),
+          className: element$t('after'),
           children: after
         })]
       })
     })
   });
 });
-ListItem.displayName = COMPONENT_NAME$H;
-ListItem.className = CLASSNAME$I;
-ListItem.defaultProps = DEFAULT_PROPS$H;
+_ListItem.displayName = COMPONENT_NAME$I;
+_ListItem.className = CLASSNAME$J;
+_ListItem.defaultProps = DEFAULT_PROPS$J;
+
+/**
+ * ListItem component with Action sub-component.
+ */
+const ListItem = Object.assign(_ListItem, {
+  /** Sub-component that renders the default action (button or link) for the action area pattern. */
+  Action: ListItemAction
+});
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$G = 'ListDivider';
+const COMPONENT_NAME$H = 'ListDivider';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$H = 'lumx-list-divider';
+const CLASSNAME$I = 'lumx-list-divider';
 
 /**
  * ListDivider component.
+ * Purely decorative, consider a `ListSection` with label for a better list structure.
  *
  * @param  props Component props.
  * @param  ref   Component ref.
@@ -9221,13 +9369,100 @@ const ListDivider = forwardRef((props, ref) => {
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("li", {
+    ref: ref,
+    role: "none",
+    ...forwardedProps,
+    className: classNames.join(className, CLASSNAME$I)
+  });
+});
+ListDivider.displayName = COMPONENT_NAME$H;
+ListDivider.className = CLASSNAME$I;
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$G = 'ListSection';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$H = 'lumx-list-section';
+const {
+  block: block$C,
+  element: element$s
+} = bem(CLASSNAME$H);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$I = {};
+
+/**
+ * ListSection component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+const ListSection$1 = props => {
+  const {
+    children,
+    className,
+    label,
+    icon,
+    itemsWrapperProps,
+    id,
+    ref,
+    Text,
+    ...forwardedProps
+  } = props;
+  const labelId = `${id}-label`;
+  return /*#__PURE__*/jsxs("li", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$H)
+    className: classnames(className, block$C()),
+    children: [label && /*#__PURE__*/jsxs(Text, {
+      as: "p",
+      typography: "overline",
+      className: element$s('title'),
+      id: labelId,
+      children: [icon && Icon$1({
+        icon
+      }), label]
+    }), /*#__PURE__*/jsx("ul", {
+      ...itemsWrapperProps,
+      className: element$s('items'),
+      "aria-labelledby": label ? labelId : undefined,
+      children: children
+    })]
+  });
+};
+ListSection$1.displayName = COMPONENT_NAME$G;
+ListSection$1.className = CLASSNAME$H;
+ListSection$1.defaultProps = DEFAULT_PROPS$I;
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * ListSection component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ListSection = forwardRef((props, ref) => {
+  const id = useId();
+  return ListSection$1({
+    ...props,
+    ref,
+    id,
+    Text
   });
 });
-ListDivider.displayName = COMPONENT_NAME$G;
-ListDivider.className = CLASSNAME$H;
+ListSection.displayName = COMPONENT_NAME$G;
+ListSection.className = CLASSNAME$H;
+ListSection.defaultProps = DEFAULT_PROPS$I;
 
 /**
  * Component display name.
@@ -9241,6 +9476,7 @@ const CLASSNAME$G = 'lumx-list-subheader';
 
 /**
  * ListSubheader component.
+ * @deprecated ListSubheader produces improper list structure. use ListSection instead.
  *
  * @param  props Component props.
  * @param  ref   Component ref.
@@ -9384,7 +9620,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$G = {};
+const DEFAULT_PROPS$H = {};
 
 /**
  * Mosaic component.
@@ -9451,7 +9687,7 @@ const Mosaic = forwardRef((props, ref) => {
 });
 Mosaic.displayName = COMPONENT_NAME$D;
 Mosaic.className = CLASSNAME$E;
-Mosaic.defaultProps = DEFAULT_PROPS$G;
+Mosaic.defaultProps = DEFAULT_PROPS$H;
 
 const NavigationContext = /*#__PURE__*/createContext({
   orientation: Orientation$1.vertical
@@ -9568,9 +9804,6 @@ const NavigationSection = forwardRef((props, ref) => {
 NavigationSection.displayName = COMPONENT_NAME$C;
 NavigationSection.className = CLASSNAME$D;
 
-/** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
-const forwardRefPolymorphic = React__default.forwardRef;
-
 const {
   block: block$z,
   element: element$p
@@ -9652,7 +9885,7 @@ const {
 /**
  * Component default props
  */
-const DEFAULT_PROPS$F = {
+const DEFAULT_PROPS$G = {
   orientation: Orientation$1.vertical
 };
 const Navigation = forwardRef((props, ref) => {
@@ -9661,7 +9894,7 @@ const Navigation = forwardRef((props, ref) => {
     children,
     className,
     theme = defaultTheme,
-    orientation = DEFAULT_PROPS$F.orientation,
+    orientation = DEFAULT_PROPS$G.orientation,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx(ThemeProvider, {
@@ -9687,7 +9920,7 @@ const Navigation = forwardRef((props, ref) => {
 });
 Navigation.displayName = COMPONENT_NAME$B;
 Navigation.className = CLASSNAME$C;
-Navigation.defaultProps = DEFAULT_PROPS$F;
+Navigation.defaultProps = DEFAULT_PROPS$G;
 
 // Sub components
 Navigation.Section = NavigationSection;
@@ -9732,7 +9965,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$E = {
+const DEFAULT_PROPS$F = {
   zIndex: 9999,
   usePortal: true
 };
@@ -9756,8 +9989,8 @@ const Notification = forwardRef((props, ref) => {
     onClick,
     theme = defaultTheme,
     type,
-    zIndex = DEFAULT_PROPS$E.zIndex,
-    usePortal = DEFAULT_PROPS$E.usePortal,
+    zIndex = DEFAULT_PROPS$F.zIndex,
+    usePortal = DEFAULT_PROPS$F.usePortal,
     style,
     ...forwardedProps
   } = props;
@@ -9822,7 +10055,7 @@ const Notification = forwardRef((props, ref) => {
 });
 Notification.displayName = COMPONENT_NAME$A;
 Notification.className = CLASSNAME$B;
-Notification.defaultProps = DEFAULT_PROPS$E;
+Notification.defaultProps = DEFAULT_PROPS$F;
 
 /**
  * PopoverDialog props.
@@ -9842,7 +10075,7 @@ const CLASSNAME$A = 'lumx-popover-dialog';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$D = {};
+const DEFAULT_PROPS$E = {};
 
 /**
  * PopoverDialog component.
@@ -9882,7 +10115,7 @@ const PopoverDialog = forwardRef((props, ref) => {
 });
 PopoverDialog.displayName = COMPONENT_NAME$z;
 PopoverDialog.className = CLASSNAME$A;
-PopoverDialog.defaultProps = DEFAULT_PROPS$D;
+PopoverDialog.defaultProps = DEFAULT_PROPS$E;
 
 /**
  * Component display name.
@@ -9901,7 +10134,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$C = {
+const DEFAULT_PROPS$D = {
   orientation: Orientation$1.horizontal
 };
 
@@ -9921,7 +10154,7 @@ const PostBlock = forwardRef((props, ref) => {
     className,
     meta,
     onClick,
-    orientation = DEFAULT_PROPS$C.orientation,
+    orientation = DEFAULT_PROPS$D.orientation,
     tags,
     text,
     theme = defaultTheme,
@@ -9983,7 +10216,7 @@ const PostBlock = forwardRef((props, ref) => {
 });
 PostBlock.displayName = COMPONENT_NAME$y;
 PostBlock.className = CLASSNAME$z;
-PostBlock.defaultProps = DEFAULT_PROPS$C;
+PostBlock.defaultProps = DEFAULT_PROPS$D;
 
 /**
  * Component display name.
@@ -10002,7 +10235,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$B = {};
+const DEFAULT_PROPS$C = {};
 
 /**
  * ProgressLinear component.
@@ -10056,7 +10289,7 @@ const ProgressLinear = forwardRef((props, ref) => {
 });
 ProgressLinear.displayName = COMPONENT_NAME$x;
 ProgressLinear.className = CLASSNAME$y;
-ProgressLinear.defaultProps = DEFAULT_PROPS$B;
+ProgressLinear.defaultProps = DEFAULT_PROPS$C;
 
 /* eslint-disable react/no-unknown-property */
 
@@ -10077,7 +10310,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$A = {
+const DEFAULT_PROPS$B = {
   size: Size.m,
   display: 'block'
 };
@@ -10092,8 +10325,8 @@ const ProgressCircular$1 = props => {
   const {
     className,
     theme,
-    size = DEFAULT_PROPS$A.size,
-    display = DEFAULT_PROPS$A.display,
+    size = DEFAULT_PROPS$B.size,
+    display = DEFAULT_PROPS$B.display,
     ref,
     circleProps,
     svgProps,
@@ -10158,7 +10391,7 @@ const ProgressCircular = forwardRef((props, ref) => {
 });
 ProgressCircular.displayName = COMPONENT_NAME$w;
 ProgressCircular.className = CLASSNAME$x;
-ProgressCircular.defaultProps = DEFAULT_PROPS$A;
+ProgressCircular.defaultProps = DEFAULT_PROPS$B;
 
 const ProgressVariant = {
   linear: 'linear',
@@ -10185,7 +10418,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$z = {
+const DEFAULT_PROPS$A = {
   variant: ProgressVariant.circular
 };
 
@@ -10202,7 +10435,7 @@ const Progress = forwardRef((props, ref) => {
   const {
     className,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$z.variant,
+    variant = DEFAULT_PROPS$A.variant,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsxs("div", {
@@ -10221,7 +10454,7 @@ const Progress = forwardRef((props, ref) => {
 });
 Progress.displayName = COMPONENT_NAME$v;
 Progress.className = CLASSNAME$w;
-Progress.defaultProps = DEFAULT_PROPS$z;
+Progress.defaultProps = DEFAULT_PROPS$A;
 
 const INIT_STATE = {
   isLazy: true,
@@ -10348,7 +10581,7 @@ const useTabProviderContextState = () => {
   return context?.[0];
 };
 
-const DEFAULT_PROPS$y = {
+const DEFAULT_PROPS$z = {
   isLazy: INIT_STATE.isLazy,
   shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
 };
@@ -10377,7 +10610,7 @@ const ProgressTrackerProvider = props => {
     dispatch({
       type: 'update',
       payload: {
-        ...DEFAULT_PROPS$y,
+        ...DEFAULT_PROPS$z,
         ...propState,
         activeTabIndex: propState.activeStepIndex || INIT_STATE.activeTabIndex
       }
@@ -10400,7 +10633,7 @@ const ProgressTrackerProvider = props => {
     children: children
   });
 };
-ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$y;
+ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$z;
 
 const useRovingTabIndex = ({
   parentRef,
@@ -10492,7 +10725,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$x = {};
+const DEFAULT_PROPS$y = {};
 
 /**
  * ProgressTracker component.
@@ -10548,7 +10781,7 @@ const ProgressTracker = forwardRef((props, ref) => {
 });
 ProgressTracker.displayName = COMPONENT_NAME$u;
 ProgressTracker.className = CLASSNAME$v;
-ProgressTracker.defaultProps = DEFAULT_PROPS$x;
+ProgressTracker.defaultProps = DEFAULT_PROPS$y;
 
 /**
  * Component display name.
@@ -10567,7 +10800,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$w = {};
+const DEFAULT_PROPS$x = {};
 
 /**
  * ProgressTrackerStep component.
@@ -10662,7 +10895,7 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
 });
 ProgressTrackerStep.displayName = COMPONENT_NAME$t;
 ProgressTrackerStep.className = CLASSNAME$u;
-ProgressTrackerStep.defaultProps = DEFAULT_PROPS$w;
+ProgressTrackerStep.defaultProps = DEFAULT_PROPS$x;
 
 /**
  * Component display name.
@@ -10680,7 +10913,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$v = {};
+const DEFAULT_PROPS$w = {};
 
 /**
  * ProgressTrackerStepPanel component.
@@ -10716,7 +10949,7 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
 });
 ProgressTrackerStepPanel.displayName = COMPONENT_NAME$s;
 ProgressTrackerStepPanel.className = CLASSNAME$t;
-ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$v;
+ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$w;
 
 /**
  * Component display name.
@@ -10819,7 +11052,7 @@ const RadioButton$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$u = {};
+const DEFAULT_PROPS$v = {};
 
 /**
  * RadioButton component.
@@ -10875,7 +11108,7 @@ const RadioButton = forwardRef((props, ref) => {
 });
 RadioButton.displayName = COMPONENT_NAME$r;
 RadioButton.className = CLASSNAME$s;
-RadioButton.defaultProps = DEFAULT_PROPS$u;
+RadioButton.defaultProps = DEFAULT_PROPS$v;
 
 /**
  * Component display name.
@@ -10890,7 +11123,7 @@ const CLASSNAME$r = 'lumx-radio-group';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$t = {};
+const DEFAULT_PROPS$u = {};
 
 /**
  * RadioGroup component.
@@ -10914,7 +11147,7 @@ const RadioGroup$1 = props => {
 };
 RadioGroup$1.displayName = COMPONENT_NAME$q;
 RadioGroup$1.className = CLASSNAME$r;
-RadioGroup$1.defaultProps = DEFAULT_PROPS$t;
+RadioGroup$1.defaultProps = DEFAULT_PROPS$u;
 
 /**
  * Defines the props of the component.
@@ -11098,7 +11331,7 @@ const {
 } = classNames.bem(CLASSNAME$p);
 
 /** The default value of props. */
-const DEFAULT_PROPS$s = {
+const DEFAULT_PROPS$t = {
   selectedValueRender: choice => choice,
   variant: SelectVariant.input
 };
@@ -11221,7 +11454,7 @@ const Select = forwardRef((props, ref) => {
   const isEmpty$1 = isEmpty(props.value);
   const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty$1;
   return WithSelectContext(SelectField, {
-    ...DEFAULT_PROPS$s,
+    ...DEFAULT_PROPS$t,
     ...props,
     className: classNames.join(props.className, block$n({
       'has-input-clear': hasInputClear,
@@ -11233,7 +11466,7 @@ const Select = forwardRef((props, ref) => {
 });
 Select.displayName = COMPONENT_NAME$p;
 Select.className = CLASSNAME$p;
-Select.defaultProps = DEFAULT_PROPS$s;
+Select.defaultProps = DEFAULT_PROPS$t;
 Select.className = CLASSNAME$p;
 
 /** The display name of the component. */
@@ -11247,7 +11480,7 @@ const {
 } = classNames.bem(CLASSNAME$o);
 
 /** The default value of props. */
-const DEFAULT_PROPS$r = {
+const DEFAULT_PROPS$s = {
   selectedChipRender(choice, index, onClear, isDisabled, theme) {
     const onClick = event => onClear && onClear(event, choice);
     return /*#__PURE__*/jsx(Chip, {
@@ -11375,7 +11608,7 @@ const SelectMultipleField = props => {
  */
 const SelectMultiple = forwardRef((props, ref) => {
   return WithSelectContext(SelectMultipleField, {
-    ...DEFAULT_PROPS$r,
+    ...DEFAULT_PROPS$s,
     ...props,
     className: classNames.join(props.className, block$m({
       'has-multiple': !props.isEmpty
@@ -11386,7 +11619,7 @@ const SelectMultiple = forwardRef((props, ref) => {
 });
 SelectMultiple.displayName = COMPONENT_NAME$o;
 SelectMultiple.className = CLASSNAME$o;
-SelectMultiple.defaultProps = DEFAULT_PROPS$r;
+SelectMultiple.defaultProps = DEFAULT_PROPS$s;
 
 /**
  * Component display name.
@@ -11441,7 +11674,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$q = {
+const DEFAULT_PROPS$r = {
   emphasis: Emphasis$1.high,
   closeMode: 'unmount'
 };
@@ -11457,7 +11690,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
   const {
     children,
     className,
-    emphasis = DEFAULT_PROPS$q.emphasis,
+    emphasis = DEFAULT_PROPS$r.emphasis,
     icon,
     isOpen,
     isSelected,
@@ -11467,7 +11700,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
     onActionClick,
     onClick,
     toggleButtonProps,
-    closeMode = DEFAULT_PROPS$q.closeMode,
+    closeMode = DEFAULT_PROPS$r.closeMode,
     ...forwardedProps
   } = props;
   const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
@@ -11544,7 +11777,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
 });
 SideNavigationItem.displayName = COMPONENT_NAME$m;
 SideNavigationItem.className = CLASSNAME$m;
-SideNavigationItem.defaultProps = DEFAULT_PROPS$q;
+SideNavigationItem.defaultProps = DEFAULT_PROPS$r;
 
 /**
  * Component display name.
@@ -11615,7 +11848,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$p = {
+const DEFAULT_PROPS$q = {
   variant: SkeletonRectangleVariant.squared
 };
 
@@ -11631,7 +11864,7 @@ const SkeletonRectangle$1 = props => {
     className,
     height,
     theme,
-    variant = DEFAULT_PROPS$p.variant,
+    variant = DEFAULT_PROPS$q.variant,
     width,
     color,
     ref,
@@ -11706,7 +11939,7 @@ const SkeletonTypography$1 = props => {
  * Defines the props of the component.
  */
 
-const DEFAULT_PROPS$o = {};
+const DEFAULT_PROPS$p = {};
 
 /**
  * SkeletonCircle component.
@@ -11734,14 +11967,14 @@ const SkeletonCircle = forwardRef((props, ref) => {
   });
 });
 SkeletonCircle.displayName = COMPONENT_NAME$l;
-SkeletonCircle.defaultProps = DEFAULT_PROPS$o;
+SkeletonCircle.defaultProps = DEFAULT_PROPS$p;
 SkeletonCircle.className = CLASSNAME$l;
 
 /**
  * Defines the props of the component.
  */
 
-const DEFAULT_PROPS$n = DEFAULT_PROPS$p;
+const DEFAULT_PROPS$o = DEFAULT_PROPS$q;
 
 /**
  * SkeletonRectangle component.
@@ -11757,7 +11990,7 @@ const SkeletonRectangle = forwardRef((props, ref) => {
     className,
     height,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$n.variant,
+    variant = DEFAULT_PROPS$o.variant,
     width,
     color,
     ...forwardedProps
@@ -11776,13 +12009,13 @@ const SkeletonRectangle = forwardRef((props, ref) => {
 });
 SkeletonRectangle.displayName = COMPONENT_NAME$k;
 SkeletonRectangle.className = CLASSNAME$k;
-SkeletonRectangle.defaultProps = DEFAULT_PROPS$n;
+SkeletonRectangle.defaultProps = DEFAULT_PROPS$o;
 
 /**
  * Defines the props of the component.
  */
 
-const DEFAULT_PROPS$m = {};
+const DEFAULT_PROPS$n = {};
 
 /**
  * SkeletonTypography component.
@@ -11812,7 +12045,7 @@ const SkeletonTypography = forwardRef((props, ref) => {
   });
 });
 SkeletonTypography.displayName = COMPONENT_NAME$j;
-SkeletonTypography.defaultProps = DEFAULT_PROPS$m;
+SkeletonTypography.defaultProps = DEFAULT_PROPS$n;
 SkeletonTypography.className = CLASSNAME$j;
 
 const useEnhancedEffect = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
@@ -11867,7 +12100,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$l = {
+const DEFAULT_PROPS$m = {
   precision: 0,
   steps: 0
 };
@@ -11918,8 +12151,8 @@ const Slider = forwardRef((props, ref) => {
     name,
     onChange,
     onMouseDown,
-    precision = DEFAULT_PROPS$l.precision,
-    steps = DEFAULT_PROPS$l.steps,
+    precision = DEFAULT_PROPS$m.precision,
+    steps = DEFAULT_PROPS$m.steps,
     theme = defaultTheme,
     value,
     ...forwardedProps
@@ -11935,7 +12168,7 @@ const Slider = forwardRef((props, ref) => {
     const available = [0];
     const percentStep = 1 / ((max - min) / steps);
     let ptr = 0;
-    while (ptr + percentStep < 1) {
+    while (ptr + percentStep <= 1) {
       ptr += percentStep;
       available.push(ptr);
     }
@@ -12122,7 +12355,7 @@ const Slider = forwardRef((props, ref) => {
 });
 Slider.displayName = COMPONENT_NAME$i;
 Slider.className = CLASSNAME$i;
-Slider.defaultProps = DEFAULT_PROPS$l;
+Slider.defaultProps = DEFAULT_PROPS$m;
 
 /**
  * Making setInterval Declarative with React Hooks.
@@ -12500,7 +12733,7 @@ SlideshowItemGroup.className = CLASSNAME$h;
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$k = {
+const DEFAULT_PROPS$l = {
   ...DEFAULT_OPTIONS,
   slideMode: SlideMode.transformTranslate
 };
@@ -12516,19 +12749,19 @@ const Slideshow = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     activeIndex,
-    autoPlay = DEFAULT_PROPS$k.autoPlay,
+    autoPlay = DEFAULT_PROPS$l.autoPlay,
     children,
     className,
     fillHeight,
     groupBy = DEFAULT_OPTIONS.groupBy,
-    interval = DEFAULT_PROPS$k.interval,
+    interval = DEFAULT_PROPS$l.interval,
     onChange,
     slideshowControlsProps,
     theme = defaultTheme,
     id,
     slidesId,
     slideGroupLabel,
-    slideMode = DEFAULT_PROPS$k.slideMode,
+    slideMode = DEFAULT_PROPS$l.slideMode,
     ...forwardedProps
   } = props;
   // Number of slideshow items.
@@ -12550,7 +12783,7 @@ const Slideshow = forwardRef((props, ref) => {
     toggleForcePause
   } = SlideshowControls.useSlideshowControls({
     activeIndex,
-    defaultActiveIndex: DEFAULT_PROPS$k.activeIndex,
+    defaultActiveIndex: DEFAULT_PROPS$l.activeIndex,
     autoPlay: Boolean(autoPlay),
     itemsCount,
     groupBy,
@@ -12620,7 +12853,7 @@ const Slideshow = forwardRef((props, ref) => {
   });
 });
 Slideshow.displayName = 'Slideshow';
-Slideshow.defaultProps = DEFAULT_PROPS$k;
+Slideshow.defaultProps = DEFAULT_PROPS$l;
 
 /**
  * Component display name.
@@ -12729,7 +12962,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$j = {
+const DEFAULT_PROPS$k = {
   activeIndex: 0
 };
 
@@ -12743,7 +12976,7 @@ const DEFAULT_PROPS$j = {
 const InternalSlideshowControls = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
-    activeIndex = DEFAULT_PROPS$j.activeIndex,
+    activeIndex = DEFAULT_PROPS$k.activeIndex,
     className,
     nextButtonProps,
     onNextClick,
@@ -12858,7 +13091,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
 });
 InternalSlideshowControls.displayName = COMPONENT_NAME$f;
 InternalSlideshowControls.className = CLASSNAME$f;
-InternalSlideshowControls.defaultProps = DEFAULT_PROPS$j;
+InternalSlideshowControls.defaultProps = DEFAULT_PROPS$k;
 const SlideshowControls = Object.assign(InternalSlideshowControls, {
   useSlideshowControls,
   useSlideshowControlsDefaultOptions: DEFAULT_OPTIONS
@@ -12990,7 +13223,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$i = {
+const DEFAULT_PROPS$j = {
   slideMode: SlideMode.transformTranslate
 };
 
@@ -13017,7 +13250,7 @@ const Slides = forwardRef((props, ref) => {
     afterSlides,
     hasControls,
     slideGroupLabel,
-    slideMode = DEFAULT_PROPS$i.slideMode,
+    slideMode = DEFAULT_PROPS$j.slideMode,
     onChange,
     ...forwardedProps
   } = props;
@@ -13104,7 +13337,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$h = {
+const DEFAULT_PROPS$i = {
   position: 'left'
 };
 
@@ -13131,7 +13364,7 @@ const Switch$1 = props => {
     inputProps = {},
     isDisabled,
     inputId,
-    position = DEFAULT_PROPS$h.position,
+    position = DEFAULT_PROPS$i.position,
     ...forwardedProps
   } = props;
   const handleOnChange = event => {
@@ -13199,7 +13432,7 @@ const Switch$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$g = {
+const DEFAULT_PROPS$h = {
   position: Alignment.left
 };
 
@@ -13227,7 +13460,7 @@ const Switch = forwardRef((props, ref) => {
     isChecked = checked,
     name,
     onChange,
-    position = DEFAULT_PROPS$g.position,
+    position = DEFAULT_PROPS$h.position,
     theme = defaultTheme,
     value,
     inputProps = {},
@@ -13260,7 +13493,7 @@ const Switch = forwardRef((props, ref) => {
 });
 Switch.displayName = COMPONENT_NAME$d;
 Switch.className = CLASSNAME$d;
-Switch.defaultProps = DEFAULT_PROPS$g;
+Switch.defaultProps = DEFAULT_PROPS$h;
 
 /**
  * Component display name.
@@ -13283,7 +13516,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$f = {};
+const DEFAULT_PROPS$g = {};
 
 /**
  * Table component.
@@ -13340,7 +13573,7 @@ const Table = forwardRef((props, ref) => {
 });
 Table.displayName = COMPONENT_NAME$c;
 Table.className = CLASSNAME$c;
-Table.defaultProps = DEFAULT_PROPS$f;
+Table.defaultProps = DEFAULT_PROPS$g;
 
 /**
  * Component display name.
@@ -13430,7 +13663,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$e = {
+const DEFAULT_PROPS$f = {
   variant: TableCellVariant.body
 };
 
@@ -13449,7 +13682,7 @@ const TableCell$1 = props => {
     handleClick,
     ref,
     sortOrder,
-    variant = DEFAULT_PROPS$e.variant,
+    variant = DEFAULT_PROPS$f.variant,
     ...forwardedProps
   } = props;
 
@@ -13535,7 +13768,7 @@ const TableCell = forwardRef((props, ref) => {
 });
 TableCell.displayName = COMPONENT_NAME$a;
 TableCell.className = CLASSNAME$a;
-TableCell.defaultProps = DEFAULT_PROPS$e;
+TableCell.defaultProps = DEFAULT_PROPS$f;
 
 /**
  * Component display name.
@@ -13550,7 +13783,7 @@ const CLASSNAME$9 = `${CLASSNAME$c}__header`;
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$d = {};
+const DEFAULT_PROPS$e = {};
 
 /**
  * TableHeader component.
@@ -13597,7 +13830,7 @@ const TableHeader = forwardRef((props, ref) => {
 });
 TableHeader.displayName = COMPONENT_NAME$9;
 TableHeader.className = CLASSNAME$9;
-TableHeader.defaultProps = DEFAULT_PROPS$d;
+TableHeader.defaultProps = DEFAULT_PROPS$e;
 
 /**
  * Component display name.
@@ -13615,7 +13848,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$c = {};
+const DEFAULT_PROPS$d = {};
 
 /**
  * TableRow component.
@@ -13687,9 +13920,9 @@ const TableRow = forwardRef((props, ref) => {
 });
 TableRow.displayName = COMPONENT_NAME$8;
 TableRow.className = CLASSNAME$8;
-TableRow.defaultProps = DEFAULT_PROPS$c;
+TableRow.defaultProps = DEFAULT_PROPS$d;
 
-const DEFAULT_PROPS$b = {
+const DEFAULT_PROPS$c = {
   isLazy: INIT_STATE.isLazy,
   shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
 };
@@ -13716,7 +13949,7 @@ const TabProvider = props => {
     dispatch({
       type: 'update',
       payload: {
-        ...DEFAULT_PROPS$b,
+        ...DEFAULT_PROPS$c,
         ...propState
       }
     });
@@ -13745,7 +13978,7 @@ const TabProvider = props => {
     children: children
   });
 };
-TabProvider.defaultProps = DEFAULT_PROPS$b;
+TabProvider.defaultProps = DEFAULT_PROPS$c;
 
 /**
  * Component default class name and class prefix.
@@ -13774,7 +14007,7 @@ const COMPONENT_NAME$7 = 'TabList';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$a = {
+const DEFAULT_PROPS$b = {
   layout: TabListLayout.fixed,
   position: Alignment.left
 };
@@ -13794,8 +14027,8 @@ const TabList = forwardRef((props, ref) => {
     'aria-label': ariaLabel,
     children,
     className,
-    layout = DEFAULT_PROPS$a.layout,
-    position = DEFAULT_PROPS$a.position,
+    layout = DEFAULT_PROPS$b.layout,
+    position = DEFAULT_PROPS$b.position,
     theme = defaultTheme,
     ...forwardedProps
   } = props;
@@ -13824,7 +14057,7 @@ const TabList = forwardRef((props, ref) => {
 });
 TabList.displayName = COMPONENT_NAME$7;
 TabList.className = TABS_CLASSNAME;
-TabList.defaultProps = DEFAULT_PROPS$a;
+TabList.defaultProps = DEFAULT_PROPS$b;
 
 /**
  * Component display name.
@@ -13842,7 +14075,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$9 = {};
+const DEFAULT_PROPS$a = {};
 
 /**
  * Tab component.
@@ -13921,7 +14154,7 @@ const Tab = forwardRef((props, ref) => {
 });
 Tab.displayName = COMPONENT_NAME$6;
 Tab.className = CLASSNAME$7;
-Tab.defaultProps = DEFAULT_PROPS$9;
+Tab.defaultProps = DEFAULT_PROPS$a;
 
 /**
  * Component display name.
@@ -13939,7 +14172,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$8 = {};
+const DEFAULT_PROPS$9 = {};
 
 /**
  * TabPanel component.
@@ -13975,7 +14208,7 @@ const TabPanel = forwardRef((props, ref) => {
 });
 TabPanel.displayName = COMPONENT_NAME$5;
 TabPanel.className = CLASSNAME$6;
-TabPanel.defaultProps = DEFAULT_PROPS$8;
+TabPanel.defaultProps = DEFAULT_PROPS$9;
 
 /**
  * Component display name.
@@ -13994,7 +14227,7 @@ const INPUT_NATIVE_CLASSNAME = `${CLASSNAME$5}__input-native`;
 
 const {
   block: block$7
-} = classNames.bem(INPUT_NATIVE_CLASSNAME);
+} = bem(INPUT_NATIVE_CLASSNAME);
 
 /**
  * Defines the props of the component.
@@ -14003,7 +14236,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$7 = {
+const DEFAULT_PROPS$8 = {
   type: 'text'
 };
 
@@ -14011,35 +14244,100 @@ const DEFAULT_PROPS$7 = {
  * Raw input text component
  * (input element without any decoration)
  */
-const RawInputText = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
+const RawInputText$1 = props => {
   const {
     className,
-    theme = defaultTheme,
+    theme,
     value,
-    onChange,
-    type = DEFAULT_PROPS$7.type,
+    handleChange,
+    type = DEFAULT_PROPS$8.type,
     name,
+    ref,
     ...forwardedProps
   } = props;
-  const textareaRef = useRef(null);
-  const handleChange = useCallback(evt => {
-    onChange?.(evt.target.value, name, evt);
-  }, [onChange, name]);
+  const handleOnChange = evt => {
+    handleChange?.(evt.target.value, name, evt);
+  };
   return /*#__PURE__*/jsx("input", {
     ...forwardedProps,
     name: name,
     type: type,
-    ref: useMergeRefs(ref, textareaRef),
-    className: classNames.join(className, block$7({
+    ref: ref,
+    className: classnames(className, block$7({
       [`theme-${theme}`]: Boolean(theme),
       text: true
     })),
-    onChange: handleChange,
+    onChange: handleOnChange,
     value: value
   });
+};
+
+/**
+ * Raw input text component
+ * (input element without any decoration)
+ */
+const RawInputText = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    theme = defaultTheme,
+    onChange,
+    ...restOfProps
+  } = props;
+  return RawInputText$1({
+    ...restOfProps,
+    ref,
+    theme,
+    handleChange: onChange
+  });
 });
 
+const {
+  block: block$6
+} = bem(INPUT_NATIVE_CLASSNAME);
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$7 = {
+  rows: 2
+};
+
+/**
+ * Raw input textarea component
+ * (textarea element without any decoration)
+ */
+const RawInputTextarea$1 = props => {
+  const {
+    className,
+    theme,
+    value,
+    handleChange,
+    rows = DEFAULT_PROPS$7.rows,
+    name,
+    ref,
+    ...forwardedProps
+  } = props;
+  const handleOnChange = evt => {
+    handleChange?.(evt.target.value, name, evt);
+  };
+  return /*#__PURE__*/jsx("textarea", {
+    ...forwardedProps,
+    name: name,
+    ref: ref,
+    className: classnames(className, block$6({
+      [`theme-${theme}`]: Boolean(theme),
+      textarea: true
+    })),
+    onChange: handleOnChange,
+    value: value,
+    rows: rows
+  });
+};
+
 /**
  * Fit textarea rows to its content
  */
@@ -14081,10 +14379,6 @@ function useFitRowsToContent(minimumRows, textareaRef, value) {
   return rows;
 }
 
-const {
-  block: block$6
-} = classNames.bem(INPUT_NATIVE_CLASSNAME);
-
 /**
  * Defines the props of the component.
  */
@@ -14093,7 +14387,7 @@ const {
  * Component default props.
  */
 const DEFAULT_PROPS$6 = {
-  minimumRows: 2
+  minimumRows: DEFAULT_PROPS$7.rows
 };
 
 /**
@@ -14103,30 +14397,21 @@ const DEFAULT_PROPS$6 = {
 const RawInputTextarea = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
-    className,
     theme = defaultTheme,
     minimumRows = DEFAULT_PROPS$6.minimumRows,
     value,
-    name,
     onChange,
-    ...forwardedProps
+    ...restOfProps
   } = props;
   const textareaRef = useRef(null);
   const rows = useFitRowsToContent(minimumRows, textareaRef, value);
-  const handleChange = useCallback(evt => {
-    onChange?.(evt.target.value, name, evt);
-  }, [onChange, name]);
-  return /*#__PURE__*/jsx("textarea", {
-    ...forwardedProps,
-    name: name,
-    className: classNames.join(className, block$6({
-      [`theme-${theme}`]: Boolean(theme),
-      textarea: true
-    })),
+  return RawInputTextarea$1({
+    ...restOfProps,
     ref: useMergeRefs(ref, textareaRef),
-    onChange: handleChange,
-    value: value,
-    rows: rows
+    theme,
+    value,
+    rows,
+    handleChange: onChange
   });
 });
 
@@ -15578,5 +15863,5 @@ UserBlock.displayName = COMPONENT_NAME;
 UserBlock.className = CLASSNAME;
 UserBlock.defaultProps = DEFAULT_PROPS;
 
-export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1d as CLASSNAME, COMPONENT_NAME$1d as COMPONENT_NAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$15 as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
+export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1f as CLASSNAME, COMPONENT_NAME$1f as COMPONENT_NAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$18 as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSection, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
 //# sourceMappingURL=index.js.map