@lumx/react 4.2.1-alpha.9 → 4.3.0

package/index.js

@@ -47,6 +47,7 @@ import take from 'lodash/take';
 import { mdiRadioboxBlank } from '@lumx/icons/esm/radiobox-blank';
 import { mdiRadioboxMarked } from '@lumx/icons/esm/radiobox-marked';
 import { mdiMenuDown } from '@lumx/icons/esm/menu-down';
+import { getWithSelector } from '@lumx/core/js/utils/selectors/getWithSelector';
 import { mdiArrowDown } from '@lumx/icons/esm/arrow-down';
 import { mdiArrowUp } from '@lumx/icons/esm/arrow-up';
 import set from 'lodash/set';
@@ -100,10 +101,10 @@ const COMPONENT_NAME$1k = 'AlertDialog';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1i = 'lumx-alert-dialog';
+const CLASSNAME$1j = 'lumx-alert-dialog';
 const {
-  block: block$13
-} = classNames.bem(CLASSNAME$1i);
+  block: block$14
+} = classNames.bem(CLASSNAME$1j);
 
 /**
  * Component default props.
@@ -171,7 +172,7 @@ const AlertDialog = forwardRef((props, ref) => {
       'aria-describedby': descriptionId,
       ...dialogProps
     },
-    className: classNames.join(className, block$13({
+    className: classNames.join(className, block$14({
       [`kind-${kind}`]: Boolean(kind)
     })),
     ...forwardedProps,
@@ -217,7 +218,7 @@ const AlertDialog = forwardRef((props, ref) => {
   });
 });
 AlertDialog.displayName = COMPONENT_NAME$1k;
-AlertDialog.className = CLASSNAME$1i;
+AlertDialog.className = CLASSNAME$1j;
 AlertDialog.defaultProps = DEFAULT_PROPS$16;
 
 /**
@@ -315,7 +316,7 @@ const COMPONENT_NAME$1j = 'Autocomplete';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1h = 'lumx-autocomplete';
+const CLASSNAME$1i = 'lumx-autocomplete';
 
 /**
  * Component default props.
@@ -382,7 +383,7 @@ const Autocomplete = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$1h),
+    className: classNames.join(className, CLASSNAME$1i),
     children: [/*#__PURE__*/jsx(TextField, {
       ...textFieldProps,
       chips: chips,
@@ -423,7 +424,7 @@ const Autocomplete = forwardRef((props, ref) => {
   });
 });
 Autocomplete.displayName = COMPONENT_NAME$1j;
-Autocomplete.className = CLASSNAME$1h;
+Autocomplete.className = CLASSNAME$1i;
 Autocomplete.defaultProps = DEFAULT_PROPS$15;
 
 /**
@@ -434,7 +435,7 @@ const COMPONENT_NAME$1i = 'AutocompleteMultiple';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1g = 'lumx-autocomplete-multiple';
+const CLASSNAME$1h = 'lumx-autocomplete-multiple';
 
 /**
  * Component default props.
@@ -514,7 +515,7 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     ref: ref,
     ...forwardedProps,
     anchorToInput: anchorToInput,
-    className: classNames.join(className, CLASSNAME$1g),
+    className: classNames.join(className, CLASSNAME$1h),
     name: name,
     value: value,
     onChange: onChange,
@@ -548,7 +549,7 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
   });
 });
 AutocompleteMultiple.displayName = COMPONENT_NAME$1i;
-AutocompleteMultiple.className = CLASSNAME$1g;
+AutocompleteMultiple.className = CLASSNAME$1h;
 AutocompleteMultiple.defaultProps = DEFAULT_PROPS$14;
 
 /**
@@ -559,11 +560,11 @@ const COMPONENT_NAME$1h = 'Avatar';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1f = 'lumx-avatar';
+const CLASSNAME$1g = 'lumx-avatar';
 const {
-  block: block$12,
-  element: element$M
-} = classNames.bem(CLASSNAME$1f);
+  block: block$13,
+  element: element$N
+} = classNames.bem(CLASSNAME$1g);
 
 /**
  * Component default props.
@@ -599,14 +600,14 @@ const Avatar = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$12({
+    className: classNames.join(className, block$13({
       [`size-${size}`]: Boolean(size),
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsx(Thumbnail, {
       linkProps: linkProps,
       linkAs: linkAs,
-      className: element$M('thumbnail'),
+      className: element$N('thumbnail'),
       onClick: onClick,
       onKeyPress: onKeyPress,
       ...thumbnailProps,
@@ -616,16 +617,16 @@ const Avatar = forwardRef((props, ref) => {
       alt: alt,
       theme: theme
     }), 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
     })]
   });
 });
 Avatar.displayName = COMPONENT_NAME$1h;
-Avatar.className = CLASSNAME$1f;
+Avatar.className = CLASSNAME$1g;
 Avatar.defaultProps = DEFAULT_PROPS$13;
 
 /**
@@ -636,10 +637,10 @@ const COMPONENT_NAME$1g = 'Badge';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1e = 'lumx-badge';
+const CLASSNAME$1f = 'lumx-badge';
 const {
-  block: block$11
-} = classNames.bem(CLASSNAME$1e);
+  block: block$12
+} = classNames.bem(CLASSNAME$1f);
 
 /**
  * Component default props.
@@ -665,24 +666,24 @@ const Badge = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$11({
+    className: classNames.join(className, block$12({
       [`color-${color}`]: Boolean(color)
     })),
     children: children
   });
 });
 Badge.displayName = COMPONENT_NAME$1g;
-Badge.className = CLASSNAME$1e;
+Badge.className = CLASSNAME$1f;
 Badge.defaultProps = DEFAULT_PROPS$12;
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1d = 'lumx-badge-wrapper';
+const CLASSNAME$1e = 'lumx-badge-wrapper';
 const {
-  block: block$10,
-  element: element$L
-} = classNames.bem(CLASSNAME$1d);
+  block: block$11,
+  element: element$M
+} = classNames.bem(CLASSNAME$1e);
 const BadgeWrapper = forwardRef((props, ref) => {
   const {
     badge,
@@ -693,15 +694,15 @@ const BadgeWrapper = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$10()),
+    className: classNames.join(className, block$11()),
     children: [children, badge && /*#__PURE__*/jsx("div", {
-      className: element$L('badge'),
+      className: element$M('badge'),
       children: badge
     })]
   });
 });
 BadgeWrapper.displayName = 'BadgeWrapper';
-BadgeWrapper.className = CLASSNAME$1d;
+BadgeWrapper.className = CLASSNAME$1e;
 
 /**
  * Alignments.
@@ -925,7 +926,7 @@ function modifier$1(baseName, modifiers) {
  * block('button', { active: true, disabled: false }); // 'button button--active'
  */
 
-function block$$(baseName, modifiersOrAdditionalClasses, additionalClasses) {
+function block$10(baseName, modifiersOrAdditionalClasses, additionalClasses) {
   let modifiers;
   let classes;
   if (Array.isArray(modifiersOrAdditionalClasses)) {
@@ -960,11 +961,11 @@ function block$$(baseName, modifiersOrAdditionalClasses, additionalClasses) {
  * element('my-button', 'icon', { active: true }); // 'my-button__icon my-button__icon--active'
  */
 
-function element$K(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
+function element$L(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
   if (Array.isArray(modifiersOrAdditionalClasses)) {
-    return block$$(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
+    return block$10(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
   }
-  return block$$(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
+  return block$10(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
 }
 
 /**
@@ -973,15 +974,15 @@ function element$K(baseClass, elem, modifiersOrAdditionalClasses, additionalClas
 function bem(baseName) {
   function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return block$$(baseName, modifiersOrAdditionalClasses);
+      return block$10(baseName, modifiersOrAdditionalClasses);
     }
-    return block$$(baseName, modifiersOrAdditionalClasses, additionalClasses);
+    return block$10(baseName, modifiersOrAdditionalClasses, additionalClasses);
   }
   function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return element$K(baseName, elem, modifiersOrAdditionalClasses);
+      return element$L(baseName, elem, modifiersOrAdditionalClasses);
     }
-    return element$K(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
+    return element$L(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
   }
   return {
     block: blockFn,
@@ -1018,9 +1019,9 @@ const RawClickable$1 = props => {
     };
   }
   return /*#__PURE__*/jsx(Component, {
+    "aria-disabled": isAnyDisabled || undefined,
     ...forwardedProps,
     ...clickableProps,
-    "aria-disabled": isAnyDisabled || undefined,
     onClick: event => {
       if (isAnyDisabled) {
         event.stopPropagation();
@@ -1149,10 +1150,10 @@ const COMPONENT_NAME$1e = 'Button';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1c = 'lumx-button';
+const CLASSNAME$1d = 'lumx-button';
 const {
   modifier
-} = bem(CLASSNAME$1c);
+} = bem(CLASSNAME$1d);
 
 /**
  * Component default props.
@@ -1190,7 +1191,7 @@ const Button$1 = props => {
   });
 };
 Button$1.displayName = COMPONENT_NAME$1e;
-Button$1.className = CLASSNAME$1c;
+Button$1.className = CLASSNAME$1d;
 Button$1.defaultProps = DEFAULT_PROPS$11;
 
 /**
@@ -1258,7 +1259,7 @@ const Button = forwardRef((props, ref) => {
   });
 });
 Button.displayName = COMPONENT_NAME$1e;
-Button.className = CLASSNAME$1c;
+Button.className = CLASSNAME$1d;
 Button.defaultProps = DEFAULT_PROPS$11;
 
 const COMPONENT_NAME$1d = 'Icon';
@@ -1268,10 +1269,10 @@ const IconClassName = 'lumx-icon';
  * Defines the props of the component.
  */
 
-const CLASSNAME$1b = IconClassName;
+const CLASSNAME$1c = IconClassName;
 const {
-  block: block$_
-} = bem(CLASSNAME$1b);
+  block: block$$
+} = bem(CLASSNAME$1c);
 
 /**
  * Component default props.
@@ -1325,7 +1326,7 @@ const Icon$1 = props => {
   return /*#__PURE__*/jsx("i", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$_({
+    className: classnames(className, block$$({
       [`color-${iconColor}`]: Boolean(iconColor),
       [`color-variant-${iconColorVariant}`]: Boolean(iconColorVariant),
       'has-shape': hasShape,
@@ -1355,7 +1356,7 @@ const Icon$1 = props => {
   });
 };
 Icon$1.displayName = COMPONENT_NAME$1d;
-Icon$1.className = CLASSNAME$1b;
+Icon$1.className = CLASSNAME$1c;
 Icon$1.defaultProps = DEFAULT_PROPS$10;
 
 /**
@@ -1366,7 +1367,7 @@ const COMPONENT_NAME$1c = 'IconButton';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1a = 'lumx-icon-button';
+const CLASSNAME$1b = 'lumx-icon-button';
 
 /**
  * Component default props.
@@ -1408,7 +1409,7 @@ const IconButton$1 = props => {
   });
 };
 IconButton$1.displayName = COMPONENT_NAME$1c;
-IconButton$1.className = CLASSNAME$1a;
+IconButton$1.className = CLASSNAME$1b;
 IconButton$1.defaultProps = DEFAULT_PROPS$$;
 
 /**
@@ -1445,7 +1446,7 @@ const IconButton = forwardRef((props, ref) => {
   });
 });
 IconButton.displayName = COMPONENT_NAME$1c;
-IconButton.className = CLASSNAME$1a;
+IconButton.className = CLASSNAME$1b;
 IconButton.defaultProps = DEFAULT_PROPS$$;
 
 /**
@@ -1456,7 +1457,7 @@ const COMPONENT_NAME$1b = 'ButtonGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$19 = 'lumx-button-group';
+const CLASSNAME$1a = 'lumx-button-group';
 
 /**
  * Component default props.
@@ -1477,12 +1478,12 @@ const ButtonGroup$1 = props => {
   } = props;
   return /*#__PURE__*/jsx("div", {
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$19),
+    className: classnames(className, CLASSNAME$1a),
     children: children
   });
 };
 ButtonGroup$1.displayName = COMPONENT_NAME$1b;
-ButtonGroup$1.className = CLASSNAME$19;
+ButtonGroup$1.className = CLASSNAME$1a;
 ButtonGroup$1.defaultProps = DEFAULT_PROPS$_;
 
 /**
@@ -1499,9 +1500,107 @@ const ButtonGroup = forwardRef((props, ref) => {
   });
 });
 ButtonGroup.displayName = COMPONENT_NAME$1b;
-ButtonGroup.className = CLASSNAME$19;
+ButtonGroup.className = CLASSNAME$1a;
 ButtonGroup.defaultProps = DEFAULT_PROPS$_;
 
+const COMPONENT_NAME$1a = 'InputLabel';
+const InputLabelClassName = 'lumx-input-label';
+const CLASSNAME$19 = InputLabelClassName;
+const {
+  block: block$_
+} = bem(CLASSNAME$19);
+const DEFAULT_PROPS$Z = {};
+
+/**
+ * InputLabel component.
+ */
+function InputLabel$1(props) {
+  const {
+    children,
+    className,
+    htmlFor,
+    isRequired,
+    theme,
+    typography: typography$1,
+    ref,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("label", {
+    ref: ref,
+    ...forwardedProps,
+    htmlFor: htmlFor,
+    className: classnames(className, block$_({
+      'is-required': isRequired,
+      [`theme-${theme}`]: Boolean(theme),
+      'has-custom-typography': Boolean(typography$1)
+    }), typography$1 && typography(typography$1)),
+    children: children
+  });
+}
+InputLabel$1.displayName = COMPONENT_NAME$1a;
+InputLabel$1.className = CLASSNAME$19;
+InputLabel$1.defaultProps = DEFAULT_PROPS$Z;
+
+const INPUT_HELPER_CONFIGURATION = {
+  [Kind.error]: {
+    color: 'red'
+  },
+  [Kind.success]: {
+    color: 'green'
+  },
+  [Kind.warning]: {
+    color: 'yellow'
+  }
+};
+
+const COMPONENT_NAME$19 = 'InputHelper';
+const InputHelperClassName = 'lumx-input-helper';
+
+/**
+ * Defines the props of the component.
+ */
+
+const CLASSNAME$18 = InputHelperClassName;
+const {
+  block: block$Z
+} = bem(CLASSNAME$18);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$Y = {
+  kind: Kind.info
+};
+
+/**
+ * InputHelper component.
+ */
+function InputHelper$1(props) {
+  const {
+    children,
+    className,
+    kind = DEFAULT_PROPS$Y.kind,
+    theme,
+    ref,
+    ...forwardedProps
+  } = props;
+  const {
+    color
+  } = INPUT_HELPER_CONFIGURATION[kind] || {};
+  return /*#__PURE__*/jsx("p", {
+    ref: ref,
+    ...forwardedProps,
+    className: classnames(className, block$Z({
+      [`color-${color}`]: Boolean(color),
+      [`theme-${theme}`]: Boolean(theme)
+    })),
+    children: children
+  });
+}
+InputHelper$1.displayName = COMPONENT_NAME$19;
+InputHelper$1.className = CLASSNAME$18;
+InputHelper$1.defaultProps = DEFAULT_PROPS$Y;
+
 const INTERMEDIATE_STATE = 'intermediate';
 
 /**
@@ -1511,36 +1610,24 @@ const INTERMEDIATE_STATE = 'intermediate';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1a = 'Checkbox';
+const COMPONENT_NAME$18 = 'Checkbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$18 = 'lumx-checkbox';
+const CLASSNAME$17 = 'lumx-checkbox';
 const {
-  block: block$Z,
-  element: element$J
-} = classNames.bem(CLASSNAME$18);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$Z = {};
+  block: block$Y,
+  element: element$K
+} = bem(CLASSNAME$17);
 
 /**
  * Checkbox component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return JSX element.
  */
-const Checkbox = forwardRef((props, ref) => {
-  const {
-    isAnyDisabled,
-    disabledStateProps,
-    otherProps
-  } = useDisableStateProps(props);
-  const defaultTheme = useTheme() || Theme$1.light;
+const Checkbox$1 = props => {
   const {
     checked,
     className,
@@ -1550,81 +1637,146 @@ const Checkbox = forwardRef((props, ref) => {
     isChecked = checked,
     label,
     name,
+    ref,
     onChange,
-    theme = defaultTheme,
+    theme,
     value,
     inputProps = {},
+    isDisabled,
+    inputId,
     ...forwardedProps
-  } = otherProps;
-  const localInputRef = React__default.useRef(null);
-  const generatedInputId = useId();
-  const inputId = id || generatedInputId;
+  } = props;
+  const intermediateState = isChecked === INTERMEDIATE_STATE;
   const handleChange = event => {
     if (onChange) {
       onChange(!isChecked, value, name, event);
     }
   };
-  const intermediateState = isChecked === INTERMEDIATE_STATE;
-  React__default.useEffect(() => {
-    const input = localInputRef.current;
-    if (input) input.indeterminate = intermediateState;
-  }, [intermediateState]);
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$Z({
+    className: classnames(className, block$Y({
       // Whether state is intermediate class name will "-checked"
       'is-checked': intermediateState ? true : isChecked,
-      'is-disabled': isAnyDisabled,
+      'is-disabled': isDisabled,
       'is-unchecked': !isChecked,
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsxs("div", {
-      className: element$J('input-wrapper'),
+      className: element$K('input-wrapper'),
       children: [/*#__PURE__*/jsx("input", {
-        ref: useMergeRefs(inputRef, localInputRef),
+        ref: inputRef,
         type: "checkbox",
         id: inputId,
-        className: element$J('input-native'),
-        ...disabledStateProps,
+        className: element$K('input-native'),
         name: name,
         value: value,
         checked: isChecked,
         onChange: handleChange,
         "aria-describedby": helper ? `${inputId}-helper` : undefined,
         "aria-checked": intermediateState ? 'mixed' : Boolean(isChecked),
-        readOnly: inputProps.readOnly || disabledStateProps['aria-disabled'],
+        ...(inputProps?.readOnly ? {
+          readOnly: inputProps.readOnly
+        } : {}),
         ...inputProps
       }), /*#__PURE__*/jsxs("div", {
-        className: element$J('input-placeholder'),
+        className: element$K('input-placeholder'),
         children: [/*#__PURE__*/jsx("div", {
-          className: element$J('input-background')
+          className: element$K('input-background')
         }), /*#__PURE__*/jsx("div", {
-          className: element$J('input-indicator'),
-          children: /*#__PURE__*/jsx(Icon, {
+          className: element$K('input-indicator'),
+          children: Icon$1({
             icon: intermediateState ? mdiMinus : mdiCheck
           })
         })]
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: element$J('content'),
-      children: [label && /*#__PURE__*/jsx(InputLabel, {
+      className: element$K('content'),
+      children: [label && InputLabel$1({
         htmlFor: inputId,
-        className: element$J('label'),
-        theme: theme,
+        className: element$K('label'),
+        theme,
         children: label
-      }), helper && /*#__PURE__*/jsx(InputHelper, {
+      }), helper && InputHelper$1({
         id: `${inputId}-helper`,
-        className: element$J('helper'),
-        theme: theme,
+        className: element$K('helper'),
+        theme,
         children: helper
       })]
     })]
   });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$X = {};
+
+/**
+ * Checkbox component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Checkbox = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    checked,
+    className,
+    helper,
+    id,
+    inputRef,
+    isChecked = checked,
+    label,
+    name,
+    onChange,
+    theme = defaultTheme,
+    value,
+    inputProps = {},
+    ...forwardedProps
+  } = otherProps;
+  const localInputRef = React__default.useRef(null);
+  const generatedInputId = useId();
+  const inputId = id || generatedInputId;
+  const intermediateState = isChecked === INTERMEDIATE_STATE;
+  React__default.useEffect(() => {
+    const input = localInputRef.current;
+    if (input) input.indeterminate = intermediateState;
+  }, [intermediateState]);
+  return Checkbox$1({
+    ref,
+    className,
+    helper,
+    inputRef: useMergeRefs(inputRef, localInputRef),
+    isChecked,
+    label,
+    name,
+    onChange,
+    theme,
+    value,
+    inputProps: {
+      ...inputProps,
+      ...disabledStateProps,
+      readOnly: inputProps.readOnly || disabledStateProps['aria-disabled']
+    },
+    ...forwardedProps,
+    isDisabled: isAnyDisabled,
+    inputId
+  });
 });
-Checkbox.displayName = COMPONENT_NAME$1a;
-Checkbox.className = CLASSNAME$18;
-Checkbox.defaultProps = DEFAULT_PROPS$Z;
+Checkbox.displayName = COMPONENT_NAME$18;
+Checkbox.className = CLASSNAME$17;
+Checkbox.defaultProps = DEFAULT_PROPS$X;
 
 /**
  * Wrap mouse event handler to stop event propagation.
@@ -1645,21 +1797,21 @@ function useStopPropagation(handler) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$19 = 'Chip';
+const COMPONENT_NAME$17 = 'Chip';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$17 = 'lumx-chip';
+const CLASSNAME$16 = 'lumx-chip';
 const {
-  block: block$Y,
-  element: element$I
-} = classNames.bem(CLASSNAME$17);
+  block: block$X,
+  element: element$J
+} = classNames.bem(CLASSNAME$16);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Y = {
+const DEFAULT_PROPS$W = {
   size: Size$1.m
 };
 
@@ -1689,7 +1841,7 @@ const Chip = forwardRef((props, ref) => {
     onAfterClick,
     onBeforeClick,
     onClick,
-    size = DEFAULT_PROPS$Y.size,
+    size = DEFAULT_PROPS$W.size,
     theme = defaultTheme,
     href,
     onKeyDown,
@@ -1720,7 +1872,7 @@ const Chip = forwardRef((props, ref) => {
       ...forwardedProps,
       href: !disabledStateProps.disabled ? href : undefined,
       ref: ref,
-      className: classNames.join(className, block$Y({
+      className: classNames.join(className, block$X({
         'is-clickable': isClickable,
         [`color-${chipColor}`]: Boolean(chipColor),
         'is-disabled': isAnyDisabled,
@@ -1738,19 +1890,19 @@ const Chip = forwardRef((props, ref) => {
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
       jsx("div", {
-        className: element$I('before', {
+        className: element$J('before', {
           'is-clickable': hasBeforeClick
         }),
         onClick: handleOnBeforeClick,
         children: before
       }), /*#__PURE__*/jsx("div", {
-        className: element$I('label'),
+        className: element$J('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$I('after', {
+        className: element$J('after', {
           'is-clickable': hasAfterClick
         }),
         onClick: handleOnAfterClick,
@@ -1759,9 +1911,9 @@ const Chip = forwardRef((props, ref) => {
     })
   );
 });
-Chip.displayName = COMPONENT_NAME$19;
-Chip.className = CLASSNAME$17;
-Chip.defaultProps = DEFAULT_PROPS$Y;
+Chip.displayName = COMPONENT_NAME$17;
+Chip.className = CLASSNAME$16;
+Chip.defaultProps = DEFAULT_PROPS$W;
 
 const INITIAL_STATE_ACTIVE_CHIP = -1;
 
@@ -1817,17 +1969,17 @@ const useChipGroupNavigation = (chips, onChipDeleted, initialActiveChip = INITIA
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$X = {};
+const DEFAULT_PROPS$V = {};
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$18 = 'ChipGroup';
+const COMPONENT_NAME$16 = 'ChipGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$16 = 'lumx-chip-group';
+const CLASSNAME$15 = 'lumx-chip-group';
 
 /**
  * ChipGroup component.
@@ -1846,17 +1998,195 @@ const InternalChipGroup = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$16),
+    className: classNames.join(className, CLASSNAME$15),
     children: children
   });
 });
-InternalChipGroup.displayName = COMPONENT_NAME$18;
-InternalChipGroup.className = CLASSNAME$16;
-InternalChipGroup.defaultProps = DEFAULT_PROPS$X;
+InternalChipGroup.displayName = COMPONENT_NAME$16;
+InternalChipGroup.className = CLASSNAME$15;
+InternalChipGroup.defaultProps = DEFAULT_PROPS$V;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
 });
 
+/**
+ * Similar to `isComponent` but more precise as it's not based on the component `displayName` but on the component function reference.
+ */
+const isComponentType = type => node => /*#__PURE__*/React__default.isValidElement(node) && node.type === type;
+
+/**
+ * Hook that enables keyboard navigation from an input field to chips.
+ * When the user presses Backspace at the start of the input field (cursor at position 0),
+ * it automatically focuses the last enabled chip in the list.
+ *
+ * @param chipRefs - Reference to an array of chip element refs
+ * @param inputRef - Reference to the input element (optional)
+ * @returns An object containing the `findPreviousEnabledChip` helper function
+ *
+ * @example
+ * ```tsx
+ * const chipRefs = useRef<React.RefObject<HTMLElement>[]>([]);
+ * const inputRef = useRef<HTMLInputElement>(null);
+ * const { findPreviousEnabledChip } = useFocusLastChipOnBackspace(chipRefs, inputRef);
+ * ```
+ */
+function useFocusLastChipOnBackspace(chipRefs, inputRef) {
+  /**
+   * Finds the previous enabled chip starting from a given index.
+   * Skips chips with `aria-disabled="true"`.
+   *
+   * @param startIndex - The index to start searching from (defaults to last chip)
+   * @returns The enabled chip element or undefined if none found
+   */
+  const findPreviousEnabledChip = React__default.useCallback((startIndex = null) => {
+    const {
+      current: chips
+    } = chipRefs;
+    if (!chips) {
+      return undefined;
+    }
+    // Iterate backwards from startIndex (or last chip) to find an enabled chip
+    for (let i = startIndex ?? chips.length - 1; i >= 0; i--) {
+      const chip = chips[i]?.current;
+      // Check if chip exists and is not disabled
+      if (chip && chip?.getAttribute('aria-disabled') !== 'true') {
+        return chip;
+      }
+    }
+    return undefined;
+  }, [chipRefs]);
+  React__default.useEffect(() => {
+    const input = inputRef?.current;
+    if (!input) {
+      return undefined;
+    }
+    const onKeyDown = evt => {
+      const backspacePressed = evt.key === 'Backspace';
+      const cursorAtStart = input.selectionStart === 0 && input.selectionEnd === 0;
+
+      // Only handle backspace when cursor is at the start of the input
+      if (!backspacePressed || !cursorAtStart) {
+        return;
+      }
+
+      // Prevent default backspace behavior and event bubbling
+      evt.stopPropagation();
+      evt.preventDefault();
+
+      // Focus the last enabled chip (if any exists)
+      const lastChip = findPreviousEnabledChip();
+      lastChip?.focus();
+    };
+
+    // Attach keyboard event listener
+    input.addEventListener('keydown', onKeyDown);
+
+    // Cleanup listener on unmount
+    return () => {
+      input.removeEventListener('keydown', onKeyDown);
+    };
+  }, [inputRef, findPreviousEnabledChip]);
+  return {
+    findPreviousEnabledChip
+  };
+}
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$14 = 'lumx-selection-chip-group';
+const {
+  block: block$W,
+  element: element$I
+} = classNames.bem(CLASSNAME$14);
+
+/**
+ * SelectionChipGroup component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const SelectionChipGroup = ({
+  onChange,
+  value,
+  getOptionId,
+  getOptionName,
+  inputRef,
+  inputLabel,
+  renderChip,
+  theme,
+  isDisabled,
+  chipTooltipLabel,
+  label,
+  ...forwardedProps
+}) => {
+  const chipRefs = React__default.useRef([]);
+  const {
+    findPreviousEnabledChip
+  } = useFocusLastChipOnBackspace(chipRefs, inputRef);
+  return /*#__PURE__*/jsx(ChipGroup, {
+    role: "group",
+    "aria-label": label,
+    className: block$W(),
+    ...forwardedProps,
+    children: value?.map((v, index) => {
+      const name = getWithSelector(getOptionName, v);
+      const id = getWithSelector(getOptionId, v);
+      const onClick = () => {
+        const newValue = [...value];
+        const existingIndex = value.findIndex(vi => getWithSelector(getOptionId, vi) === id);
+        if (existingIndex === -1) {
+          return;
+        }
+        // Remove value
+        newValue.splice(existingIndex, 1);
+        onChange?.(newValue);
+      };
+      const onKeyDown = evt => {
+        if (evt.key !== 'Backspace') {
+          return;
+        }
+        // Activate (remove value) on Backspace pressed
+        onClick();
+        const previousChip = findPreviousEnabledChip(index - 1);
+        const input = inputRef?.current;
+        // Focus the previous chip or the input
+        (previousChip || input)?.focus();
+      };
+      if (!chipRefs.current[index]) {
+        chipRefs.current[index] = /*#__PURE__*/React__default.createRef();
+      }
+      const ref = chipRefs.current[index];
+      const customChip = renderChip?.(v);
+      const props = isComponentType(Chip)(customChip) ? customChip.props : undefined;
+      const chipIsDisabled = props?.isDisabled || isDisabled;
+      const chipName = typeof props?.children === 'string' ? props.children : name;
+      const tooltipLabel = chipTooltipLabel(chipName);
+      return /*#__PURE__*/jsx(Tooltip, {
+        label: !chipIsDisabled ? tooltipLabel : undefined,
+        closeMode: "hide",
+        ariaLinkMode: "aria-labelledby",
+        children: /*#__PURE__*/jsx(Chip, {
+          ...props,
+          after: /*#__PURE__*/jsx(Icon, {
+            icon: mdiClose
+          }),
+          className: element$I('chip', [props?.className]),
+          size: "s",
+          ref: ref,
+          onClick: onClick,
+          onKeyDown: onKeyDown,
+          theme: theme,
+          isDisabled: chipIsDisabled,
+          tabIndex: chipIsDisabled ? -1 : 0,
+          children: props?.children || name
+        })
+      }, id);
+    })
+  });
+};
+
 /**
  * Comment block variants.
  */
@@ -1872,21 +2202,21 @@ const CommentBlockVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$17 = 'CommentBlock';
+const COMPONENT_NAME$15 = 'CommentBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$15 = 'lumx-comment-block';
+const CLASSNAME$13 = 'lumx-comment-block';
 const {
-  block: block$X,
+  block: block$V,
   element: element$H
-} = classNames.bem(CLASSNAME$15);
+} = classNames.bem(CLASSNAME$13);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$W = {
+const DEFAULT_PROPS$U = {
   variant: CommentBlockVariant.indented
 };
 
@@ -1916,13 +2246,13 @@ const CommentBlock = forwardRef((props, ref) => {
     onMouseLeave,
     text,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$W.variant,
+    variant = DEFAULT_PROPS$U.variant,
     ...forwardedProps
   } = props;
   const hasChildren = Children.count(children) > 0;
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: classNames.join(className, block$X({
+    className: classNames.join(className, block$V({
       'has-children': hasChildren && isOpen,
       'has-indented-children': hasChildren && variant === CommentBlockVariant.indented,
       'has-linear-children': hasChildren && variant === CommentBlockVariant.linear,
@@ -1983,9 +2313,9 @@ const CommentBlock = forwardRef((props, ref) => {
     })]
   });
 });
-CommentBlock.displayName = COMPONENT_NAME$17;
-CommentBlock.className = CLASSNAME$15;
-CommentBlock.defaultProps = DEFAULT_PROPS$W;
+CommentBlock.displayName = COMPONENT_NAME$15;
+CommentBlock.className = CLASSNAME$13;
+CommentBlock.defaultProps = DEFAULT_PROPS$U;
 
 /**
  * Add a number of months from a date while resetting the day to prevent month length mismatches.
@@ -2005,12 +2335,12 @@ const isDateValid = date => date instanceof Date && !Number.isNaN(date.getTime()
 /**
  * Component display name.
  */
-const COMPONENT_NAME$16 = 'DatePicker';
+const COMPONENT_NAME$14 = 'DatePicker';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$14 = 'lumx-date-picker';
+const CLASSNAME$12 = 'lumx-date-picker';
 
 /** Get first day of week for locale from the browser API */
 const getFromBrowser = locale => {
@@ -2230,7 +2560,7 @@ function formatDayNumber(locale, date) {
 
 const {
   element: element$G
-} = classNames.bem(CLASSNAME$14);
+} = classNames.bem(CLASSNAME$12);
 
 /**
  * Defines the props of the component.
@@ -2239,7 +2569,7 @@ const {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$15 = 'DatePickerControlled';
+const COMPONENT_NAME$13 = 'DatePickerControlled';
 
 /**
  * DatePickerControlled component.
@@ -2324,7 +2654,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
   const yearLabel = getYearDisplayName(locale);
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: `${CLASSNAME$14}`,
+    className: `${CLASSNAME$12}`,
     style: style,
     children: [/*#__PURE__*/jsx(Toolbar, {
       className: element$G('toolbar'),
@@ -2429,8 +2759,8 @@ const DatePickerControlled = forwardRef((props, ref) => {
     })]
   });
 });
-DatePickerControlled.displayName = COMPONENT_NAME$15;
-DatePickerControlled.className = CLASSNAME$14;
+DatePickerControlled.displayName = COMPONENT_NAME$13;
+DatePickerControlled.className = CLASSNAME$12;
 
 /**
  * DatePicker component.
@@ -2472,8 +2802,8 @@ const DatePicker = forwardRef((props, ref) => {
     onMonthChange: setSelectedMonth
   });
 });
-DatePicker.displayName = COMPONENT_NAME$16;
-DatePicker.className = CLASSNAME$14;
+DatePicker.displayName = COMPONENT_NAME$14;
+DatePicker.className = CLASSNAME$12;
 
 const useBooleanState = defaultValue => {
   const [booleanValue, setBoolean] = useState(defaultValue);
@@ -2486,7 +2816,7 @@ const useBooleanState = defaultValue => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$14 = 'DatePickerField';
+const COMPONENT_NAME$12 = 'DatePickerField';
 
 /**
  * DatePickerField component.
@@ -2575,7 +2905,7 @@ const DatePickerField = forwardRef((props, ref) => {
     }) : null]
   });
 });
-DatePickerField.displayName = COMPONENT_NAME$14;
+DatePickerField.displayName = COMPONENT_NAME$12;
 
 /**
  * Optional global `window` instance (not defined when running SSR).
@@ -2793,11 +3123,6 @@ function useIntersectionObserver(elements, options) {
   return intersections;
 }
 
-/**
- * Similar to `isComponent` but more precise as it's not based on the component `displayName` but on the component function reference.
- */
-const isComponentType = type => node => /*#__PURE__*/React__default.isValidElement(node) && node.type === type;
-
 /**
  * Similar to lodash `partition` function but working with multiple predicates.
  *
@@ -3081,21 +3406,21 @@ const isFooter$1 = isComponent('footer');
 /**
  * Component display name.
  */
-const COMPONENT_NAME$13 = 'Dialog';
+const COMPONENT_NAME$11 = 'Dialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$13 = 'lumx-dialog';
+const CLASSNAME$11 = 'lumx-dialog';
 const {
-  block: block$W,
+  block: block$U,
   element: element$F
-} = classNames.bem(CLASSNAME$13);
+} = classNames.bem(CLASSNAME$11);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$V = {
+const DEFAULT_PROPS$T = {
   size: Size$1.big,
   disableBodyScroll: true
 };
@@ -3126,11 +3451,11 @@ const Dialog = forwardRef((props, ref) => {
     parentElement,
     contentRef,
     preventAutoClose,
-    size = DEFAULT_PROPS$V.size,
+    size = DEFAULT_PROPS$T.size,
     zIndex,
     dialogProps,
     onVisibilityChange,
-    disableBodyScroll = DEFAULT_PROPS$V.disableBodyScroll,
+    disableBodyScroll = DEFAULT_PROPS$T.disableBodyScroll,
     preventCloseOnClick,
     preventCloseOnEscape,
     ...forwardedProps
@@ -3201,7 +3526,7 @@ const Dialog = forwardRef((props, ref) => {
     children: /*#__PURE__*/jsxs("div", {
       ref: mergeRefs(rootRef, ref),
       ...forwardedProps,
-      className: classNames.join(className, block$W({
+      className: classNames.join(className, block$U({
         'is-hidden': !isOpen,
         'is-loading': isLoading,
         'is-shown': isOpen || isVisible,
@@ -3268,27 +3593,27 @@ const Dialog = forwardRef((props, ref) => {
     })
   }) : null;
 });
-Dialog.displayName = COMPONENT_NAME$13;
-Dialog.className = CLASSNAME$13;
-Dialog.defaultProps = DEFAULT_PROPS$V;
+Dialog.displayName = COMPONENT_NAME$11;
+Dialog.className = CLASSNAME$11;
+Dialog.defaultProps = DEFAULT_PROPS$T;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$12 = 'Divider';
+const COMPONENT_NAME$10 = 'Divider';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$12 = 'lumx-divider';
+const CLASSNAME$10 = 'lumx-divider';
 const {
-  block: block$V
-} = classNames.bem(CLASSNAME$12);
+  block: block$T
+} = classNames.bem(CLASSNAME$10);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$U = {};
+const DEFAULT_PROPS$S = {};
 
 /**
  * Divider component.
@@ -3307,27 +3632,27 @@ const Divider = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("hr", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$V({
+    className: classNames.join(className, block$T({
       [`theme-${theme}`]: Boolean(theme)
     }))
   });
 });
-Divider.displayName = COMPONENT_NAME$12;
-Divider.className = CLASSNAME$12;
-Divider.defaultProps = DEFAULT_PROPS$U;
+Divider.displayName = COMPONENT_NAME$10;
+Divider.className = CLASSNAME$10;
+Divider.defaultProps = DEFAULT_PROPS$S;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$11 = 'DragHandle';
+const COMPONENT_NAME$$ = 'DragHandle';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$11 = 'lumx-drag-handle';
+const CLASSNAME$$ = 'lumx-drag-handle';
 const {
-  block: block$U
-} = classNames.bem(CLASSNAME$11);
+  block: block$S
+} = classNames.bem(CLASSNAME$$);
 
 /**
  * DragHandle component.
@@ -3346,7 +3671,7 @@ const DragHandle = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$U({
+    className: classNames.join(className, block$S({
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: /*#__PURE__*/jsx(Icon, {
@@ -3356,8 +3681,8 @@ const DragHandle = forwardRef((props, ref) => {
     })
   });
 });
-DragHandle.displayName = COMPONENT_NAME$11;
-DragHandle.className = CLASSNAME$11;
+DragHandle.displayName = COMPONENT_NAME$$;
+DragHandle.className = CLASSNAME$$;
 
 const INITIAL_INDEX = -1;
 
@@ -3526,20 +3851,20 @@ const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNav
 /**
  * Component display name.
  */
-const COMPONENT_NAME$10 = 'List';
+const COMPONENT_NAME$_ = 'List';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$10 = 'lumx-list';
+const CLASSNAME$_ = 'lumx-list';
 const {
-  block: block$T
-} = classNames.bem(CLASSNAME$10);
+  block: block$R
+} = classNames.bem(CLASSNAME$_);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$T = {
+const DEFAULT_PROPS$R = {
   tabIndex: -1
 };
 
@@ -3558,13 +3883,13 @@ const InternalList = forwardRef((props, ref) => {
     isClickable,
     itemPadding,
     onListItemSelected,
-    tabIndex = DEFAULT_PROPS$T.tabIndex,
+    tabIndex = DEFAULT_PROPS$R.tabIndex,
     ...forwardedProps
   } = props;
   const adjustedItemPadding = itemPadding ?? (isClickable ? Size$1.big : undefined);
   return /*#__PURE__*/jsx("ul", {
     ...forwardedProps,
-    className: classNames.join(className, block$T({
+    className: classNames.join(className, block$R({
       [`item-padding-${adjustedItemPadding}`]: Boolean(adjustedItemPadding)
     })),
     tabIndex: tabIndex,
@@ -3572,9 +3897,9 @@ const InternalList = forwardRef((props, ref) => {
     children: children
   });
 });
-InternalList.displayName = COMPONENT_NAME$10;
-InternalList.className = CLASSNAME$10;
-InternalList.defaultProps = DEFAULT_PROPS$T;
+InternalList.displayName = COMPONENT_NAME$_;
+InternalList.className = CLASSNAME$_;
+InternalList.defaultProps = DEFAULT_PROPS$R;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
 });
@@ -6005,21 +6330,21 @@ function usePopoverStyle({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$$ = 'Popover';
+const COMPONENT_NAME$Z = 'Popover';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$$ = 'lumx-popover';
+const CLASSNAME$Z = 'lumx-popover';
 const {
-  block: block$S,
+  block: block$Q,
   element: element$E
-} = classNames.bem(CLASSNAME$$);
+} = classNames.bem(CLASSNAME$Z);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$S = {
+const DEFAULT_PROPS$Q = {
   elevation: 3,
   placement: Placement.AUTO,
   focusAnchorOnClose: true,
@@ -6036,24 +6361,24 @@ const _InnerPopover = forwardRef((props, ref) => {
     className,
     closeOnClickAway,
     closeOnEscape,
-    elevation = DEFAULT_PROPS$S.elevation,
+    elevation = DEFAULT_PROPS$Q.elevation,
     focusElement,
     hasArrow,
     isOpen,
     onClose,
     parentElement,
-    usePortal = DEFAULT_PROPS$S.usePortal,
-    focusAnchorOnClose = DEFAULT_PROPS$S.focusAnchorOnClose,
+    usePortal = DEFAULT_PROPS$Q.usePortal,
+    focusAnchorOnClose = DEFAULT_PROPS$Q.focusAnchorOnClose,
     withFocusTrap,
     boundaryRef,
     fitToAnchorWidth,
     fitWithinViewportHeight,
     focusTrapZoneElement,
     offset,
-    placement = DEFAULT_PROPS$S.placement,
+    placement = DEFAULT_PROPS$Q.placement,
     style,
     theme,
-    zIndex = DEFAULT_PROPS$S.zIndex,
+    zIndex = DEFAULT_PROPS$Q.zIndex,
     ...forwardedProps
   } = props;
   const popoverRef = useRef(null);
@@ -6095,7 +6420,7 @@ const _InnerPopover = forwardRef((props, ref) => {
     children: /*#__PURE__*/jsxs(Component, {
       ...forwardedProps,
       ref: mergedRefs,
-      className: classNames.join(className, block$S({
+      className: classNames.join(className, block$Q({
         [`theme-${theme}`]: Boolean(theme),
         [`elevation-${adjustedElevation}`]: Boolean(adjustedElevation),
         [`position-${position}`]: Boolean(position),
@@ -6125,7 +6450,7 @@ const _InnerPopover = forwardRef((props, ref) => {
     })
   }) : null;
 });
-_InnerPopover.displayName = COMPONENT_NAME$$;
+_InnerPopover.displayName = COMPONENT_NAME$Z;
 
 /**
  * Popover component.
@@ -6137,9 +6462,9 @@ _InnerPopover.displayName = COMPONENT_NAME$$;
 const Popover = skipRender(
 // Skip render in SSR
 () => Boolean(DOCUMENT), _InnerPopover);
-Popover.displayName = COMPONENT_NAME$$;
-Popover.className = CLASSNAME$$;
-Popover.defaultProps = DEFAULT_PROPS$S;
+Popover.displayName = COMPONENT_NAME$Z;
+Popover.className = CLASSNAME$Z;
+Popover.defaultProps = DEFAULT_PROPS$Q;
 
 // The error margin in px we want to have for triggering infinite scroll
 const SCROLL_TRIGGER_MARGIN = 5;
@@ -6185,21 +6510,21 @@ const useInfiniteScroll = (ref, callback, callbackOnMount = false, scrollTrigger
 /**
  * Component display name.
  */
-const COMPONENT_NAME$_ = 'Dropdown';
+const COMPONENT_NAME$Y = 'Dropdown';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$_ = 'lumx-dropdown';
+const CLASSNAME$Y = 'lumx-dropdown';
 const {
-  block: block$R,
+  block: block$P,
   element: element$D
-} = classNames.bem(CLASSNAME$_);
+} = classNames.bem(CLASSNAME$Y);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$R = {
+const DEFAULT_PROPS$P = {
   closeOnClick: true,
   closeOnClickAway: true,
   closeOnEscape: true,
@@ -6222,18 +6547,18 @@ const Dropdown = forwardRef((props, ref) => {
     anchorRef,
     children,
     className,
-    closeOnClick = DEFAULT_PROPS$R.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$R.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$R.closeOnEscape,
-    fitToAnchorWidth = DEFAULT_PROPS$R.fitToAnchorWidth,
-    fitWithinViewportHeight = DEFAULT_PROPS$R.fitWithinViewportHeight,
+    closeOnClick = DEFAULT_PROPS$P.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$P.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$P.closeOnEscape,
+    fitToAnchorWidth = DEFAULT_PROPS$P.fitToAnchorWidth,
+    fitWithinViewportHeight = DEFAULT_PROPS$P.fitWithinViewportHeight,
     isOpen,
     offset,
-    focusAnchorOnClose = DEFAULT_PROPS$R.focusAnchorOnClose,
+    focusAnchorOnClose = DEFAULT_PROPS$P.focusAnchorOnClose,
     onClose,
     onInfiniteScroll,
-    placement = DEFAULT_PROPS$R.placement,
-    shouldFocusOnOpen = DEFAULT_PROPS$R.shouldFocusOnOpen,
+    placement = DEFAULT_PROPS$P.placement,
+    shouldFocusOnOpen = DEFAULT_PROPS$P.shouldFocusOnOpen,
     zIndex,
     ...forwardedProps
   } = props;
@@ -6258,7 +6583,7 @@ const Dropdown = forwardRef((props, ref) => {
     ...forwardedProps,
     focusAnchorOnClose: focusAnchorOnClose,
     anchorRef: anchorRef,
-    className: classNames.join(className, block$R()),
+    className: classNames.join(className, block$P()),
     elevation: 0,
     closeOnClickAway: closeOnClickAway,
     closeOnEscape: closeOnEscape,
@@ -6277,28 +6602,28 @@ const Dropdown = forwardRef((props, ref) => {
     })
   }) : null;
 });
-Dropdown.displayName = COMPONENT_NAME$_;
-Dropdown.className = CLASSNAME$_;
-Dropdown.defaultProps = DEFAULT_PROPS$R;
+Dropdown.displayName = COMPONENT_NAME$Y;
+Dropdown.className = CLASSNAME$Y;
+Dropdown.defaultProps = DEFAULT_PROPS$P;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Z = 'ExpansionPanel';
+const COMPONENT_NAME$X = 'ExpansionPanel';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Z = 'lumx-expansion-panel';
+const CLASSNAME$X = 'lumx-expansion-panel';
 const {
-  block: block$Q,
+  block: block$O,
   element: element$C
-} = classNames.bem(CLASSNAME$Z);
+} = classNames.bem(CLASSNAME$X);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Q = {
+const DEFAULT_PROPS$O = {
   closeMode: 'unmount'
 };
 const isDragHandle = isComponent(DragHandle);
@@ -6316,7 +6641,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     className,
-    closeMode = DEFAULT_PROPS$Q.closeMode,
+    closeMode = DEFAULT_PROPS$O.closeMode,
     children: anyChildren,
     hasBackground,
     hasHeaderDivider,
@@ -6353,7 +6678,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
     }
   };
   const color = theme === Theme$1.dark ? ColorPalette$1.light : ColorPalette$1.dark;
-  const rootClassName = classNames.join(className, block$Q({
+  const rootClassName = classNames.join(className, block$O({
     'has-background': hasBackground,
     'has-header': Boolean(!isEmpty(headerProps.children)),
     'has-header-divider': hasHeaderDivider,
@@ -6431,17 +6756,17 @@ const ExpansionPanel = forwardRef((props, ref) => {
     })]
   });
 });
-ExpansionPanel.displayName = COMPONENT_NAME$Z;
-ExpansionPanel.className = CLASSNAME$Z;
-ExpansionPanel.defaultProps = DEFAULT_PROPS$Q;
+ExpansionPanel.displayName = COMPONENT_NAME$X;
+ExpansionPanel.className = CLASSNAME$X;
+ExpansionPanel.defaultProps = DEFAULT_PROPS$O;
 
-const COMPONENT_NAME$Y = 'Flag';
-const CLASSNAME$Y = 'lumx-flag';
-const DEFAULT_PROPS$P = {};
+const COMPONENT_NAME$W = 'Flag';
+const CLASSNAME$W = 'lumx-flag';
+const DEFAULT_PROPS$N = {};
 const {
-  block: block$P,
+  block: block$N,
   element: element$B
-} = bem(CLASSNAME$Y);
+} = bem(CLASSNAME$W);
 
 /**
  * Flag component.
@@ -6464,7 +6789,7 @@ const Flag$1 = props => {
   const isTruncated = !!truncate;
   return /*#__PURE__*/jsxs("div", {
     ...forwardedProps,
-    className: classnames(className, block$P({
+    className: classnames(className, block$N({
       [`color-${flagColor}`]: Boolean(flagColor),
       'is-truncated': isTruncated
     })),
@@ -6499,9 +6824,9 @@ const Flag = forwardRef((props, ref) => {
     Text
   });
 });
-Flag.displayName = COMPONENT_NAME$Y;
-Flag.className = CLASSNAME$Y;
-Flag.defaultProps = DEFAULT_PROPS$P;
+Flag.displayName = COMPONENT_NAME$W;
+Flag.className = CLASSNAME$W;
+Flag.defaultProps = DEFAULT_PROPS$N;
 
 /**
  * Defines the props of the component.
@@ -6510,15 +6835,15 @@ Flag.defaultProps = DEFAULT_PROPS$P;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$X = 'FlexBox';
+const COMPONENT_NAME$V = 'FlexBox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$X = 'lumx-flex-box';
+const CLASSNAME$V = 'lumx-flex-box';
 const {
-  block: block$O
-} = bem(CLASSNAME$X);
+  block: block$M
+} = bem(CLASSNAME$V);
 
 /**
  * Get FlexBox component props (className computation).
@@ -6542,7 +6867,7 @@ function getFlexBoxProps(props) {
   const adjustedOrientation = orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null);
   return {
     ...forwardedProps,
-    className: classnames(className, block$O({
+    className: classnames(className, block$M({
       [`orientation-${adjustedOrientation}`]: Boolean(adjustedOrientation),
       [`v-align-${vAlign}`]: Boolean(vAlign),
       [`h-align-${hAlign}`]: Boolean(hAlign),
@@ -6574,27 +6899,27 @@ const FlexBox = forwardRef((props, ref) => {
     children: children
   });
 });
-FlexBox.displayName = COMPONENT_NAME$X;
-FlexBox.className = CLASSNAME$X;
+FlexBox.displayName = COMPONENT_NAME$V;
+FlexBox.className = CLASSNAME$V;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$W = 'GenericBlock';
+const COMPONENT_NAME$U = 'GenericBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$W = 'lumx-generic-block';
+const CLASSNAME$U = 'lumx-generic-block';
 const {
-  block: block$N,
+  block: block$L,
   element: element$A
-} = classNames.bem(CLASSNAME$W);
+} = classNames.bem(CLASSNAME$U);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$O = {
+const DEFAULT_PROPS$M = {
   gap: Size$1.big,
   orientation: Orientation$1.horizontal
 };
@@ -6624,8 +6949,8 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     children,
     actions,
     actionsProps,
-    gap = DEFAULT_PROPS$O.gap,
-    orientation = DEFAULT_PROPS$O.orientation,
+    gap = DEFAULT_PROPS$M.gap,
+    orientation = DEFAULT_PROPS$M.orientation,
     contentProps,
     ...forwardedProps
   } = props;
@@ -6644,7 +6969,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
   }, [children]);
   return /*#__PURE__*/jsxs(FlexBox, {
     ref: ref,
-    className: classNames.join(className, block$N()),
+    className: classNames.join(className, block$L()),
     gap: gap,
     orientation: orientation,
     ...forwardedProps,
@@ -6677,9 +7002,9 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     })]
   });
 });
-BaseGenericBlock.displayName = COMPONENT_NAME$W;
-BaseGenericBlock.className = CLASSNAME$W;
-BaseGenericBlock.defaultProps = DEFAULT_PROPS$O;
+BaseGenericBlock.displayName = COMPONENT_NAME$U;
+BaseGenericBlock.className = CLASSNAME$U;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS$M;
 const GenericBlock = Object.assign(BaseGenericBlock, {
   Figure,
   Content,
@@ -6717,17 +7042,17 @@ const defaultContext = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$V = 'Heading';
+const COMPONENT_NAME$T = 'Heading';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$V = 'lumx-heading';
+const CLASSNAME$T = 'lumx-heading';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$N = {};
+const DEFAULT_PROPS$L = {};
 
 /**
  * Get Heading component common props
@@ -6747,7 +7072,7 @@ const getHeadingProps = (props, contextHeadingElement) => {
   return {
     ...otherProps,
     as: computedHeadingElement,
-    className: classnames(className, CLASSNAME$V),
+    className: classnames(className, CLASSNAME$T),
     typography: typography || DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]
   };
 };
@@ -6815,20 +7140,20 @@ function wrapChildrenIconWithSpaces(children) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$U = 'Text';
+const COMPONENT_NAME$S = 'Text';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$U = 'lumx-text';
+const CLASSNAME$S = 'lumx-text';
 const {
-  block: block$M
-} = bem(CLASSNAME$U);
+  block: block$K
+} = bem(CLASSNAME$S);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$M = {};
+const DEFAULT_PROPS$K = {};
 
 /**
  * Text component common props
@@ -6864,7 +7189,7 @@ const getTextProps = props => {
     '--lumx-text-white-space': whiteSpace
   };
   return {
-    className: classnames(className, block$M({
+    className: classnames(className, block$K({
       'is-truncated': isTruncated && !isTruncatedMultiline,
       'is-truncated-multiline': isTruncatedMultiline,
       'no-wrap': noWrap
@@ -6913,9 +7238,9 @@ const Text = forwardRef((props, ref) => {
     children: wrapChildrenIconWithSpaces(children)
   });
 });
-Text.displayName = COMPONENT_NAME$U;
-Text.className = CLASSNAME$U;
-Text.defaultProps = DEFAULT_PROPS$M;
+Text.displayName = COMPONENT_NAME$S;
+Text.className = CLASSNAME$S;
+Text.defaultProps = DEFAULT_PROPS$K;
 
 const HeadingLevelContext = /*#__PURE__*/createContext(defaultContext);
 
@@ -6950,9 +7275,9 @@ const Heading = forwardRef((props, ref) => {
     children: children
   });
 });
-Heading.displayName = COMPONENT_NAME$V;
-Heading.className = CLASSNAME$V;
-Heading.defaultProps = DEFAULT_PROPS$N;
+Heading.displayName = COMPONENT_NAME$T;
+Heading.className = CLASSNAME$T;
+Heading.defaultProps = DEFAULT_PROPS$L;
 
 /**
  * Computes the next heading level based on the optional prop level or the parent context level.
@@ -6990,20 +7315,20 @@ const HeadingLevelProvider = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$T = 'Grid';
+const COMPONENT_NAME$R = 'Grid';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$T = 'lumx-grid';
+const CLASSNAME$R = 'lumx-grid';
 const {
-  block: block$L
-} = classNames.bem(CLASSNAME$T);
+  block: block$J
+} = classNames.bem(CLASSNAME$R);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$L = {
+const DEFAULT_PROPS$J = {
   orientation: Orientation$1.horizontal,
   wrap: 'nowrap'
 };
@@ -7021,15 +7346,15 @@ const Grid = forwardRef((props, ref) => {
     className,
     gutter,
     hAlign,
-    orientation = DEFAULT_PROPS$L.orientation,
+    orientation = DEFAULT_PROPS$J.orientation,
     vAlign,
-    wrap = DEFAULT_PROPS$L.wrap,
+    wrap = DEFAULT_PROPS$J.wrap,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, classNames.bem(`${CLASSNAME$T}-container`).block(), block$L({
+    className: classNames.join(className, classNames.bem(`${CLASSNAME$R}-container`).block(), block$J({
       [`h-align-${hAlign}`]: Boolean(hAlign),
       [`v-align-${vAlign}`]: Boolean(vAlign),
       [`orientation-${orientation}`]: Boolean(orientation),
@@ -7039,22 +7364,22 @@ const Grid = forwardRef((props, ref) => {
     children: children
   });
 });
-Grid.displayName = COMPONENT_NAME$T;
-Grid.className = CLASSNAME$T;
-Grid.defaultProps = DEFAULT_PROPS$L;
+Grid.displayName = COMPONENT_NAME$R;
+Grid.className = CLASSNAME$R;
+Grid.defaultProps = DEFAULT_PROPS$J;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$S = 'GridItem';
+const COMPONENT_NAME$Q = 'GridItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$S = 'lumx-grid-item';
+const CLASSNAME$Q = 'lumx-grid-item';
 const {
-  block: block$K
-} = classNames.bem(CLASSNAME$S);
+  block: block$I
+} = classNames.bem(CLASSNAME$Q);
 
 /**
  * GridItem component.
@@ -7075,7 +7400,7 @@ const GridItem = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$K({
+    className: classNames.join(className, block$I({
       [`width-${width}`]: Boolean(width),
       [`order-${order}`]: Boolean(order),
       [`align-${align}`]: Boolean(align)
@@ -7083,23 +7408,23 @@ const GridItem = forwardRef((props, ref) => {
     children: children
   });
 });
-GridItem.displayName = COMPONENT_NAME$S;
-GridItem.className = CLASSNAME$S;
+GridItem.displayName = COMPONENT_NAME$Q;
+GridItem.className = CLASSNAME$Q;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$R = 'GridColumn';
+const COMPONENT_NAME$P = 'GridColumn';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$R = 'lumx-grid-column';
+const CLASSNAME$P = 'lumx-grid-column';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$K = {};
+const DEFAULT_PROPS$I = {};
 
 /**
  * The GridColumn is a layout component that can display children in a grid
@@ -7124,7 +7449,7 @@ const GridColumn = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx(Component, {
     ...forwardedProps,
     ref: ref,
-    className: classNames.join(className, CLASSNAME$R),
+    className: classNames.join(className, CLASSNAME$P),
     style: {
       ...style,
       ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
@@ -7134,9 +7459,9 @@ const GridColumn = forwardRef((props, ref) => {
     children: children
   });
 });
-GridColumn.displayName = COMPONENT_NAME$R;
-GridColumn.className = CLASSNAME$R;
-GridColumn.defaultProps = DEFAULT_PROPS$K;
+GridColumn.displayName = COMPONENT_NAME$P;
+GridColumn.className = CLASSNAME$P;
+GridColumn.defaultProps = DEFAULT_PROPS$I;
 
 /**
  * Icon component.
@@ -7240,21 +7565,21 @@ const ImageBlockCaptionPosition = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Q = 'ImageBlock';
+const COMPONENT_NAME$O = 'ImageBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Q = 'lumx-image-block';
+const CLASSNAME$O = 'lumx-image-block';
 const {
-  block: block$J,
+  block: block$H,
   element: element$z
-} = classNames.bem(CLASSNAME$Q);
+} = classNames.bem(CLASSNAME$O);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$J = {
+const DEFAULT_PROPS$H = {
   captionPosition: ImageBlockCaptionPosition.below,
   align: Alignment.left
 };
@@ -7270,9 +7595,9 @@ const ImageBlock = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     actions,
-    align = DEFAULT_PROPS$J.align,
+    align = DEFAULT_PROPS$H.align,
     alt,
-    captionPosition = DEFAULT_PROPS$J.captionPosition,
+    captionPosition = DEFAULT_PROPS$H.captionPosition,
     captionStyle,
     className,
     description,
@@ -7290,7 +7615,7 @@ const ImageBlock = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("figure", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$J({
+    className: classNames.join(className, block$H({
       [`caption-position-${captionPosition}`]: Boolean(captionPosition),
       [`align-${align}`]: Boolean(align),
       [`size-${size}`]: Boolean(size),
@@ -7308,7 +7633,7 @@ const ImageBlock = forwardRef((props, ref) => {
       alt: alt || title
     }), /*#__PURE__*/jsx(ImageCaption, {
       as: "figcaption",
-      baseClassName: CLASSNAME$Q,
+      baseClassName: CLASSNAME$O,
       theme: theme,
       title: title,
       titleProps: titleProps,
@@ -7324,19 +7649,19 @@ const ImageBlock = forwardRef((props, ref) => {
     })]
   });
 });
-ImageBlock.displayName = COMPONENT_NAME$Q;
-ImageBlock.className = CLASSNAME$Q;
-ImageBlock.defaultProps = DEFAULT_PROPS$J;
+ImageBlock.displayName = COMPONENT_NAME$O;
+ImageBlock.className = CLASSNAME$O;
+ImageBlock.defaultProps = DEFAULT_PROPS$H;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$P = 'ImageLightbox';
+const COMPONENT_NAME$N = 'ImageLightbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$P = 'lumx-image-lightbox';
+const CLASSNAME$N = 'lumx-image-lightbox';
 
 /**
  * Observe element size (only works if it's size depends on the window size).
@@ -7582,7 +7907,7 @@ function useAnimateScroll(scrollAreaRef) {
 
 const {
   element: element$y
-} = classNames.bem(CLASSNAME$P);
+} = classNames.bem(CLASSNAME$N);
 /** Internal image slide component for ImageLightbox */
 const ImageSlide = /*#__PURE__*/React__default.memo(props => {
   const {
@@ -7674,7 +7999,7 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
 
 const {
   element: element$x
-} = classNames.bem(CLASSNAME$P);
+} = classNames.bem(CLASSNAME$N);
 /** Internal image slideshow component for ImageLightbox */
 const ImageSlideshow = ({
   activeImageIndex,
@@ -7920,7 +8245,7 @@ function useImageLightbox(props) {
         viewTransitionName: {
           source: currentImageRef,
           target: triggerImageRefs[currentIndex],
-          name: CLASSNAME$P
+          name: CLASSNAME$N
         }
       });
     }
@@ -7972,7 +8297,7 @@ function useImageLightbox(props) {
         viewTransitionName: {
           source: triggerImage,
           target: currentImageRef,
-          name: CLASSNAME$P
+          name: CLASSNAME$N
         }
       });
     }
@@ -8026,7 +8351,7 @@ const Inner = forwardRef((props, ref) => {
   }, [onClose]);
   return /*#__PURE__*/jsx(Lightbox, {
     ref: ref,
-    className: classNames.join(className, CLASSNAME$P),
+    className: classNames.join(className, CLASSNAME$N),
     parentElement: parentElement,
     isOpen: isOpen,
     onClose: onClose,
@@ -8055,8 +8380,8 @@ const Inner = forwardRef((props, ref) => {
     })
   });
 });
-Inner.displayName = COMPONENT_NAME$P;
-Inner.className = CLASSNAME$P;
+Inner.displayName = COMPONENT_NAME$N;
+Inner.className = CLASSNAME$N;
 
 /**
  * ImageLightbox component.
@@ -8072,21 +8397,21 @@ const ImageLightbox = Object.assign(Inner, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$O = 'InlineList';
+const COMPONENT_NAME$M = 'InlineList';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$O = 'lumx-inline-list';
+const CLASSNAME$M = 'lumx-inline-list';
 const {
-  block: block$I,
+  block: block$G,
   element: element$w
-} = classNames.bem(CLASSNAME$O);
+} = classNames.bem(CLASSNAME$M);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$I = {};
+const DEFAULT_PROPS$G = {};
 
 /**
  * InlineList component.
@@ -8111,7 +8436,7 @@ const InlineList = forwardRef((props, ref) => {
     jsx("ul", {
       ...forwardedProps,
       ref: ref,
-      className: classNames.join(className, block$I({
+      className: classNames.join(className, block$G({
         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
@@ -8137,69 +8462,9 @@ const InlineList = forwardRef((props, ref) => {
     })
   );
 });
-InlineList.displayName = COMPONENT_NAME$O;
-InlineList.className = CLASSNAME$O;
-InlineList.defaultProps = DEFAULT_PROPS$I;
-
-const INPUT_HELPER_CONFIGURATION = {
-  [Kind.error]: {
-    color: 'red'
-  },
-  [Kind.success]: {
-    color: 'green'
-  },
-  [Kind.warning]: {
-    color: 'yellow'
-  }
-};
-
-const COMPONENT_NAME$N = 'InputHelper';
-const InputHelperClassName = 'lumx-input-helper';
-
-/**
- * Defines the props of the component.
- */
-
-const CLASSNAME$N = InputHelperClassName;
-const {
-  block: block$H
-} = bem(CLASSNAME$N);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$H = {
-  kind: Kind.info
-};
-
-/**
- * InputHelper component.
- */
-function InputHelper$1(props) {
-  const {
-    children,
-    className,
-    kind = DEFAULT_PROPS$H.kind,
-    theme,
-    ref,
-    ...forwardedProps
-  } = props;
-  const {
-    color
-  } = INPUT_HELPER_CONFIGURATION[kind] || {};
-  return /*#__PURE__*/jsx("p", {
-    ref: ref,
-    ...forwardedProps,
-    className: classnames(className, block$H({
-      [`color-${color}`]: Boolean(color),
-      [`theme-${theme}`]: Boolean(theme)
-    })),
-    children: children
-  });
-}
-InputHelper$1.displayName = COMPONENT_NAME$N;
-InputHelper$1.className = CLASSNAME$N;
-InputHelper$1.defaultProps = DEFAULT_PROPS$H;
+InlineList.displayName = COMPONENT_NAME$M;
+InlineList.className = CLASSNAME$M;
+InlineList.defaultProps = DEFAULT_PROPS$G;
 
 /**
  * InputHelper component.
@@ -8220,44 +8485,6 @@ InputHelper.displayName = InputHelper$1.displayName;
 InputHelper.className = InputHelper$1.className;
 InputHelper.defaultProps = InputHelper$1.defaultProps;
 
-const COMPONENT_NAME$M = 'InputLabel';
-const InputLabelClassName = 'lumx-input-label';
-const CLASSNAME$M = InputLabelClassName;
-const {
-  block: block$G
-} = bem(CLASSNAME$M);
-const DEFAULT_PROPS$G = {};
-
-/**
- * InputLabel component.
- */
-function InputLabel$1(props) {
-  const {
-    children,
-    className,
-    htmlFor,
-    isRequired,
-    theme,
-    typography: typography$1,
-    ref,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsx("label", {
-    ref: ref,
-    ...forwardedProps,
-    htmlFor: htmlFor,
-    className: classnames(className, block$G({
-      'is-required': isRequired,
-      [`theme-${theme}`]: Boolean(theme),
-      'has-custom-typography': Boolean(typography$1)
-    }), typography$1 && typography(typography$1)),
-    children: children
-  });
-}
-InputLabel$1.displayName = COMPONENT_NAME$M;
-InputLabel$1.className = CLASSNAME$M;
-InputLabel$1.defaultProps = DEFAULT_PROPS$G;
-
 /**
  * InputLabel component.
  *
@@ -14417,5 +14644,5 @@ UserBlock.displayName = COMPONENT_NAME;
 UserBlock.className = CLASSNAME;
 UserBlock.defaultProps = DEFAULT_PROPS;
 
-export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1c as CLASSNAME, COMPONENT_NAME$1e as COMPONENT_NAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$11 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, 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$1d as CLASSNAME, COMPONENT_NAME$1e as COMPONENT_NAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$11 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 };
 //# sourceMappingURL=index.js.map