@lumx/react 4.2.0 → 4.2.1-alpha.0

package/index.js

@@ -1,4 +1,4 @@
-import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, Theme as Theme$1, AspectRatio, ColorVariant, DIALOG_TRANSITION_DURATION, Orientation, Typography, Alignment, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
+import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, Theme as Theme$1, AspectRatio, ColorVariant, DIALOG_TRANSITION_DURATION, Orientation, Alignment, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 import * as React from 'react';
@@ -7,9 +7,6 @@ import { mdiAlert } from '@lumx/icons/esm/alert';
 import { mdiAlertCircle } from '@lumx/icons/esm/alert-circle';
 import { mdiCheckCircle } from '@lumx/icons/esm/check-circle';
 import { mdiInformation } from '@lumx/icons/esm/information';
-import isBoolean from 'lodash/isBoolean';
-import isEmpty from 'lodash/isEmpty';
-import kebabCase from 'lodash/kebabCase';
 import { classNames, onEnterPressed, onEscapePressed, onButtonPressed, detectHorizontalSwipe } from '@lumx/core/js/utils';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import last from 'lodash/last';
@@ -20,6 +17,7 @@ import dropRight from 'lodash/dropRight';
 import partition from 'lodash/partition';
 import reduce from 'lodash/reduce';
 import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider } from './_internal/DpdvhbTO.js';
+import isEmpty from 'lodash/isEmpty';
 import { getDisabledState } from '@lumx/core/js/utils/disabledState';
 import { mdiCloseCircle } from '@lumx/icons/esm/close-circle';
 import memoize from 'lodash/memoize';
@@ -53,147 +51,6 @@ import { mdiArrowDown } from '@lumx/icons/esm/arrow-down';
 import { mdiArrowUp } from '@lumx/icons/esm/arrow-up';
 import set from 'lodash/set';
 
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-var classnames$1 = {exports: {}};
-
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-
-var hasRequiredClassnames;
-
-function requireClassnames () {
-	if (hasRequiredClassnames) return classnames$1.exports;
-	hasRequiredClassnames = 1;
-	(function (module) {
-		/* global define */
-
-		(function () {
-
-			var hasOwn = {}.hasOwnProperty;
-
-			function classNames() {
-				var classes = [];
-
-				for (var i = 0; i < arguments.length; i++) {
-					var arg = arguments[i];
-					if (!arg) continue;
-
-					var argType = typeof arg;
-
-					if (argType === 'string' || argType === 'number') {
-						classes.push(arg);
-					} else if (Array.isArray(arg)) {
-						if (arg.length) {
-							var inner = classNames.apply(null, arg);
-							if (inner) {
-								classes.push(inner);
-							}
-						}
-					} else if (argType === 'object') {
-						if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-							classes.push(arg.toString());
-							continue;
-						}
-
-						for (var key in arg) {
-							if (hasOwn.call(arg, key) && arg[key]) {
-								classes.push(key);
-							}
-						}
-					}
-				}
-
-				return classes.join(' ');
-			}
-
-			if (module.exports) {
-				classNames.default = classNames;
-				module.exports = classNames;
-			} else {
-				window.classNames = classNames;
-			}
-		}()); 
-	} (classnames$1));
-	return classnames$1.exports;
-}
-
-var classnamesExports = requireClassnames();
-var classnames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
-
-/**
- * Get the basic CSS class for the given type.
- *
- * @param  prefix The class name prefix for the generated CSS class.
- * @param  type   The type of CSS class we want to generate (e.g.: 'color', 'variant', ...).
- * @param  value  The value of the type of the CSS class (e.g.: 'primary', 'button', ...).
- * @return The basic CSS class.
- */
-function getBasicClass({
-  prefix,
-  type,
-  value
-}) {
-  if (isBoolean(value)) {
-    if (!value) {
-      // False value should not return a class.
-      return '';
-    }
-    const booleanPrefixes = ['has', 'is'];
-    if (booleanPrefixes.some(booleanPrefix => type.toString().startsWith(booleanPrefix))) {
-      return `${prefix}--${kebabCase(type)}`;
-    }
-    return `${prefix}--is-${kebabCase(type)}`;
-  }
-  return `${prefix}--${kebabCase(type)}-${value}`;
-}
-
-/**
- * Enhance isEmpty method to also works with numbers.
- *
- * @param  value The value to check.
- * @return Whether the input value is empty or != 0.
- */
-const _isEmpty = value => {
-  if (typeof value === 'number') {
-    return value === 0;
-  }
-  return isEmpty(value);
-};
-
-/**
- * Return all basic LumX CSS classes which are available for every components.
- *
- * @see {@link /src/components/index.d.ts} for the possible values of each parameter.
- *
- * @param  prefix The class name prefix for the generated CSS class.
- * @param  props  All the other props you want to generate a class.
- *                The rule of thumb: the key is the name of the prop in the class, the value a string that will
- *                be used in the classname to represent the value of the given prop.
- * @return All LumX basic CSS classes.
- */
-function handleBasicClasses({
-  prefix,
-  ...props
-}) {
-  const otherClasses = {};
-  if (!isEmpty(props)) {
-    Object.keys(props).forEach(prop => {
-      otherClasses[getBasicClass({
-        prefix,
-        type: prop,
-        value: props[prop]
-      })] = isBoolean(props[prop]) ? props[prop] : !_isEmpty(props[prop]);
-    });
-  }
-  return classnames(prefix, otherClasses);
-}
-
 let i = 0;
 
 /**
@@ -244,6 +101,9 @@ const COMPONENT_NAME$1k = 'AlertDialog';
  * Component default class name and class prefix.
  */
 const CLASSNAME$1i = 'lumx-alert-dialog';
+const {
+  block: block$13
+} = classNames.bem(CLASSNAME$1i);
 
 /**
  * Component default props.
@@ -311,9 +171,8 @@ const AlertDialog = forwardRef((props, ref) => {
       'aria-describedby': descriptionId,
       ...dialogProps
     },
-    className: classNames.join(className, handleBasicClasses({
-      kind,
-      prefix: CLASSNAME$1i
+    className: classNames.join(className, block$13({
+      [`kind-${kind}`]: Boolean(kind)
     })),
     ...forwardedProps,
     children: [/*#__PURE__*/jsx("header", {
@@ -701,6 +560,10 @@ const COMPONENT_NAME$1h = 'Avatar';
  * Component default class name and class prefix.
  */
 const CLASSNAME$1f = 'lumx-avatar';
+const {
+  block: block$12,
+  element: element$M
+} = classNames.bem(CLASSNAME$1f);
 
 /**
  * Component default props.
@@ -736,15 +599,14 @@ const Avatar = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$1f,
-      size,
-      theme
+    className: classNames.join(className, block$12({
+      [`size-${size}`]: Boolean(size),
+      [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsx(Thumbnail, {
       linkProps: linkProps,
       linkAs: linkAs,
-      className: `${CLASSNAME$1f}__thumbnail`,
+      className: element$M('thumbnail'),
       onClick: onClick,
       onKeyPress: onKeyPress,
       ...thumbnailProps,
@@ -754,10 +616,10 @@ const Avatar = forwardRef((props, ref) => {
       alt: alt,
       theme: theme
     }), actions && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$1f}__actions`,
+      className: element$M('actions'),
       children: actions
     }), badge && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$1f}__badge`,
+      className: element$M('badge'),
       children: badge
     })]
   });
@@ -775,6 +637,9 @@ const COMPONENT_NAME$1g = 'Badge';
  * Component default class name and class prefix.
  */
 const CLASSNAME$1e = 'lumx-badge';
+const {
+  block: block$11
+} = classNames.bem(CLASSNAME$1e);
 
 /**
  * Component default props.
@@ -800,9 +665,8 @@ const Badge = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$1e,
-      color
+    className: classNames.join(className, block$11({
+      [`color-${color}`]: Boolean(color)
     })),
     children: children
   });
@@ -815,6 +679,10 @@ Badge.defaultProps = DEFAULT_PROPS$12;
  * Component default class name and class prefix.
  */
 const CLASSNAME$1d = 'lumx-badge-wrapper';
+const {
+  block: block$10,
+  element: element$L
+} = classNames.bem(CLASSNAME$1d);
 const BadgeWrapper = forwardRef((props, ref) => {
   const {
     badge,
@@ -825,9 +693,9 @@ const BadgeWrapper = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$1d),
+    className: classNames.join(className, block$10()),
     children: [children, badge && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$1d}__badge`,
+      className: element$L('badge'),
       children: badge
     })]
   });
@@ -853,6 +721,25 @@ const Emphasis = {
   low: 'low',
   high: 'high'
 };
+/**
+ * List of typographies that can't be customized.
+ */
+const TypographyInterface = {
+  overline: 'overline',
+  caption: 'caption',
+  body1: 'body1',
+  body2: 'body2',
+  subtitle1: 'subtitle1',
+  subtitle2: 'subtitle2',
+  title: 'title',
+  headline: 'headline',
+  display1: 'display1'
+};
+/**
+ * List of all typographies.
+ */
+const Typography = {
+  ...TypographyInterface};
 /**
  * Semantic info about the purpose of the component
  */
@@ -867,12 +754,88 @@ const Kind = {
  */
 const ColorPalette = {
   primary: 'primary',
+  blue: 'blue',
   dark: 'dark',
+  green: 'green',
   yellow: 'yellow',
+  red: 'red',
   light: 'light'};
 
 /** ColorPalette with all possible color variant combination */
 
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var classnames$1 = {exports: {}};
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+var hasRequiredClassnames;
+
+function requireClassnames () {
+	if (hasRequiredClassnames) return classnames$1.exports;
+	hasRequiredClassnames = 1;
+	(function (module) {
+		/* global define */
+
+		(function () {
+
+			var hasOwn = {}.hasOwnProperty;
+
+			function classNames() {
+				var classes = [];
+
+				for (var i = 0; i < arguments.length; i++) {
+					var arg = arguments[i];
+					if (!arg) continue;
+
+					var argType = typeof arg;
+
+					if (argType === 'string' || argType === 'number') {
+						classes.push(arg);
+					} else if (Array.isArray(arg)) {
+						if (arg.length) {
+							var inner = classNames.apply(null, arg);
+							if (inner) {
+								classes.push(inner);
+							}
+						}
+					} else if (argType === 'object') {
+						if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+							classes.push(arg.toString());
+							continue;
+						}
+
+						for (var key in arg) {
+							if (hasOwn.call(arg, key) && arg[key]) {
+								classes.push(key);
+							}
+						}
+					}
+				}
+
+				return classes.join(' ');
+			}
+
+			if (module.exports) {
+				classNames.default = classNames;
+				module.exports = classNames;
+			} else {
+				window.classNames = classNames;
+			}
+		}()); 
+	} (classnames$1));
+	return classnames$1.exports;
+}
+
+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];
@@ -923,6 +886,108 @@ function typography(typo) {
   return `lumx-typography-${typo}`;
 }
 
+/**
+ * Modifier
+ * @example { 'is-disabled': true, 'is-selected': false }
+ */
+
+/**
+ * Generates BEM modifier class names.
+ *
+ * @param baseName   The base BEM class to attach modifiers to.
+ * @param modifiers  Map of modifier names to boolean values.
+ * @returns Combined modifier class names string.
+ *
+ * @example
+ * modifier('button', { active: true }); // 'button--active'
+ * modifier('button', { active: true, disabled: false }); // 'button--active'
+ */
+function modifier$1(baseName, modifiers) {
+  const modifierClasses = [];
+  for (const [key, value] of Object.entries(modifiers)) {
+    if (value) modifierClasses.push(`${baseName}--${key}`);
+  }
+  return modifierClasses.join(' ');
+}
+
+/**
+ * Generates a BEM block + modifier class name string.
+ * Combines a base class with optional modifiers and additional classes.
+ *
+ * @param baseName   The base BEM class
+ * @param modifier   Optional modifiers
+ * @returns Combined class name string
+ *
+ * @example
+ * block('button'); // 'button'
+ * block('button', { active: true, disabled: false }); // 'button button--active'
+ */
+
+function block$$(baseName, modifiersOrAdditionalClasses, additionalClasses) {
+  let modifiers;
+  let classes;
+  if (Array.isArray(modifiersOrAdditionalClasses)) {
+    classes = modifiersOrAdditionalClasses;
+  } else {
+    modifiers = modifiersOrAdditionalClasses;
+    classes = additionalClasses;
+  }
+  if (!modifiers && !classes) {
+    return baseName;
+  }
+  return classnames(
+  // Additional classes
+  classes,
+  // Base class
+  baseName,
+  // Modifier(s)
+  modifiers ? modifier$1(baseName, modifiers) : null);
+}
+
+/**
+ * Creates a BEM element class generator function for the given base class.
+ * Returns a function that generates BEM element class names with optional modifiers.
+ *
+ * @param baseClass  The base BEM block class name (e.g., 'button', 'card')
+ * @param elem       The BEM element name (e.g., 'icon', 'title')
+ * @param modifier   Optional BEM modifier ()
+ * @returns combined BEM element class name
+ *
+ * @example
+ * element('my-button', 'icon'); // 'my-button__icon'
+ * element('my-button', 'icon', { active: true }); // 'my-button__icon my-button__icon--active'
+ */
+
+function element$K(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
+  if (Array.isArray(modifiersOrAdditionalClasses)) {
+    return block$$(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
+  }
+  return block$$(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
+}
+
+/**
+ * Setup BEM block & element generation for a given base name.
+ */
+function bem(baseName) {
+  function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
+    if (Array.isArray(modifiersOrAdditionalClasses)) {
+      return block$$(baseName, modifiersOrAdditionalClasses);
+    }
+    return block$$(baseName, modifiersOrAdditionalClasses, additionalClasses);
+  }
+  function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
+    if (Array.isArray(modifiersOrAdditionalClasses)) {
+      return element$K(baseName, elem, modifiersOrAdditionalClasses);
+    }
+    return element$K(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
+  }
+  return {
+    block: blockFn,
+    element: elementFn,
+    modifier: modifiers => modifier$1(baseName, modifiers)
+  };
+}
+
 /**
  * Render clickable element (link, button or custom element)
  * (also does some basic disabled state handling)
@@ -971,7 +1036,13 @@ const RawClickable$1 = props => {
  */
 const COMPONENT_NAME$1f = 'ButtonRoot';
 const BUTTON_WRAPPER_CLASSNAME = `lumx-button-wrapper`;
+const {
+  block: buttonWrapperBlock
+} = bem(BUTTON_WRAPPER_CLASSNAME);
 const BUTTON_CLASSNAME = `lumx-button`;
+const {
+  block: buttonBlock
+} = bem(BUTTON_CLASSNAME);
 
 /**
  * Render a button wrapper with the ButtonRoot inside.
@@ -987,12 +1058,11 @@ const renderButtonWrapper = props => {
     fullWidth
   } = props;
   const adaptedColor = emphasis === Emphasis.low && (color === ColorPalette.light ? ColorPalette.dark : ColorPalette.light);
-  const wrapperClassName = classnames(handleBasicClasses({
-    color: adaptedColor,
-    prefix: BUTTON_WRAPPER_CLASSNAME,
-    variant,
-    fullWidth
-  }));
+  const wrapperClassName = buttonWrapperBlock({
+    [`color-${adaptedColor}`]: Boolean(adaptedColor),
+    [`variant-${variant}`]: Boolean(variant),
+    'is-full-width': fullWidth
+  });
   const buttonProps = {
     ...props,
     hasBackground: false
@@ -1039,19 +1109,18 @@ const ButtonRoot = props => {
       color: adaptedColor
     });
   }
-  const buttonClassName = classnames(className, handleBasicClasses({
-    color: adaptedColor,
-    emphasis,
-    isSelected,
-    isDisabled: props.isDisabled || props['aria-disabled'],
-    isActive,
-    isFocused,
-    isHovered,
-    prefix: BUTTON_CLASSNAME,
-    size,
-    theme: emphasis === Emphasis.high && theme,
-    variant,
-    fullWidth
+  const buttonClassName = classnames(className, buttonBlock({
+    [`color-${adaptedColor}`]: Boolean(adaptedColor),
+    [`emphasis-${emphasis}`]: Boolean(emphasis),
+    'is-selected': isSelected,
+    'is-disabled': Boolean(props.isDisabled || props['aria-disabled']),
+    'is-active': isActive,
+    'is-focused': isFocused,
+    'is-hovered': isHovered,
+    [`size-${size}`]: Boolean(size),
+    [`theme-${theme}`]: Boolean(emphasis === Emphasis.high && theme),
+    [`variant-${variant}`]: Boolean(variant),
+    'is-full-width': fullWidth
   }));
   return RawClickable$1({
     as: linkAs || (forwardedProps.href ? 'a' : 'button'),
@@ -1079,6 +1148,9 @@ const COMPONENT_NAME$1e = 'Button';
  * Component default class name and class prefix.
  */
 const CLASSNAME$1c = 'lumx-button';
+const {
+  modifier
+} = bem(CLASSNAME$1c);
 
 /**
  * Component default props.
@@ -1103,14 +1175,9 @@ const Button$1 = props => {
     size = DEFAULT_PROPS$11.size,
     ...forwardedProps
   } = props;
-  const buttonClassName = classnames(className, getBasicClass({
-    prefix: CLASSNAME$1c,
-    type: 'hasLeftIcon',
-    value: !isEmpty(leftIcon)
-  }), getBasicClass({
-    prefix: CLASSNAME$1c,
-    type: 'hasRightIcon',
-    value: !isEmpty(rightIcon)
+  const buttonClassName = classnames(className, modifier({
+    'has-left-icon': Boolean(leftIcon),
+    'has-right-icon': Boolean(rightIcon)
   }));
   return ButtonRoot({
     emphasis,
@@ -1200,6 +1267,9 @@ const IconClassName = 'lumx-icon';
  */
 
 const CLASSNAME$1b = IconClassName;
+const {
+  block: block$_
+} = bem(CLASSNAME$1b);
 
 /**
  * Component default props.
@@ -1253,15 +1323,17 @@ const Icon$1 = props => {
   return /*#__PURE__*/jsx("i", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, handleBasicClasses({
-      color: iconColor,
-      colorVariant: iconColorVariant,
-      hasShape,
-      prefix: CLASSNAME$1b,
-      theme,
-      size: iconSize,
-      verticalAlign
-    }), !hasShape && `${CLASSNAME$1b}--no-shape`, !hasShape && iconColor === ColorPalette.yellow && icon === mdiAlertCircle && `${CLASSNAME$1b}--has-dark-layer`, `${CLASSNAME$1b}--path`),
+    className: classnames(className, block$_({
+      [`color-${iconColor}`]: Boolean(iconColor),
+      [`color-variant-${iconColorVariant}`]: Boolean(iconColorVariant),
+      'has-shape': hasShape,
+      [`theme-${theme}`]: Boolean(theme),
+      [`size-${iconSize}`]: Boolean(iconSize),
+      'no-shape': !hasShape,
+      'has-dark-layer': Boolean(!hasShape && iconColor === ColorPalette.yellow && icon === mdiAlertCircle),
+      path: true,
+      'vertical-align-middle': verticalAlign === 'middle'
+    })),
     children: /*#__PURE__*/jsx("svg", {
       "aria-hidden": alt ? undefined : 'true',
       role: alt ? 'img' : undefined,
@@ -1393,8 +1465,7 @@ const DEFAULT_PROPS$_ = {};
  * ButtonGroup component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return JSX element.
  */
 const ButtonGroup$1 = props => {
   const {
@@ -1444,6 +1515,10 @@ const COMPONENT_NAME$1a = 'Checkbox';
  * Component default class name and class prefix.
  */
 const CLASSNAME$18 = 'lumx-checkbox';
+const {
+  block: block$Z,
+  element: element$J
+} = classNames.bem(CLASSNAME$18);
 
 /**
  * Component default props.
@@ -1495,21 +1570,20 @@ const Checkbox = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
+    className: classNames.join(className, block$Z({
       // Whether state is intermediate class name will "-checked"
-      isChecked: intermediateState ? true : isChecked,
-      isDisabled: isAnyDisabled,
-      isUnchecked: !isChecked,
-      prefix: CLASSNAME$18,
-      theme
+      'is-checked': intermediateState ? true : isChecked,
+      'is-disabled': isAnyDisabled,
+      'is-unchecked': !isChecked,
+      [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME$18}__input-wrapper`,
+      className: element$J('input-wrapper'),
       children: [/*#__PURE__*/jsx("input", {
         ref: useMergeRefs(inputRef, localInputRef),
         type: "checkbox",
         id: inputId,
-        className: `${CLASSNAME$18}__input-native`,
+        className: element$J('input-native'),
         ...disabledStateProps,
         name: name,
         value: value,
@@ -1520,26 +1594,26 @@ const Checkbox = forwardRef((props, ref) => {
         readOnly: inputProps.readOnly || disabledStateProps['aria-disabled'],
         ...inputProps
       }), /*#__PURE__*/jsxs("div", {
-        className: `${CLASSNAME$18}__input-placeholder`,
+        className: element$J('input-placeholder'),
         children: [/*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$18}__input-background`
+          className: element$J('input-background')
         }), /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$18}__input-indicator`,
+          className: element$J('input-indicator'),
           children: /*#__PURE__*/jsx(Icon, {
             icon: intermediateState ? mdiMinus : mdiCheck
           })
         })]
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME$18}__content`,
+      className: element$J('content'),
       children: [label && /*#__PURE__*/jsx(InputLabel, {
         htmlFor: inputId,
-        className: `${CLASSNAME$18}__label`,
+        className: element$J('label'),
         theme: theme,
         children: label
       }), helper && /*#__PURE__*/jsx(InputHelper, {
         id: `${inputId}-helper`,
-        className: `${CLASSNAME$18}__helper`,
+        className: element$J('helper'),
         theme: theme,
         children: helper
       })]
@@ -1575,6 +1649,10 @@ const COMPONENT_NAME$19 = 'Chip';
  * Component default class name and class prefix.
  */
 const CLASSNAME$17 = 'lumx-chip';
+const {
+  block: block$Y,
+  element: element$I
+} = classNames.bem(CLASSNAME$17);
 
 /**
  * Component default props.
@@ -1640,17 +1718,16 @@ const Chip = forwardRef((props, ref) => {
       ...forwardedProps,
       href: !disabledStateProps.disabled ? href : undefined,
       ref: ref,
-      className: classNames.join(className, handleBasicClasses({
-        clickable: isClickable,
-        color: chipColor,
-        isDisabled: isAnyDisabled,
-        hasAfter: Boolean(after),
-        hasBefore: Boolean(before),
-        highlighted: Boolean(isHighlighted),
-        prefix: CLASSNAME$17,
-        selected: Boolean(isSelected),
-        size,
-        unselected: Boolean(!isSelected)
+      className: classNames.join(className, block$Y({
+        'is-clickable': isClickable,
+        [`color-${chipColor}`]: Boolean(chipColor),
+        'is-disabled': isAnyDisabled,
+        'has-after': Boolean(after),
+        'has-before': Boolean(before),
+        'is-highlighted': Boolean(isHighlighted),
+        'is-selected': Boolean(isSelected),
+        [`size-${size}`]: Boolean(size),
+        'is-unselected': Boolean(!isSelected)
       })),
       "aria-disabled": isClickable && isAnyDisabled || undefined,
       onClick: hasOnClick ? onClick : undefined,
@@ -1659,20 +1736,20 @@ 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: classNames.join(`${CLASSNAME$17}__before`, {
-          [`${CLASSNAME$17}__before--is-clickable`]: hasBeforeClick
+        className: element$I('before', {
+          'is-clickable': hasBeforeClick
         }),
         onClick: handleOnBeforeClick,
         children: before
       }), /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$17}__label`,
+        className: element$I('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: classNames.join(`${CLASSNAME$17}__after`, {
-          [`${CLASSNAME$17}__after--is-clickable`]: hasAfterClick
+        className: element$I('after', {
+          'is-clickable': hasAfterClick
         }),
         onClick: handleOnAfterClick,
         children: after
@@ -1799,6 +1876,10 @@ const COMPONENT_NAME$17 = 'CommentBlock';
  * Component default class name and class prefix.
  */
 const CLASSNAME$15 = 'lumx-comment-block';
+const {
+  block: block$X,
+  element: element$H
+} = classNames.bem(CLASSNAME$15);
 
 /**
  * Component default props.
@@ -1839,64 +1920,63 @@ const CommentBlock = forwardRef((props, ref) => {
   const hasChildren = Children.count(children) > 0;
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: classNames.join(className, handleBasicClasses({
-      hasChildren: hasChildren && isOpen,
-      hasIndentedChildren: hasChildren && variant === CommentBlockVariant.indented,
-      hasLinearChildren: hasChildren && variant === CommentBlockVariant.linear,
-      isRelevant,
-      prefix: CLASSNAME$15,
-      theme
+    className: classNames.join(className, block$X({
+      'has-children': hasChildren && isOpen,
+      'has-indented-children': hasChildren && variant === CommentBlockVariant.indented,
+      'has-linear-children': hasChildren && variant === CommentBlockVariant.linear,
+      'is-relevant': isRelevant,
+      [`theme-${theme}`]: Boolean(theme)
     })),
     ...forwardedProps,
     children: [/*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME$15}__wrapper`,
+      className: element$H('wrapper'),
       children: [/*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$15}__avatar`,
+        className: element$H('avatar'),
         children: /*#__PURE__*/jsx(Avatar, {
           ...avatarProps,
           size: Size$1.m,
           onClick: onClick
         })
       }), /*#__PURE__*/jsxs("div", {
-        className: `${CLASSNAME$15}__container`,
+        className: element$H('container'),
         children: [/*#__PURE__*/jsxs("div", {
-          className: `${CLASSNAME$15}__content`,
+          className: element$H('content'),
           children: [/*#__PURE__*/jsxs("div", {
-            className: `${CLASSNAME$15}__meta`,
+            className: element$H('meta'),
             children: [name &&
             /*#__PURE__*/
             // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
             jsx("span", {
-              className: `${CLASSNAME$15}__name`,
+              className: element$H('name'),
               onClick: onClick,
               onMouseEnter: onMouseEnter,
               onMouseLeave: onMouseLeave,
               children: name
             }), headerActions && /*#__PURE__*/jsx("span", {
-              className: `${CLASSNAME$15}__header-actions`,
+              className: element$H('header-actions'),
               children: headerActions
             })]
           }), /*#__PURE__*/jsx("div", {
-            className: `${CLASSNAME$15}__text`,
+            className: element$H('text'),
             children: text
           }), date && (fullDate ? /*#__PURE__*/jsx(Tooltip, {
             label: fullDate,
             placement: "top",
             children: /*#__PURE__*/jsx("span", {
-              className: `${CLASSNAME$15}__date`,
+              className: element$H('date'),
               children: date
             })
           }) : /*#__PURE__*/jsx("span", {
-            className: `${CLASSNAME$15}__date`,
+            className: element$H('date'),
             children: date
           }))]
         }), hasActions && /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$15}__actions`,
+          className: element$H('actions'),
           children: actions
         })]
       })]
     }), hasChildren && isOpen && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$15}__children`,
+      className: element$H('children'),
       children: children
     })]
   });
@@ -2146,6 +2226,14 @@ function formatDayNumber(locale, date) {
   return formattedDate;
 }
 
+const {
+  element: element$G
+} = classNames.bem(CLASSNAME$14);
+
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component display name.
  */
@@ -2237,7 +2325,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
     className: `${CLASSNAME$14}`,
     style: style,
     children: [/*#__PURE__*/jsx(Toolbar, {
-      className: `${CLASSNAME$14}__toolbar`,
+      className: element$G('toolbar'),
       after: /*#__PURE__*/jsx(IconButton, {
         ...nextButtonProps,
         emphasis: Emphasis$1.low,
@@ -2257,7 +2345,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
           dir: "auto",
           children: monthYear
         }), onMonthChange && /*#__PURE__*/jsx(FlexBox, {
-          className: `${CLASSNAME$14}__month`,
+          className: element$G('month'),
           orientation: "horizontal",
           hAlign: "center",
           gap: "regular",
@@ -2272,7 +2360,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
             min: 0,
             onBlur: updateYear,
             onKeyPress: updateYearOnEnterPressed,
-            className: `${CLASSNAME$14}__year`
+            className: element$G('year')
           }, "year") : /*#__PURE__*/jsx(Text, {
             as: "p",
             children: part
@@ -2280,17 +2368,17 @@ const DatePickerControlled = forwardRef((props, ref) => {
         })]
       })
     }), /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME$14}__calendar`,
+      className: element$G('calendar'),
       children: [/*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$14}__week-days ${CLASSNAME$14}__days-wrapper`,
+        className: classNames.join(element$G('week-days'), element$G('days-wrapper')),
         children: weekDays.map(({
           letter,
           number,
           long
         }) => /*#__PURE__*/jsxs("div", {
-          className: `${CLASSNAME$14}__day-wrapper`,
+          className: element$G('day-wrapper'),
           children: [/*#__PURE__*/jsx("span", {
-            className: `${CLASSNAME$14}__week-day`,
+            className: element$G('week-day'),
             "aria-hidden": true,
             children: letter.toLocaleUpperCase()
           }), /*#__PURE__*/jsx("span", {
@@ -2299,7 +2387,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
           })]
         }, number))
       }), /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$14}__month-days ${CLASSNAME$14}__days-wrapper`,
+        className: classNames.join(element$G('month-days'), element$G('days-wrapper')),
         children: weeks.flatMap((week, weekIndex) => {
           return weekDays.map((weekDay, dayIndex) => {
             const {
@@ -2310,11 +2398,11 @@ 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: `${CLASSNAME$14}__day-wrapper`,
+              className: element$G('day-wrapper'),
               children: date && /*#__PURE__*/jsxs(Button, {
                 ref: isSelected || !value && isToday ? todayOrSelectedDateRef : null,
-                className: classNames.join(`${CLASSNAME$14}__month-day`, {
-                  [`${CLASSNAME$14}__month-day--is-today`]: isToday
+                className: element$G('month-day', {
+                  'is-today': isToday
                 }),
                 disabled: isOutOfRange,
                 isSelected: isSelected,
@@ -2997,6 +3085,10 @@ const COMPONENT_NAME$13 = 'Dialog';
  * Component default class name and class prefix.
  */
 const CLASSNAME$13 = 'lumx-dialog';
+const {
+  block: block$W,
+  element: element$F
+} = classNames.bem(CLASSNAME$13);
 
 /**
  * Component default props.
@@ -3107,24 +3199,23 @@ const Dialog = forwardRef((props, ref) => {
     children: /*#__PURE__*/jsxs("div", {
       ref: mergeRefs(rootRef, ref),
       ...forwardedProps,
-      className: classNames.join(className, handleBasicClasses({
-        isHidden: !isOpen,
-        isLoading,
-        isShown: isOpen || isVisible,
-        prefix: CLASSNAME$13,
-        size
+      className: classNames.join(className, block$W({
+        'is-hidden': !isOpen,
+        'is-loading': isLoading,
+        'is-shown': isOpen || isVisible,
+        [`size-${size}`]: Boolean(size)
       })),
       style: {
         zIndex
       },
       children: [/*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$13}__overlay`
+        className: element$F('overlay')
       }), /*#__PURE__*/jsx(HeadingLevelProvider, {
         level: 2,
         children: /*#__PURE__*/jsx(ThemeProvider, {
           value: undefined,
           children: /*#__PURE__*/jsx("div", {
-            className: `${CLASSNAME$13}__container`,
+            className: element$F('container'),
             role: "dialog",
             "aria-modal": "true",
             ...dialogProps,
@@ -3133,28 +3224,36 @@ const Dialog = forwardRef((props, ref) => {
               childrenRefs: clickAwayRefs,
               parentRef: rootRef,
               children: /*#__PURE__*/jsxs("section", {
-                className: `${CLASSNAME$13}__wrapper`,
+                className: element$F('wrapper'),
                 ref: wrapperRef,
                 children: [(header || headerChildContent) && /*#__PURE__*/jsxs("header", {
                   ...headerChildProps,
-                  className: classNames.join(`${CLASSNAME$13}__header`, (forceHeaderDivider || hasTopIntersection) && `${CLASSNAME$13}__header--has-divider`, headerChildProps?.className),
+                  className: classNames.join(element$F('header', {
+                    'has-divider': Boolean(forceHeaderDivider || hasTopIntersection)
+                  }), headerChildProps?.className),
                   children: [header, headerChildContent]
                 }), /*#__PURE__*/jsxs("div", {
                   ref: mergeRefs(contentRef, localContentRef),
-                  className: `${CLASSNAME$13}__content`,
+                  className: element$F('content'),
                   children: [/*#__PURE__*/jsx("div", {
-                    className: `${CLASSNAME$13}__sentinel ${CLASSNAME$13}__sentinel--top`,
+                    className: element$F('sentinel', {
+                      top: true
+                    }),
                     ref: setSentinelTop
                   }), content, /*#__PURE__*/jsx("div", {
-                    className: `${CLASSNAME$13}__sentinel ${CLASSNAME$13}__sentinel--bottom`,
+                    className: element$F('sentinel', {
+                      bottom: true
+                    }),
                     ref: setSentinelBottom
                   })]
                 }), (footer || footerChildContent) && /*#__PURE__*/jsxs("footer", {
                   ...footerChildProps,
-                  className: classNames.join(`${CLASSNAME$13}__footer`, (forceFooterDivider || hasBottomIntersection) && `${CLASSNAME$13}__footer--has-divider`, footerChildProps?.className),
+                  className: classNames.join(element$F('footer', {
+                    'has-divider': Boolean(forceFooterDivider || hasBottomIntersection)
+                  }), footerChildProps?.className),
                   children: [footer, footerChildContent]
                 }), isLoading && /*#__PURE__*/jsx("div", {
-                  className: `${CLASSNAME$13}__progress-overlay`,
+                  className: element$F('progress-overlay'),
                   children: /*#__PURE__*/jsx(Progress, {
                     variant: ProgressVariant.circular
                   })
@@ -3180,6 +3279,9 @@ const COMPONENT_NAME$12 = 'Divider';
  * Component default class name and class prefix.
  */
 const CLASSNAME$12 = 'lumx-divider';
+const {
+  block: block$V
+} = classNames.bem(CLASSNAME$12);
 
 /**
  * Component default props.
@@ -3203,9 +3305,8 @@ const Divider = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("hr", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$12,
-      theme
+    className: classNames.join(className, block$V({
+      [`theme-${theme}`]: Boolean(theme)
     }))
   });
 });
@@ -3222,6 +3323,9 @@ const COMPONENT_NAME$11 = 'DragHandle';
  * Component default class name and class prefix.
  */
 const CLASSNAME$11 = 'lumx-drag-handle';
+const {
+  block: block$U
+} = classNames.bem(CLASSNAME$11);
 
 /**
  * DragHandle component.
@@ -3240,9 +3344,8 @@ const DragHandle = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$11,
-      theme
+    className: classNames.join(className, block$U({
+      [`theme-${theme}`]: Boolean(theme)
     })),
     children: /*#__PURE__*/jsx(Icon, {
       icon: mdiDragVertical,
@@ -3427,6 +3530,9 @@ const COMPONENT_NAME$10 = 'List';
  * Component default class name and class prefix.
  */
 const CLASSNAME$10 = 'lumx-list';
+const {
+  block: block$T
+} = classNames.bem(CLASSNAME$10);
 
 /**
  * Component default props.
@@ -3453,11 +3559,11 @@ const InternalList = forwardRef((props, ref) => {
     tabIndex = DEFAULT_PROPS$T.tabIndex,
     ...forwardedProps
   } = props;
+  const adjustedItemPadding = itemPadding ?? (isClickable ? Size$1.big : undefined);
   return /*#__PURE__*/jsx("ul", {
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$10,
-      itemPadding: itemPadding ?? (isClickable ? Size$1.big : undefined)
+    className: classNames.join(className, block$T({
+      [`item-padding-${adjustedItemPadding}`]: Boolean(adjustedItemPadding)
     })),
     tabIndex: tabIndex,
     ref: ref,
@@ -5903,6 +6009,10 @@ const COMPONENT_NAME$$ = 'Popover';
  * Component default class name and class prefix.
  */
 const CLASSNAME$$ = 'lumx-popover';
+const {
+  block: block$S,
+  element: element$E
+} = classNames.bem(CLASSNAME$$);
 
 /**
  * Component default props.
@@ -5977,17 +6087,17 @@ const _InnerPopover = forwardRef((props, ref) => {
   useFocusTrap(withFocusTrap && isOpen && focusZoneElement, focusElement?.current);
   const clickAwayRefs = useRef([popoverRef, anchorRef]);
   const mergedRefs = useMergeRefs(setPopperElement, ref, popoverRef);
+  const adjustedElevation = Math.min(elevation || 0, 5);
   return isOpen ? /*#__PURE__*/jsx(Portal, {
     enabled: usePortal,
     children: /*#__PURE__*/jsxs(Component, {
       ...forwardedProps,
       ref: mergedRefs,
-      className: classNames.join(className, handleBasicClasses({
-        prefix: CLASSNAME$$,
-        theme,
-        elevation: Math.min(elevation || 0, 5),
-        position,
-        isInitializing: !styles.popover?.transform
+      className: classNames.join(className, block$S({
+        [`theme-${theme}`]: Boolean(theme),
+        [`elevation-${adjustedElevation}`]: Boolean(adjustedElevation),
+        [`position-${position}`]: Boolean(position),
+        'is-initializing': !styles.popover?.transform
       })),
       style: styles.popover,
       ...attributes.popper,
@@ -5996,7 +6106,7 @@ const _InnerPopover = forwardRef((props, ref) => {
         childrenRefs: clickAwayRefs,
         children: [hasArrow && /*#__PURE__*/jsx("div", {
           ref: setArrowElement,
-          className: `${CLASSNAME$$}__arrow`,
+          className: element$E('arrow'),
           style: styles.arrow,
           children: /*#__PURE__*/jsx("svg", {
             viewBox: "0 0 14 14",
@@ -6079,6 +6189,10 @@ const COMPONENT_NAME$_ = 'Dropdown';
  * Component default class name and class prefix.
  */
 const CLASSNAME$_ = 'lumx-dropdown';
+const {
+  block: block$R,
+  element: element$D
+} = classNames.bem(CLASSNAME$_);
 
 /**
  * Component default props.
@@ -6142,7 +6256,7 @@ const Dropdown = forwardRef((props, ref) => {
     ...forwardedProps,
     focusAnchorOnClose: focusAnchorOnClose,
     anchorRef: anchorRef,
-    className: classNames.join(className, CLASSNAME$_),
+    className: classNames.join(className, block$R()),
     elevation: 0,
     closeOnClickAway: closeOnClickAway,
     closeOnEscape: closeOnEscape,
@@ -6155,7 +6269,7 @@ const Dropdown = forwardRef((props, ref) => {
     placement: placement,
     zIndex: zIndex,
     children: /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$_}__menu`,
+      className: element$D('menu'),
       ref: innerRef,
       children: popperElement
     })
@@ -6174,6 +6288,10 @@ const COMPONENT_NAME$Z = 'ExpansionPanel';
  * Component default class name and class prefix.
  */
 const CLASSNAME$Z = 'lumx-expansion-panel';
+const {
+  block: block$Q,
+  element: element$C
+} = classNames.bem(CLASSNAME$Z);
 
 /**
  * Component default props.
@@ -6217,7 +6335,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: `${CLASSNAME$Z}__label`,
+    className: element$C('label'),
     children: label
   });
   const toggleOpen = event => {
@@ -6233,15 +6351,14 @@ const ExpansionPanel = forwardRef((props, ref) => {
     }
   };
   const color = theme === Theme$1.dark ? ColorPalette$1.light : ColorPalette$1.dark;
-  const rootClassName = classNames.join(className, handleBasicClasses({
-    hasBackground,
-    hasHeader: Boolean(!isEmpty(headerProps.children)),
-    hasHeaderDivider,
-    isClose: !isOpen,
-    isDraggable: Boolean(dragHandle),
-    isOpen,
-    prefix: CLASSNAME$Z,
-    theme
+  const rootClassName = classNames.join(className, block$Q({
+    'has-background': hasBackground,
+    'has-header': Boolean(!isEmpty(headerProps.children)),
+    'has-header-divider': hasHeaderDivider,
+    'is-close': !isOpen,
+    'is-draggable': Boolean(dragHandle),
+    'is-open': isOpen,
+    [`theme-${theme}`]: Boolean(theme)
   }));
   const wrapperRef = useRef(null);
 
@@ -6277,17 +6394,17 @@ const ExpansionPanel = forwardRef((props, ref) => {
     ...forwardedProps,
     className: rootClassName,
     children: [/*#__PURE__*/jsxs("header", {
-      className: `${CLASSNAME$Z}__header`,
+      className: element$C('header'),
       onClick: toggleOpen,
       children: [dragHandle && /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$Z}__header-drag`,
+        className: element$C('header-drag'),
         children: dragHandle
       }), /*#__PURE__*/jsx("div", {
         ...headerProps,
-        className: `${CLASSNAME$Z}__header-content`,
+        className: element$C('header-content'),
         children: headerContent
       }), /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$Z}__header-toggle`,
+        className: element$C('header-toggle'),
         children: /*#__PURE__*/jsx(IconButton, {
           ...toggleButtonProps,
           color: color,
@@ -6297,15 +6414,15 @@ const ExpansionPanel = forwardRef((props, ref) => {
         })
       })]
     }), /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$Z}__wrapper`,
+      className: element$C('wrapper'),
       ref: wrapperRef,
       children: (isOpen || isChildrenVisible) && /*#__PURE__*/jsxs("div", {
-        className: `${CLASSNAME$Z}__container`,
+        className: element$C('container'),
         children: [/*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$Z}__content`,
+          className: element$C('content'),
           children: content
         }), footer && /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$Z}__footer`,
+          className: element$C('footer'),
           children: footer
         })]
       })
@@ -6319,47 +6436,69 @@ ExpansionPanel.defaultProps = DEFAULT_PROPS$Q;
 const COMPONENT_NAME$Y = 'Flag';
 const CLASSNAME$Y = 'lumx-flag';
 const DEFAULT_PROPS$P = {};
+const {
+  block: block$P,
+  element: element$B
+} = bem(CLASSNAME$Y);
 
 /**
  * Flag component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return JSX element.
  */
-const Flag = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
+const Flag$1 = (props, nestedComponents) => {
   const {
-    label,
+    Text
+  } = nestedComponents || {};
+  const {
+    children,
     icon,
     color,
     className,
-    theme = defaultTheme,
+    theme,
     truncate,
     ...forwardedProps
   } = props;
-  const flagColor = color || (theme === Theme$1.light ? ColorPalette$1.dark : ColorPalette$1.light);
+  const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
   const isTruncated = !!truncate;
   return /*#__PURE__*/jsxs("div", {
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$Y,
-      color: flagColor,
-      isTruncated
+    className: classnames(className, block$P({
+      [`color-${flagColor}`]: Boolean(flagColor),
+      'is-truncated': isTruncated
     })),
-    ref: ref,
-    children: [icon && /*#__PURE__*/jsx(Icon, {
-      icon: icon,
-      size: Size$1.xxs,
-      className: `${CLASSNAME$Y}__icon`
+    children: [icon && Icon$1({
+      icon,
+      size: Size.xxs,
+      className: element$B('icon')
     }), /*#__PURE__*/jsx(Text, {
       as: "span",
-      truncate: isTruncated,
+      truncate: !!props.truncate,
       typography: "overline",
-      className: `${CLASSNAME$Y}__label`,
-      children: label
+      className: element$B('label'),
+      children: children
     })]
   });
+};
+
+/**
+ * Flag component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Flag = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  return Flag$1({
+    ...props,
+    theme: props.theme || defaultTheme,
+    ref,
+    children: props.label
+  }, {
+    Text
+  });
 });
 Flag.displayName = COMPONENT_NAME$Y;
 Flag.className = CLASSNAME$Y;
@@ -6374,6 +6513,9 @@ const COMPONENT_NAME$X = 'FlexBox';
  * Component default class name and class prefix.
  */
 const CLASSNAME$X = 'lumx-flex-box';
+const {
+  block: block$O
+} = classNames.bem(CLASSNAME$X);
 
 /**
  * FlexBox component.
@@ -6392,21 +6534,25 @@ const FlexBox = forwardRef((props, ref) => {
     hAlign,
     marginAuto,
     noShrink,
-    orientation,
     vAlign,
     wrap,
+    orientation,
     ...forwardedProps
   } = props;
+  const adjustedOrientation = orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null);
   return /*#__PURE__*/jsx(Component, {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$X,
-      orientation: orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null),
-      vAlign,
-      hAlign,
-      gap
-    }), wrap && `${CLASSNAME$X}--wrap`, fillSpace && `${CLASSNAME$X}--fill-space`, noShrink && `${CLASSNAME$X}--no-shrink`, marginAuto && castArray(marginAuto).map(align => `${CLASSNAME$X}--margin-auto-${align}`)),
+    className: classNames.join(className, block$O({
+      [`orientation-${adjustedOrientation}`]: Boolean(adjustedOrientation),
+      [`v-align-${vAlign}`]: Boolean(vAlign),
+      [`h-align-${hAlign}`]: Boolean(hAlign),
+      [`gap-${gap}`]: Boolean(gap),
+      wrap: Boolean(wrap),
+      'fill-space': fillSpace,
+      'no-shrink': noShrink,
+      ...Object.fromEntries(castArray(marginAuto).filter(Boolean).map(align => [`margin-auto-${align}`, true]))
+    })),
     children: children
   });
 });
@@ -6422,6 +6568,10 @@ const COMPONENT_NAME$W = 'GenericBlock';
  * Component default class name and class prefix.
  */
 const CLASSNAME$W = 'lumx-generic-block';
+const {
+  block: block$N,
+  element: element$A
+} = classNames.bem(CLASSNAME$W);
 
 /**
  * Component default props.
@@ -6476,7 +6626,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
   }, [children]);
   return /*#__PURE__*/jsxs(FlexBox, {
     ref: ref,
-    className: classNames.join(className, CLASSNAME$W),
+    className: classNames.join(className, block$N()),
     gap: gap,
     orientation: orientation,
     ...forwardedProps,
@@ -6486,7 +6636,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       hAlign: forwardedProps.hAlign,
       ...figureProps,
       ...sections.figureChildProps,
-      className: classNames.join(figureProps?.className, sections.figureChildProps?.className, `${CLASSNAME$W}__figure`),
+      className: classNames.join(figureProps?.className, sections.figureChildProps?.className, element$A('figure')),
       children: [figure, sections.figureChildProps?.children]
     }), (sections.contentChildProps?.children || sections.otherChildren.length > 0) && /*#__PURE__*/jsxs(FlexBox, {
       ref: sections.contentChild?.ref,
@@ -6496,7 +6646,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       hAlign: forwardedProps.hAlign,
       ...contentProps,
       ...sections.contentChildProps,
-      className: classNames.join(contentProps?.className, sections.contentChildProps?.className, `${CLASSNAME$W}__content`),
+      className: classNames.join(contentProps?.className, sections.contentChildProps?.className, element$A('content')),
       children: [sections.contentChildProps?.children, sections.otherChildren]
     }), (actions || sections.actionsChildProps?.children) && /*#__PURE__*/jsxs(FlexBox, {
       ref: sections.actionsChild?.ref,
@@ -6504,7 +6654,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       hAlign: forwardedProps.hAlign,
       ...actionsProps,
       ...sections.actionsChildProps,
-      className: classNames.join(actionsProps?.className, sections.actionsChildProps?.className, `${CLASSNAME$W}__actions`),
+      className: classNames.join(actionsProps?.className, sections.actionsChildProps?.className, element$A('actions')),
       children: [actions, sections.actionsChildProps?.children]
     })]
   });
@@ -6523,6 +6673,67 @@ const GenericBlock = Object.assign(BaseGenericBlock, {
  */
 const GenericBlockGapSize = pick(Size$1, ['tiny', 'regular', 'medium', 'big', 'huge']);
 
+/** The maximum authorized heading level. */
+const MAX_HEADING_LEVEL = 6;
+
+/**
+ * Typography to use by default depending on the heading level.
+ */
+const DEFAULT_TYPOGRAPHY_BY_LEVEL = {
+  h1: Typography.display1,
+  h2: Typography.headline,
+  h3: Typography.title,
+  h4: Typography.subtitle2,
+  h5: Typography.subtitle1,
+  h6: Typography.body2
+};
+const defaultContext = {
+  level: 1,
+  headingElement: 'h1'
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$V = 'Heading';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$V = 'lumx-heading';
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$N = {};
+
+/**
+ * Get Heading component common props
+ *
+ * @param props                 Component props.
+ * @param contextHeadingElement Heading element from context.
+ * @return Common Props
+ */
+const getHeadingProps = (props, contextHeadingElement) => {
+  const {
+    as,
+    className,
+    typography,
+    ...otherProps
+  } = props;
+  const computedHeadingElement = as || contextHeadingElement || 'h1';
+  return {
+    ...otherProps,
+    as: computedHeadingElement,
+    className: classnames(className, CLASSNAME$V),
+    typography: typography || DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]
+  };
+};
+
 const DEFAULT_VALUE = {};
 
 /**
@@ -6586,17 +6797,20 @@ function wrapChildrenIconWithSpaces(children) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$V = 'Text';
+const COMPONENT_NAME$U = 'Text';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$V = 'lumx-text';
+const CLASSNAME$U = 'lumx-text';
+const {
+  block: block$M
+} = bem(CLASSNAME$U);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$N = {};
+const DEFAULT_PROPS$M = {};
 
 /**
  * Text component common props
@@ -6632,11 +6846,11 @@ const getTextProps = props => {
     '--lumx-text-white-space': whiteSpace
   };
   return {
-    className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$V,
-      isTruncated: isTruncated && !isTruncatedMultiline,
-      isTruncatedMultiline
-    }), typography$1 && typography(typography$1), color && font(color, colorVariant), noWrap && `${CLASSNAME$V}--no-wrap`),
+    className: classnames(className, block$M({
+      'is-truncated': isTruncated && !isTruncatedMultiline,
+      'is-truncated-multiline': isTruncatedMultiline,
+      'no-wrap': noWrap
+    }), typography$1 && typography(typography$1), color && font(color, colorVariant)),
     style: {
       ...truncateLinesStyle,
       ...whiteSpaceStyle,
@@ -6681,29 +6895,10 @@ const Text = forwardRef((props, ref) => {
     children: wrapChildrenIconWithSpaces(children)
   });
 });
-Text.displayName = COMPONENT_NAME$V;
-Text.className = CLASSNAME$V;
-Text.defaultProps = DEFAULT_PROPS$N;
-
-/** The maximum authorized heading level. */
-const MAX_HEADING_LEVEL = 6;
-
-/**
- * Typography to use by default depending on the heading level.
- */
-const DEFAULT_TYPOGRAPHY_BY_LEVEL = {
-  h1: Typography.display1,
-  h2: Typography.headline,
-  h3: Typography.title,
-  h4: Typography.subtitle2,
-  h5: Typography.subtitle1,
-  h6: Typography.body2
-};
+Text.displayName = COMPONENT_NAME$U;
+Text.className = CLASSNAME$U;
+Text.defaultProps = DEFAULT_PROPS$M;
 
-const defaultContext = {
-  level: 1,
-  headingElement: 'h1'
-};
 const HeadingLevelContext = /*#__PURE__*/createContext(defaultContext);
 
 const useHeadingLevel = () => {
@@ -6717,21 +6912,6 @@ const useHeadingLevel = () => {
   };
 };
 
-/**
- * Component display name.
- */
-const COMPONENT_NAME$U = 'Heading';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$U = 'lumx-heading';
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$M = {};
-
 /**
  * Renders a heading component.
  * Extends the `Text` Component with the heading level automatically computed based on
@@ -6740,26 +6920,33 @@ const DEFAULT_PROPS$M = {};
 const Heading = forwardRef((props, ref) => {
   const {
     children,
-    as,
-    className,
-    ...forwardedProps
+    ...otherProps
   } = props;
   const {
     headingElement
   } = useHeadingLevel();
-  const computedHeadingElement = as || headingElement;
+  const headingProps = getHeadingProps(otherProps, headingElement);
   return /*#__PURE__*/jsx(Text, {
     ref: ref,
-    className: classNames.join(className, CLASSNAME$U),
-    as: computedHeadingElement,
-    typography: DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement],
-    ...forwardedProps,
+    ...headingProps,
     children: children
   });
 });
-Heading.displayName = COMPONENT_NAME$U;
-Heading.className = CLASSNAME$U;
-Heading.defaultProps = DEFAULT_PROPS$M;
+Heading.displayName = COMPONENT_NAME$V;
+Heading.className = CLASSNAME$V;
+Heading.defaultProps = DEFAULT_PROPS$N;
+
+/**
+ * Computes the next heading level based on the optional prop level or the parent context level.
+ *
+ * @param levelProp - The explicit level provided via props (optional).
+ * @param parentLevel - The level from the parent context.
+ * @returns The calculated heading level, clamped to the maximum allowed level.
+ */
+const computeHeadingLevel = (levelProp, parentLevel) => {
+  const nextLevel = levelProp || parentLevel + 1;
+  return nextLevel > MAX_HEADING_LEVEL ? MAX_HEADING_LEVEL : nextLevel;
+};
 
 /**
  * Provide a new heading level context.
@@ -6771,9 +6958,7 @@ const HeadingLevelProvider = ({
   const {
     level: contextLevel
   } = useHeadingLevel();
-  const incrementedLevel = level || contextLevel + 1;
-  /** Don't allow a level beyond the maximum level. */
-  const nextLevel = incrementedLevel > MAX_HEADING_LEVEL ? MAX_HEADING_LEVEL : incrementedLevel;
+  const nextLevel = computeHeadingLevel(level, contextLevel);
   const headingElement = `h${nextLevel}`;
   return /*#__PURE__*/jsx(HeadingLevelContext.Provider, {
     value: {
@@ -6793,6 +6978,9 @@ const COMPONENT_NAME$T = 'Grid';
  * Component default class name and class prefix.
  */
 const CLASSNAME$T = 'lumx-grid';
+const {
+  block: block$L
+} = classNames.bem(CLASSNAME$T);
 
 /**
  * Component default props.
@@ -6823,15 +7011,12 @@ const Grid = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, `${CLASSNAME$T}-container`, {
-      [`${CLASSNAME$T}--h-align-${hAlign}`]: hAlign
-    }, {
-      [`${CLASSNAME$T}--v-align-${vAlign}`]: vAlign
-    }, handleBasicClasses({
-      prefix: CLASSNAME$T,
-      orientation,
-      wrap,
-      gutter
+    className: classNames.join(className, classNames.bem(`${CLASSNAME$T}-container`).block(), block$L({
+      [`h-align-${hAlign}`]: Boolean(hAlign),
+      [`v-align-${vAlign}`]: Boolean(vAlign),
+      [`orientation-${orientation}`]: Boolean(orientation),
+      [`wrap-${wrap}`]: Boolean(wrap),
+      [`gutter-${gutter}`]: Boolean(gutter)
     })),
     children: children
   });
@@ -6849,6 +7034,9 @@ const COMPONENT_NAME$S = 'GridItem';
  * Component default class name and class prefix.
  */
 const CLASSNAME$S = 'lumx-grid-item';
+const {
+  block: block$K
+} = classNames.bem(CLASSNAME$S);
 
 /**
  * GridItem component.
@@ -6869,11 +7057,10 @@ const GridItem = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$S,
-      width,
-      order,
-      align
+    className: classNames.join(className, block$K({
+      [`width-${width}`]: Boolean(width),
+      [`order-${order}`]: Boolean(order),
+      [`align-${align}`]: Boolean(align)
     })),
     children: children
   });
@@ -7041,6 +7228,10 @@ const COMPONENT_NAME$Q = 'ImageBlock';
  * Component default class name and class prefix.
  */
 const CLASSNAME$Q = 'lumx-image-block';
+const {
+  block: block$J,
+  element: element$z
+} = classNames.bem(CLASSNAME$Q);
 
 /**
  * Component default props.
@@ -7081,16 +7272,16 @@ const ImageBlock = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("figure", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$Q,
-      captionPosition,
-      align,
-      size,
-      theme
-    }), fillHeight && `${CLASSNAME$Q}--fill-height`),
+    className: classNames.join(className, block$J({
+      [`caption-position-${captionPosition}`]: Boolean(captionPosition),
+      [`align-${align}`]: Boolean(align),
+      [`size-${size}`]: Boolean(size),
+      [`theme-${theme}`]: Boolean(theme),
+      'fill-height': fillHeight
+    })),
     children: [/*#__PURE__*/jsx(Thumbnail, {
       ...thumbnailProps,
-      className: classNames.join(`${CLASSNAME$Q}__image`, thumbnailProps?.className),
+      className: classNames.join(element$z('image'), thumbnailProps?.className),
       fillHeight: fillHeight,
       align: align,
       image: image,
@@ -7110,7 +7301,7 @@ const ImageBlock = forwardRef((props, ref) => {
       align: align,
       truncate: captionPosition === 'over'
     }), actions && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$Q}__actions`,
+      className: element$z('actions'),
       children: actions
     })]
   });
@@ -7371,6 +7562,9 @@ function useAnimateScroll(scrollAreaRef) {
   }, [scrollAreaRef]);
 }
 
+const {
+  element: element$y
+} = classNames.bem(CLASSNAME$P);
 /** Internal image slide component for ImageLightbox */
 const ImageSlide = /*#__PURE__*/React__default.memo(props => {
   const {
@@ -7437,12 +7631,12 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
     // Make it accessible to keyboard nav when the zone is scrollable
     ,
     tabIndex: isScrollable ? 0 : undefined,
-    className: `${CLASSNAME$P}__image-slide`,
+    className: element$y('image-slide'),
     children: /*#__PURE__*/jsx(Thumbnail, {
       imgRef: useMergeRefs(imgRef, propImgRef),
       image: image,
       alt: alt,
-      className: `${CLASSNAME$P}__thumbnail`,
+      className: element$y('thumbnail'),
       imgProps: {
         ...imgProps,
         style: {
@@ -7460,6 +7654,9 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
   });
 }, isEqual);
 
+const {
+  element: element$x
+} = classNames.bem(CLASSNAME$P);
 /** Internal image slideshow component for ImageLightbox */
 const ImageSlideshow = ({
   activeImageIndex,
@@ -7580,12 +7777,12 @@ const ImageSlideshow = ({
       })
     }), (metadata || slideShowControls || zoomControls) && /*#__PURE__*/jsxs(FlexBox, {
       ref: footerRef,
-      className: `${CLASSNAME$P}__footer`,
+      className: element$x('footer'),
       orientation: "vertical",
       vAlign: "center",
       gap: "big",
       children: [metadata, /*#__PURE__*/jsxs(FlexBox, {
-        className: `${CLASSNAME$P}__footer-actions`,
+        className: element$x('footer-actions'),
         orientation: "horizontal",
         gap: "regular",
         children: [slideShowControls, zoomControls]
@@ -7863,6 +8060,10 @@ const COMPONENT_NAME$O = 'InlineList';
  * Component default class name and class prefix.
  */
 const CLASSNAME$O = 'lumx-inline-list';
+const {
+  block: block$I,
+  element: element$w
+} = classNames.bem(CLASSNAME$O);
 
 /**
  * Component default props.
@@ -7892,7 +8093,9 @@ const InlineList = forwardRef((props, ref) => {
     jsx("ul", {
       ...forwardedProps,
       ref: ref,
-      className: classNames.join(className, CLASSNAME$O, wrap && `${CLASSNAME$O}--wrap`, color && classNames.font(color, colorVariant), typography && classNames.typography(typography))
+      className: classNames.join(className, block$I({
+        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
       ,
       role: "list",
@@ -7904,9 +8107,9 @@ const InlineList = forwardRef((props, ref) => {
           // eslint-disable-next-line jsx-a11y/no-redundant-roles
           jsxs("li", {
             role: "listitem",
-            className: `${CLASSNAME$O}__item`,
+            className: element$w('item'),
             children: [index !== 0 && /*#__PURE__*/jsx("span", {
-              className: `${CLASSNAME$O}__item-separator`,
+              className: element$w('item-separator'),
               "aria-hidden": "true",
               children: '\u00A0•\u00A0'
             }), child]
@@ -7940,6 +8143,9 @@ const InputHelperClassName = 'lumx-input-helper';
  */
 
 const CLASSNAME$N = InputHelperClassName;
+const {
+  block: block$H
+} = bem(CLASSNAME$N);
 
 /**
  * Component default props.
@@ -7966,10 +8172,9 @@ function InputHelper$1(props) {
   return /*#__PURE__*/jsx("p", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$N,
-      color,
-      theme
+    className: classnames(className, block$H({
+      [`color-${color}`]: Boolean(color),
+      [`theme-${theme}`]: Boolean(theme)
     })),
     children: children
   });
@@ -8000,6 +8205,9 @@ 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 = {};
 
 /**
@@ -8020,11 +8228,10 @@ function InputLabel$1(props) {
     ref: ref,
     ...forwardedProps,
     htmlFor: htmlFor,
-    className: classnames(className, handleBasicClasses({
-      prefix: CLASSNAME$M,
-      isRequired,
-      theme,
-      hasCustomTypography: Boolean(typography$1)
+    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
   });
@@ -8061,6 +8268,10 @@ const COMPONENT_NAME$L = 'Lightbox';
  * Component default class name and class prefix.
  */
 const CLASSNAME$L = 'lumx-lightbox';
+const {
+  block: block$F,
+  element: element$v
+} = classNames.bem(CLASSNAME$L);
 
 /**
  * Lightbox component.
@@ -8144,17 +8355,16 @@ const Lightbox = forwardRef((props, ref) => {
       "aria-modal": "true",
       role: "dialog",
       tabIndex: -1,
-      className: classNames.join(className, handleBasicClasses({
-        prefix: CLASSNAME$L,
-        isHidden: !isOpen,
-        isShown: isOpen || isVisible,
-        theme
+      className: classNames.join(className, block$F({
+        'is-hidden': !isOpen,
+        'is-shown': isOpen || isVisible,
+        [`theme-${theme}`]: Boolean(theme)
       })),
       style: {
         zIndex
       },
       children: [closeButtonProps && /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$L}__close`,
+        className: element$v('close'),
         children: /*#__PURE__*/jsx(IconButton, {
           ...closeButtonProps,
           ref: closeButtonRef,
@@ -8174,7 +8384,7 @@ const Lightbox = forwardRef((props, ref) => {
             childrenRefs: clickAwayRefs,
             children: /*#__PURE__*/jsx("div", {
               ref: childrenRef,
-              className: `${CLASSNAME$L}__wrapper`,
+              className: element$v('wrapper'),
               role: "presentation",
               children: children
             })
@@ -8210,6 +8420,10 @@ const COMPONENT_NAME$K = 'Link';
  * Component default class name and class prefix.
  */
 const CLASSNAME$K = 'lumx-link';
+const {
+  block: block$E,
+  element: element$u
+} = classNames.bem(CLASSNAME$K);
 
 /**
  * Link component.
@@ -8240,22 +8454,21 @@ const Link = forwardRef((props, ref) => {
     as: linkAs || (forwardedProps.href ? 'a' : 'button'),
     ...forwardedProps,
     ...disabledStateProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$K,
-      color,
-      colorVariant,
-      hasTypography: !!typography
+    className: classNames.join(className, block$E({
+      [`color-${color}`]: Boolean(color),
+      [`color-variant-${colorVariant}`]: Boolean(colorVariant),
+      'has-typography': !!typography
     }), typography && classNames.typography(typography)),
     children: wrapChildrenIconWithSpaces(/*#__PURE__*/jsxs(Fragment, {
       children: [leftIcon && /*#__PURE__*/jsx(Icon, {
         icon: leftIcon,
-        className: `${CLASSNAME$K}__left-icon`
+        className: element$u('left-icon')
       }), children && /*#__PURE__*/jsx("span", {
-        className: `${CLASSNAME$K}__content`,
+        className: element$u('content'),
         children: children
       }), rightIcon && /*#__PURE__*/jsx(Icon, {
         icon: rightIcon,
-        className: `${CLASSNAME$K}__right-icon`
+        className: element$u('right-icon')
       })]
     }))
   });
@@ -8272,6 +8485,10 @@ const COMPONENT_NAME$J = 'LinkPreview';
  * Component default class name and class prefix.
  */
 const CLASSNAME$J = 'lumx-link-preview';
+const {
+  block: block$D,
+  element: element$t
+} = classNames.bem(CLASSNAME$J);
 
 /**
  * Component default props.
@@ -8305,18 +8522,18 @@ const LinkPreview = forwardRef((props, ref) => {
   } = props;
   // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
   const TitleHeading = titleHeading;
+  const adjustedSize = size === Size$1.big && thumbnailProps ? Size$1.big : Size$1.regular;
   return /*#__PURE__*/jsx("article", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$J,
-      size: size === Size$1.big && thumbnailProps ? Size$1.big : Size$1.regular,
-      theme
+    className: classNames.join(className, block$D({
+      [`size-${adjustedSize}`]: Boolean(adjustedSize),
+      [`theme-${theme}`]: Boolean(theme)
     })),
     children: /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME$J}__wrapper`,
+      className: element$t('wrapper'),
       children: [thumbnailProps && /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$J}__thumbnail`,
+        className: element$t('thumbnail'),
         children: /*#__PURE__*/jsx(Thumbnail, {
           ...thumbnailProps,
           linkAs: linkAs,
@@ -8331,9 +8548,9 @@ const LinkPreview = forwardRef((props, ref) => {
           fillHeight: true
         })
       }), /*#__PURE__*/jsxs("div", {
-        className: `${CLASSNAME$J}__container`,
+        className: element$t('container'),
         children: [title && /*#__PURE__*/jsx(TitleHeading, {
-          className: `${CLASSNAME$J}__title`,
+          className: element$t('title'),
           children: /*#__PURE__*/jsx(Link, {
             ...linkProps,
             linkAs: linkAs,
@@ -8344,14 +8561,14 @@ const LinkPreview = forwardRef((props, ref) => {
             children: title
           })
         }), description && /*#__PURE__*/jsx("p", {
-          className: `${CLASSNAME$J}__description`,
+          className: element$t('description'),
           children: description
         }), /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$J}__link`,
+          className: element$t('link'),
           children: /*#__PURE__*/jsx(Link, {
             ...linkProps,
             linkAs: linkAs,
-            className: classNames.join(`${CLASSNAME$J}__link`, linkProps?.className),
+            className: classNames.join(element$t('link'), linkProps?.className),
             target: "_blank",
             href: link,
             color: theme === Theme$1.light ? ColorPalette$1.primary : ColorPalette$1.light,
@@ -8393,6 +8610,10 @@ const COMPONENT_NAME$I = 'ListItem';
  * Component default class name and class prefix.
  */
 const CLASSNAME$I = 'lumx-list-item';
+const {
+  block: block$C,
+  element: element$s
+} = classNames.bem(CLASSNAME$I);
 
 /**
  * Component default props.
@@ -8447,22 +8668,21 @@ const ListItem = forwardRef((props, ref) => {
   }, [role, onItemSelected]);
   const content = /*#__PURE__*/jsxs(Fragment, {
     children: [before && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$I}__before`,
+      className: element$s('before'),
       children: before
     }), /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$I}__content`,
+      className: element$s('content'),
       children: children
     }), after && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$I}__after`,
+      className: element$s('after'),
       children: after
     })]
   });
   return /*#__PURE__*/jsx("li", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$I,
-      size
+    className: classNames.join(className, block$C({
+      [`size-${size}`]: Boolean(size)
     })),
     children: isClickable({
       linkProps,
@@ -8475,11 +8695,10 @@ const ListItem = forwardRef((props, ref) => {
       'aria-disabled': isAnyDisabled,
       ...linkProps,
       href: isAnyDisabled ? undefined : linkProps.href,
-      className: classNames.join(handleBasicClasses({
-        prefix: `${CLASSNAME$I}__link`,
-        isHighlighted,
-        isSelected,
-        isDisabled: isAnyDisabled
+      className: classNames.join(element$s('link', {
+        'is-highlighted': isHighlighted,
+        'is-selected': isSelected,
+        'is-disabled': isAnyDisabled
       })),
       onClick: isAnyDisabled ? undefined : onItemSelected,
       onKeyDown: isAnyDisabled ? undefined : onKeyDown,
@@ -8488,7 +8707,7 @@ const ListItem = forwardRef((props, ref) => {
     /*#__PURE__*/
     /* Non clickable list item */
     jsx("div", {
-      className: `${CLASSNAME$I}__wrapper`,
+      className: element$s('wrapper'),
       children: content
     })
   });
@@ -8570,25 +8789,29 @@ const COMPONENT_NAME$F = 'Message';
  * Component default class name and class prefix.
  */
 const CLASSNAME$F = 'lumx-message';
+const {
+  block: block$B,
+  element: element$r
+} = bem(CLASSNAME$F);
 
 /**
  * Associative map from message kind to color and icon.
  */
 const CONFIG = {
-  [Kind$1.error]: {
-    color: ColorPalette$1.red,
+  [Kind.error]: {
+    color: ColorPalette.red,
     icon: mdiAlert
   },
-  [Kind$1.info]: {
-    color: ColorPalette$1.blue,
+  [Kind.info]: {
+    color: ColorPalette.blue,
     icon: mdiInformation
   },
-  [Kind$1.success]: {
-    color: ColorPalette$1.green,
+  [Kind.success]: {
+    color: ColorPalette.green,
     icon: mdiCheckCircle
   },
-  [Kind$1.warning]: {
-    color: ColorPalette$1.yellow,
+  [Kind.warning]: {
+    color: ColorPalette.yellow,
     icon: mdiAlertCircle
   }
 };
@@ -8597,10 +8820,9 @@ const CONFIG = {
  * Message component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return JSX element.
  */
-const Message = forwardRef((props, ref) => {
+const Message$1 = props => {
   const {
     children,
     className,
@@ -8620,29 +8842,43 @@ const Message = forwardRef((props, ref) => {
   } = closeButtonProps || {};
   const isCloseButtonDisplayed = hasBackground && kind === 'info' && onClick && closeButtonLabel;
   return /*#__PURE__*/jsxs("div", {
-    ref: ref,
-    className: classNames.join(className, handleBasicClasses({
-      color,
-      hasBackground,
-      prefix: CLASSNAME$F
-    })),
     ...forwardedProps,
-    children: [(customIcon || icon) && /*#__PURE__*/jsx(Icon, {
-      className: `${CLASSNAME$F}__icon`,
+    className: classnames(className, block$B({
+      [`color-${color}`]: Boolean(color),
+      'has-background': hasBackground
+    })),
+    children: [(customIcon || icon) && Icon$1({
+      className: element$r('icon'),
       icon: customIcon || icon,
-      size: Size$1.xs,
-      color: color
+      size: Size.xs,
+      color
     }), /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$F}__text`,
+      className: element$r('text'),
       children: children
-    }), isCloseButtonDisplayed && /*#__PURE__*/jsx(IconButton, {
-      className: `${CLASSNAME$F}__close-button`,
+    }), isCloseButtonDisplayed && IconButton$1({
+      className: element$r('close-button'),
       icon: mdiClose,
-      onClick: onClick,
+      onClick,
       label: closeButtonLabel,
-      emphasis: Emphasis$1.low
+      emphasis: Emphasis.low
     })]
   });
+};
+Message$1.displayName = COMPONENT_NAME$F;
+Message$1.className = CLASSNAME$F;
+
+/**
+ * Message component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Message = forwardRef((props, ref) => {
+  return Message$1({
+    ...props,
+    ref
+  });
 });
 Message.displayName = COMPONENT_NAME$F;
 Message.className = CLASSNAME$F;
@@ -8656,6 +8892,10 @@ const COMPONENT_NAME$E = 'Mosaic';
  * Component default class name and class prefix.
  */
 const CLASSNAME$E = 'lumx-mosaic';
+const {
+  block: block$A,
+  element: element$q
+} = classNames.bem(CLASSNAME$E);
 
 /**
  * Component default props.
@@ -8688,17 +8928,15 @@ const Mosaic = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$E,
-      theme
-    }), {
-      [`${CLASSNAME$E}--has-1-thumbnail`]: thumbnails?.length === 1,
-      [`${CLASSNAME$E}--has-2-thumbnails`]: thumbnails?.length === 2,
-      [`${CLASSNAME$E}--has-3-thumbnails`]: thumbnails?.length === 3,
-      [`${CLASSNAME$E}--has-4-thumbnails`]: thumbnails?.length >= 4
-    }),
+    className: classNames.join(className, block$A({
+      [`theme-${theme}`]: Boolean(theme),
+      'has-1-thumbnail': thumbnails?.length === 1,
+      'has-2-thumbnails': thumbnails?.length === 2,
+      'has-3-thumbnails': thumbnails?.length === 3,
+      'has-4-thumbnails': thumbnails?.length >= 4
+    })),
     children: /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$E}__wrapper`,
+      className: element$q('wrapper'),
       children: take(thumbnails, 4).map((thumbnail, index) => {
         const {
           image,
@@ -8707,7 +8945,7 @@ const Mosaic = forwardRef((props, ref) => {
           ...thumbnailProps
         } = thumbnail;
         return /*#__PURE__*/jsxs("div", {
-          className: `${CLASSNAME$E}__thumbnail`,
+          className: element$q('thumbnail'),
           children: [/*#__PURE__*/jsx(Thumbnail, {
             ...thumbnailProps,
             align: align || Alignment.left,
@@ -8717,7 +8955,7 @@ const Mosaic = forwardRef((props, ref) => {
             fillHeight: true,
             onClick: handleImageClick?.(index, onClick) || onClick
           }), thumbnails.length > 4 && index === 3 && /*#__PURE__*/jsx("div", {
-            className: `${CLASSNAME$E}__overlay`,
+            className: element$q('overlay'),
             children: /*#__PURE__*/jsxs("span", {
               children: ["+", thumbnails.length - 4]
             })
@@ -8754,6 +8992,14 @@ const COMPONENT_NAME$D = 'NavigationSection';
  * Component default class name and class prefix.
  */
 const CLASSNAME$D = 'lumx-navigation-section';
+const {
+  block: sectionBlock,
+  element: sectionElement
+} = classNames.bem(CLASSNAME$D);
+const {
+  block: itemBlock,
+  element: itemElement
+} = classNames.bem(ITEM_CLASSNAME);
 const NavigationSection = forwardRef((props, ref) => {
   const {
     children,
@@ -8771,9 +9017,8 @@ const NavigationSection = forwardRef((props, ref) => {
   const theme = useTheme();
   const isDropdown = orientation === Orientation.horizontal;
   return /*#__PURE__*/jsxs("li", {
-    className: classNames.join(className, CLASSNAME$D, ITEM_CLASSNAME, handleBasicClasses({
-      prefix: ITEM_CLASSNAME,
-      theme
+    className: classNames.join(className, sectionBlock(), itemBlock({
+      [`theme-${theme}`]: Boolean(theme)
     })),
     ref: ref,
     children: [/*#__PURE__*/jsxs(RawClickable, {
@@ -8781,24 +9026,24 @@ const NavigationSection = forwardRef((props, ref) => {
       ...forwardedProps,
       "aria-controls": sectionId,
       "aria-expanded": isOpen,
-      className: classNames.join(`${ITEM_CLASSNAME}__link`),
+      className: itemElement('link'),
       ref: buttonRef,
       onClick: event => {
         setIsOpen(!isOpen);
         event.stopPropagation();
       },
       children: [icon ? /*#__PURE__*/jsx(Icon, {
-        className: `${ITEM_CLASSNAME}__icon`,
+        className: itemElement('icon'),
         icon: icon,
         size: Size$1.xs
       }) : null, /*#__PURE__*/jsx(Text, {
         as: "span",
         truncate: true,
-        className: `${ITEM_CLASSNAME}__label`,
+        className: itemElement('label'),
         ref: ref,
         children: label
       }), /*#__PURE__*/jsx(Icon, {
-        className: classNames.join(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME$D}__chevron`),
+        className: classNames.join(itemElement('icon'), sectionElement('chevron')),
         icon: isOpen ? mdiChevronUp : mdiChevronDown
       })]
     }), isOpen && (isDropdown ? /*#__PURE__*/jsx(Popover, {
@@ -8814,7 +9059,9 @@ const NavigationSection = forwardRef((props, ref) => {
       children: /*#__PURE__*/jsx(ThemeProvider, {
         value: Theme$1.light,
         children: /*#__PURE__*/jsx("ul", {
-          className: `${CLASSNAME$D}__drawer--popover`,
+          className: sectionElement('drawer', {
+            popover: true
+          }),
           id: sectionId,
           children: /*#__PURE__*/jsx(NavigationContext.Provider, {
             value: {
@@ -8825,7 +9072,7 @@ const NavigationSection = forwardRef((props, ref) => {
         })
       })
     }) : /*#__PURE__*/jsx("ul", {
-      className: `${CLASSNAME$D}__drawer`,
+      className: sectionElement('drawer'),
       id: sectionId,
       children: children
     }))]
@@ -8834,6 +9081,15 @@ const NavigationSection = forwardRef((props, ref) => {
 NavigationSection.displayName = COMPONENT_NAME$D;
 NavigationSection.className = CLASSNAME$D;
 
+const {
+  block: block$z,
+  element: element$p
+} = classNames.bem(ITEM_CLASSNAME);
+
+/**
+ * Navigation item props
+ */
+
 const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
   const {
     className,
@@ -8849,31 +9105,29 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
     labelRef
   } = useOverflowTooltipLabel(label);
   return /*#__PURE__*/jsx("li", {
-    className: classNames.join(className, handleBasicClasses({
-      prefix: ITEM_CLASSNAME,
-      theme
+    className: classNames.join(className, block$z({
+      [`theme-${theme}`]: Boolean(theme)
     })),
     children: /*#__PURE__*/jsx(Tooltip, {
       label: tooltipLabel,
       placement: Placement.TOP,
       children: /*#__PURE__*/jsxs(RawClickable, {
         as: Element,
-        className: handleBasicClasses({
-          prefix: `${ITEM_CLASSNAME}__link`,
-          isSelected: isCurrentPage
+        className: element$p('link', {
+          'is-selected': isCurrentPage
         }),
         ref: ref,
         "aria-current": isCurrentPage ? 'page' : undefined,
         ...forwardedProps,
         children: [icon ? /*#__PURE__*/jsx(Icon, {
-          className: `${ITEM_CLASSNAME}__icon`,
+          className: element$p('icon'),
           icon: icon,
           size: Size$1.xs,
           theme: theme
         }) : null, /*#__PURE__*/jsx(Text, {
           as: "span",
           truncate: true,
-          className: `${ITEM_CLASSNAME}__label`,
+          className: element$p('label'),
           ref: labelRef,
           children: label
         })]
@@ -8894,6 +9148,10 @@ const COMPONENT_NAME$C = 'Navigation';
  * Component default class name and class prefix.
  */
 const CLASSNAME$C = 'lumx-navigation';
+const {
+  block: block$y,
+  element: element$o
+} = classNames.bem(CLASSNAME$C);
 
 /**
  * Component default props
@@ -8913,10 +9171,9 @@ const Navigation = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx(ThemeProvider, {
     value: theme,
     children: /*#__PURE__*/jsx("nav", {
-      className: classNames.join(className, handleBasicClasses({
-        prefix: CLASSNAME$C,
-        theme,
-        orientation
+      className: classNames.join(className, block$y({
+        [`theme-${theme}`]: Boolean(theme),
+        [`orientation-${orientation}`]: Boolean(orientation)
       })),
       ref: ref,
       ...forwardedProps,
@@ -8925,7 +9182,7 @@ const Navigation = forwardRef((props, ref) => {
           orientation
         },
         children: /*#__PURE__*/jsx("ul", {
-          className: `${CLASSNAME$C}__list`,
+          className: element$o('list'),
           children: children
         })
       })
@@ -8971,6 +9228,10 @@ const COMPONENT_NAME$B = 'Notification';
  * Component default class name and class prefix.
  */
 const CLASSNAME$B = 'lumx-notification';
+const {
+  block: block$x,
+  element: element$n
+} = classNames.bem(CLASSNAME$B);
 
 /**
  * Component default props.
@@ -9030,11 +9291,10 @@ const Notification = forwardRef((props, ref) => {
       ref: mergeRefs(ref, rootRef),
       role: "alert",
       ...forwardedProps,
-      className: classNames.join(className, handleBasicClasses({
-        color,
-        hasAction,
-        isHidden: !isOpen,
-        prefix: CLASSNAME$B
+      className: classNames.join(className, block$x({
+        [`color-${color}`]: Boolean(color),
+        'has-action': hasAction,
+        'is-hidden': !isOpen
       })),
       onClick: onClick,
       style: {
@@ -9042,16 +9302,16 @@ const Notification = forwardRef((props, ref) => {
         zIndex
       },
       children: [/*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$B}__icon`,
+        className: element$n('icon'),
         children: /*#__PURE__*/jsx(Icon, {
           icon: icon,
           size: Size$1.s
         })
       }), /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$B}__content`,
+        className: element$n('content'),
         children: content
       }), hasAction && /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$B}__action`,
+        className: element$n('action'),
         children: /*#__PURE__*/jsx(Button, {
           emphasis: Emphasis$1.medium,
           theme: theme,
@@ -9135,6 +9395,10 @@ const COMPONENT_NAME$z = 'PostBlock';
  * Component default class name and class prefix.
  */
 const CLASSNAME$z = 'lumx-post-block';
+const {
+  block: block$w,
+  element: element$m
+} = classNames.bem(CLASSNAME$z);
 
 /**
  * Component default props.
@@ -9169,51 +9433,50 @@ const PostBlock = forwardRef((props, ref) => {
   } = props;
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$z,
-      orientation,
-      theme
+    className: classNames.join(className, block$w({
+      [`orientation-${orientation}`]: Boolean(orientation),
+      [`theme-${theme}`]: Boolean(theme)
     })),
     ...forwardedProps,
     children: [thumbnailProps && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$z}__thumbnail`,
+      className: element$m('thumbnail'),
       children: /*#__PURE__*/jsx(Thumbnail, {
         ...thumbnailProps,
         theme: theme,
         variant: ThumbnailVariant.rounded
       })
     }), /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME$z}__wrapper`,
+      className: element$m('wrapper'),
       children: [author && /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$z}__author`,
+        className: element$m('author'),
         children: author
       }), title && /*#__PURE__*/jsx("button", {
         type: "button",
-        className: `${CLASSNAME$z}__title`,
+        className: element$m('title'),
         onClick: onClick,
         children: title
       }), meta && /*#__PURE__*/jsx("span", {
-        className: `${CLASSNAME$z}__meta`,
+        className: element$m('meta'),
         children: meta
       }), typeof text === 'string' ? /*#__PURE__*/jsx("p", {
-        className: `${CLASSNAME$z}__text`,
+        className: element$m('text'),
         children: text
       }) :
       /*#__PURE__*/
       // eslint-disable-next-line react/no-danger
       jsx("p", {
         dangerouslySetInnerHTML: text,
-        className: `${CLASSNAME$z}__text`
+        className: element$m('text')
       }), attachments && /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$z}__attachments`,
+        className: element$m('attachments'),
         children: attachments
       }), (tags || actions) && /*#__PURE__*/jsxs("div", {
-        className: `${CLASSNAME$z}__toolbar`,
+        className: element$m('toolbar'),
         children: [tags && /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$z}__tags`,
+          className: element$m('tags'),
           children: tags
         }), actions && /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$z}__actions`,
+          className: element$m('actions'),
           children: actions
         })]
       })]
@@ -9233,6 +9496,10 @@ const COMPONENT_NAME$y = 'ProgressLinear';
  * Component default class name and class prefix.
  */
 const CLASSNAME$y = 'lumx-progress-linear';
+const {
+  block: block$v,
+  element: element$l
+} = classNames.bem(CLASSNAME$y);
 
 /**
  * Component default props.
@@ -9256,14 +9523,13 @@ const ProgressLinear = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$y,
-      theme
+    className: classNames.join(className, block$v({
+      [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsx("div", {
-      className: "lumx-progress-linear__line1"
+      className: element$l('line1')
     }), /*#__PURE__*/jsx("div", {
-      className: "lumx-progress-linear__line2"
+      className: element$l('line2')
     })]
   });
 });
@@ -9280,6 +9546,10 @@ const COMPONENT_NAME$x = 'ProgressCircular';
  * Component default class name and class prefix.
  */
 const CLASSNAME$x = 'lumx-progress-circular';
+const {
+  block: block$u,
+  element: element$k
+} = classNames.bem(CLASSNAME$x);
 
 /**
  * Component default props.
@@ -9309,21 +9579,20 @@ const ProgressCircular = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs(Element, {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$x,
-      theme,
-      size,
-      display
+    className: classNames.join(className, block$u({
+      [`theme-${theme}`]: Boolean(theme),
+      [`size-${size}`]: Boolean(size),
+      [`display-${display}`]: Boolean(display)
     })),
     children: [/*#__PURE__*/jsx(Element, {
-      className: "lumx-progress-circular__double-bounce1"
+      className: element$k('double-bounce1')
     }), /*#__PURE__*/jsx(Element, {
-      className: "lumx-progress-circular__double-bounce2"
+      className: element$k('double-bounce2')
     }), /*#__PURE__*/jsx("svg", {
-      className: "lumx-progress-circular__svg",
+      className: element$k('svg'),
       viewBox: "25 25 50 50",
       children: /*#__PURE__*/jsx("circle", {
-        className: "lumx-progress-circular__path",
+        className: element$k('path'),
         cx: "50",
         cy: "50",
         r: "20",
@@ -9355,6 +9624,9 @@ const COMPONENT_NAME$w = 'Progress';
  * Component default class name and class prefix.
  */
 const CLASSNAME$w = 'lumx-progress';
+const {
+  block: block$t
+} = classNames.bem(CLASSNAME$w);
 
 /**
  * Component default props.
@@ -9382,10 +9654,9 @@ const Progress = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$w,
-      theme,
-      variant
+    className: classNames.join(className, block$t({
+      [`theme-${theme}`]: Boolean(theme),
+      [`variant-${variant}`]: Boolean(variant)
     })),
     children: [variant === ProgressVariant.circular && /*#__PURE__*/jsx(ProgressCircular, {
       theme: theme
@@ -9659,6 +9930,10 @@ const COMPONENT_NAME$v = 'ProgressTracker';
  * Component default class name and class prefix.
  */
 const CLASSNAME$v = 'lumx-progress-tracker';
+const {
+  block: block$s,
+  element: element$j
+} = classNames.bem(CLASSNAME$v);
 
 /**
  * Component default props.
@@ -9695,20 +9970,20 @@ const ProgressTracker = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: mergeRefs(ref, stepListRef),
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$v),
+    className: classNames.join(className, block$s()),
     children: [/*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$v}__steps`,
+      className: element$j('steps'),
       role: "tablist",
       "aria-label": ariaLabel,
       children: children
     }), /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$v}__background-bar`,
+      className: element$j('background-bar'),
       style: {
         left: `${backgroundPosition}%`,
         right: `${backgroundPosition}%`
       }
     }), /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$v}__foreground-bar`,
+      className: element$j('foreground-bar'),
       style: {
         left: `${backgroundPosition}%`,
         right: `${backgroundPosition}%`,
@@ -9730,6 +10005,10 @@ const COMPONENT_NAME$u = 'ProgressTrackerStep';
  * Component default class name and class prefix.
  */
 const CLASSNAME$u = 'lumx-progress-tracker-step';
+const {
+  block: block$r,
+  element: element$i
+} = classNames.bem(CLASSNAME$u);
 
 /**
  * Component default props.
@@ -9798,12 +10077,11 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
     ...forwardedProps,
     type: "button",
     id: state?.tabId,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$u,
-      hasError,
-      isActive,
-      isClickable: state && !isAnyDisabled,
-      isComplete
+    className: classNames.join(className, block$r({
+      'has-error': hasError,
+      'is-active': isActive,
+      'is-clickable': state && !isAnyDisabled,
+      'is-complete': isComplete
     })),
     onClick: changeToCurrentTab,
     onKeyPress: handleKeyPress,
@@ -9814,16 +10092,16 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
     "aria-selected": isActive,
     "aria-controls": state?.tabPanelId,
     children: [/*#__PURE__*/jsx(Icon, {
-      className: `${CLASSNAME$u}__state`,
+      className: element$i('state'),
       icon: getIcon(),
       size: Size$1.s
     }), /*#__PURE__*/jsx(InputLabel, {
       htmlFor: state?.tabId || '',
-      className: `${CLASSNAME$u}__label`,
+      className: element$i('label'),
       children: label
     }), helper && /*#__PURE__*/jsx(InputHelper, {
       kind: hasError ? Kind$1.error : Kind$1.info,
-      className: `${CLASSNAME$u}__helper`,
+      className: element$i('helper'),
       children: helper
     })]
   });
@@ -9841,6 +10119,9 @@ const COMPONENT_NAME$t = 'ProgressTrackerStepPanel';
  * Component default class name and class prefix.
  */
 const CLASSNAME$t = `lumx-step-panel`;
+const {
+  block: block$q
+} = classNames.bem(CLASSNAME$t);
 
 /**
  * Component default props.
@@ -9870,9 +10151,8 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
     ref: ref,
     ...forwardedProps,
     id: state?.tabPanelId,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$t,
-      isActive
+    className: classNames.join(className, block$q({
+      'is-active': isActive
     })),
     role: "tabpanel",
     tabIndex: isActive ? 0 : -1,
@@ -9893,6 +10173,10 @@ const COMPONENT_NAME$s = 'RadioButton';
  * Component default class name and class prefix.
  */
 const CLASSNAME$s = 'lumx-radio-button';
+const {
+  block: block$p,
+  element: element$h
+} = classNames.bem(CLASSNAME$s);
 
 /**
  * Component default props.
@@ -9938,18 +10222,17 @@ const RadioButton = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      isChecked,
-      isDisabled: isAnyDisabled,
-      isUnchecked: !isChecked,
-      prefix: CLASSNAME$s,
-      theme
+    className: classNames.join(className, block$p({
+      'is-checked': isChecked,
+      'is-disabled': isAnyDisabled,
+      'is-unchecked': !isChecked,
+      [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME$s}__input-wrapper`,
+      className: element$h('input-wrapper'),
       children: [/*#__PURE__*/jsx("input", {
         ref: inputRef,
-        className: `${CLASSNAME$s}__input-native`,
+        className: element$h('input-native'),
         ...disabledStateProps,
         id: inputId,
         type: "radio",
@@ -9961,24 +10244,24 @@ const RadioButton = forwardRef((props, ref) => {
         "aria-describedby": helper ? `${inputId}-helper` : undefined,
         ...inputProps
       }), /*#__PURE__*/jsxs("div", {
-        className: `${CLASSNAME$s}__input-placeholder`,
+        className: element$h('input-placeholder'),
         children: [/*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$s}__input-background`
+          className: element$h('input-background')
         }), /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$s}__input-indicator`
+          className: element$h('input-indicator')
         })]
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME$s}__content`,
+      className: element$h('content'),
       children: [label && /*#__PURE__*/jsx(InputLabel, {
         htmlFor: inputId,
         theme: theme,
-        className: `${CLASSNAME$s}__label`,
+        className: element$h('label'),
         children: label
       }), helper && /*#__PURE__*/jsx(InputHelper, {
         id: `${inputId}-helper`,
         theme: theme,
-        className: `${CLASSNAME$s}__helper`,
+        className: element$h('helper'),
         children: helper
       })]
     })]
@@ -10047,6 +10330,10 @@ function useListenFocus(ref) {
 
 /** The default class name and classes prefix for this component. */
 const CLASSNAME$q = 'lumx-select';
+const {
+  block: block$o,
+  element: element$g
+} = classNames.bem(CLASSNAME$q);
 const WithSelectContext = (SelectElement, props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
@@ -10099,18 +10386,17 @@ const WithSelectContext = (SelectElement, props, ref) => {
   useFocusTrap(isOpen && dropdownRef.current, focusElement?.current);
   return /*#__PURE__*/jsxs("div", {
     ref: mergeRefs(ref, selectRef),
-    className: classNames.join(className, handleBasicClasses({
-      hasError,
-      hasLabel: Boolean(label),
-      hasPlaceholder: Boolean(placeholder),
-      hasValue: !isEmpty,
-      isDisabled,
-      isEmpty,
-      isFocus,
-      isOpen,
-      isValid,
-      prefix: CLASSNAME$q,
-      theme: theme === Theme$1.light ? Theme$1.light : Theme$1.dark
+    className: classNames.join(className, block$o({
+      'has-error': hasError,
+      'has-label': Boolean(label),
+      'has-placeholder': Boolean(placeholder),
+      'has-value': !isEmpty,
+      'is-disabled': isDisabled,
+      'is-empty': isEmpty,
+      'is-focus': isFocus,
+      'is-open': isOpen,
+      'is-valid': isValid,
+      [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsx(SelectElement, {
       ...forwardedProps,
@@ -10142,12 +10428,12 @@ const WithSelectContext = (SelectElement, props, ref) => {
       ref: dropdownRef,
       children: children
     }), hasError && error && /*#__PURE__*/jsx(InputHelper, {
-      className: `${CLASSNAME$q}__helper`,
+      className: element$g('helper'),
       kind: Kind$1.error,
       theme: theme,
       children: error
     }), helper && /*#__PURE__*/jsx(InputHelper, {
-      className: `${CLASSNAME$q}__helper`,
+      className: element$g('helper'),
       theme: theme,
       children: helper
     })]
@@ -10167,6 +10453,10 @@ const COMPONENT_NAME$q = 'Select';
 
 /** The default class name and classes prefix for this component. */
 const CLASSNAME$p = 'lumx-select';
+const {
+  block: block$n,
+  element: element$f
+} = classNames.bem(CLASSNAME$p);
 
 /** The default value of props. */
 const DEFAULT_PROPS$q = {
@@ -10206,10 +10496,10 @@ const SelectField = props => {
   return /*#__PURE__*/jsxs(Fragment, {
     children: [variant === SelectVariant.input && /*#__PURE__*/jsxs(Fragment, {
       children: [label && /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$p}__header`,
+        className: element$f('header'),
         children: /*#__PURE__*/jsx(InputLabel, {
           htmlFor: id,
-          className: `${CLASSNAME$p}__label`,
+          className: element$f('label'),
           isRequired: isRequired,
           theme: theme,
           children: label
@@ -10217,33 +10507,35 @@ const SelectField = props => {
       }), /*#__PURE__*/jsxs("div", {
         ref: mergeRefs(anchorRef, selectElementRef),
         id: id,
-        className: `${CLASSNAME$p}__wrapper`,
+        className: element$f('wrapper'),
         onClick: onInputClick,
         onKeyDown: handleKeyboardNav,
         tabIndex: isDisabled ? undefined : 0,
         "aria-disabled": isDisabled || undefined,
         ...forwardedProps,
         children: [icon && /*#__PURE__*/jsx(Icon, {
-          className: `${CLASSNAME$p}__input-icon`,
+          className: element$f('input-icon'),
           color: theme === Theme$1.dark ? 'light' : undefined,
           icon: icon,
           size: Size$1.xs
         }), /*#__PURE__*/jsxs("div", {
-          className: classNames.join([`${CLASSNAME$p}__input-native`, isEmpty && placeholder && `${CLASSNAME$p}__input-native--placeholder`]),
+          className: element$f('input-native', {
+            placeholder: isEmpty && placeholder
+          }),
           children: [!isEmpty && /*#__PURE__*/jsx("span", {
             children: selectedValueRender?.(value)
           }), isEmpty && placeholder && /*#__PURE__*/jsx("span", {
             children: placeholder
           })]
         }), (isValid || hasError) && /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$p}__input-validity`,
+          className: element$f('input-validity'),
           children: /*#__PURE__*/jsx(Icon, {
             icon: isValid ? mdiCheckCircle : mdiAlertCircle,
             size: Size$1.xxs
           })
         }), hasInputClear && clearButtonProps && /*#__PURE__*/jsx(IconButton, {
           ...clearButtonProps,
-          className: `${CLASSNAME$p}__input-clear`,
+          className: element$f('input-clear'),
           icon: mdiCloseCircle,
           emphasis: Emphasis$1.low,
           size: Size$1.s,
@@ -10251,7 +10543,7 @@ const SelectField = props => {
           onClick: onClear,
           onKeyDown: stopPropagation
         }), /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$p}__input-indicator`,
+          className: element$f('input-indicator'),
           children: /*#__PURE__*/jsx(Icon, {
             icon: mdiMenuDown,
             size: Size$1.s
@@ -10292,10 +10584,9 @@ const Select = forwardRef((props, ref) => {
   return WithSelectContext(SelectField, {
     ...DEFAULT_PROPS$q,
     ...props,
-    className: classNames.join(props.className, handleBasicClasses({
-      hasInputClear,
-      hasUnique: !props.isEmpty,
-      prefix: CLASSNAME$p
+    className: classNames.join(props.className, block$n({
+      'has-input-clear': hasInputClear,
+      'has-unique': !props.isEmpty
     })),
     hasInputClear,
     isEmpty: isEmpty$1
@@ -10311,6 +10602,10 @@ const COMPONENT_NAME$p = 'Select';
 
 /** The default class name and classes prefix for this component. */
 const CLASSNAME$o = 'lumx-select';
+const {
+  block: block$m,
+  element: element$e
+} = classNames.bem(CLASSNAME$o);
 
 /** The default value of props. */
 const DEFAULT_PROPS$p = {
@@ -10359,10 +10654,10 @@ const SelectMultipleField = props => {
   return /*#__PURE__*/jsxs(Fragment, {
     children: [variant === SelectVariant.input && /*#__PURE__*/jsxs(Fragment, {
       children: [label && /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$o}__header`,
+        className: element$e('header'),
         children: /*#__PURE__*/jsx(InputLabel, {
           htmlFor: id,
-          className: `${CLASSNAME$o}__label`,
+          className: element$e('label'),
           isRequired: isRequired,
           theme: theme,
           children: label
@@ -10370,22 +10665,24 @@ const SelectMultipleField = props => {
       }), /*#__PURE__*/jsxs("div", {
         ref: mergeRefs(anchorRef, selectElementRef),
         id: id,
-        className: `${CLASSNAME$o}__wrapper`,
+        className: element$e('wrapper'),
         onClick: onInputClick,
         onKeyDown: handleKeyboardNav,
         tabIndex: isDisabled ? undefined : 0,
         "aria-disabled": isDisabled || undefined,
         ...forwardedProps,
         children: [icon && /*#__PURE__*/jsx(Icon, {
-          className: `${CLASSNAME$o}__input-icon`,
+          className: element$e('input-icon'),
           color: theme === Theme$1.dark ? 'light' : undefined,
           icon: icon,
           size: Size$1.xs
         }), /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$o}__chips`,
+          className: element$e('chips'),
           children: !isEmpty && value.map((val, index) => selectedChipRender?.(val, index, onClear, isDisabled, theme))
         }), isEmpty && placeholder && /*#__PURE__*/jsx("div", {
-          className: classNames.join([`${CLASSNAME$o}__input-native`, `${CLASSNAME$o}__input-native--placeholder`]),
+          className: element$e('input-native', {
+            placeholder: true
+          }),
           children: /*#__PURE__*/jsx("span", {
             children: placeholder
           })
@@ -10439,9 +10736,8 @@ const SelectMultiple = forwardRef((props, ref) => {
   return WithSelectContext(SelectMultipleField, {
     ...DEFAULT_PROPS$p,
     ...props,
-    className: classNames.join(props.className, handleBasicClasses({
-      hasMultiple: !props.isEmpty,
-      prefix: CLASSNAME$o
+    className: classNames.join(props.className, block$m({
+      'has-multiple': !props.isEmpty
     })),
     isEmpty: props.value.length === 0,
     isMultiple: true
@@ -10496,6 +10792,10 @@ const COMPONENT_NAME$n = 'SideNavigationItem';
  * Component default class name and class prefix.
  */
 const CLASSNAME$m = 'lumx-side-navigation-item';
+const {
+  block: block$l,
+  element: element$d
+} = classNames.bem(CLASSNAME$m);
 
 /**
  * Component default props.
@@ -10543,21 +10843,20 @@ const SideNavigationItem = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("li", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      emphasis,
-      isOpen: showChildren,
-      isSelected,
-      prefix: CLASSNAME$m
+    className: classNames.join(className, block$l({
+      [`emphasis-${emphasis}`]: Boolean(emphasis),
+      'is-open': showChildren,
+      'is-selected': isSelected
     })),
     children: [shouldSplitActions ? /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME$m}__wrapper`,
+      className: element$d('wrapper'),
       children: [/*#__PURE__*/jsxs(RawClickable, {
         as: linkAs || (linkProps?.href ? 'a' : 'button'),
         ...linkProps,
-        className: `${CLASSNAME$m}__link`,
+        className: element$d('link'),
         onClick: onClick,
         children: [icon && /*#__PURE__*/jsx(Icon, {
-          className: `${CLASSNAME$m}__icon`,
+          className: element$d('icon'),
           icon: icon,
           size: Size$1.xs
         }), /*#__PURE__*/jsx("span", {
@@ -10565,7 +10864,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
         })]
       }), /*#__PURE__*/jsx(IconButton, {
         ...toggleButtonProps,
-        className: `${CLASSNAME$m}__toggle`,
+        className: element$d('toggle'),
         icon: isOpen ? mdiChevronUp : mdiChevronDown,
         size: Size$1.m,
         emphasis: Emphasis$1.low,
@@ -10575,22 +10874,22 @@ const SideNavigationItem = forwardRef((props, ref) => {
     }) : /*#__PURE__*/jsxs(RawClickable, {
       as: linkAs || (linkProps?.href ? 'a' : 'button'),
       ...linkProps,
-      className: `${CLASSNAME$m}__link`,
+      className: element$d('link'),
       onClick: onClick,
       ...ariaProps,
       children: [icon && /*#__PURE__*/jsx(Icon, {
-        className: `${CLASSNAME$m}__icon`,
+        className: element$d('icon'),
         icon: icon,
         size: Size$1.xs
       }), /*#__PURE__*/jsx("span", {
         children: label
       }), hasContent && /*#__PURE__*/jsx(Icon, {
-        className: `${CLASSNAME$m}__chevron`,
+        className: element$d('chevron'),
         icon: isOpen ? mdiChevronUp : mdiChevronDown,
         size: Size$1.xs
       })]
     }), (closeMode === 'hide' || showChildren) && /*#__PURE__*/jsx("ul", {
-      className: `${CLASSNAME$m}__children`,
+      className: element$d('children'),
       id: contentId,
       children: content
     })]
@@ -10611,6 +10910,9 @@ const COMPONENT_NAME$m = 'SkeletonCircle';
  * Component default class name and class prefix.
  */
 const CLASSNAME$l = 'lumx-skeleton-circle';
+const {
+  block: block$k
+} = classNames.bem(CLASSNAME$l);
 
 /**
  * SkeletonCircle component.
@@ -10631,11 +10933,10 @@ const SkeletonCircle = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$l,
-      size,
-      color,
-      theme
+    className: classNames.join(className, block$k({
+      [`size-${size}`]: Boolean(size),
+      [`color-${color}`]: Boolean(color),
+      [`theme-${theme}`]: Boolean(theme)
     }))
   });
 });
@@ -10666,6 +10967,10 @@ const COMPONENT_NAME$l = 'SkeletonRectangle';
  * Component default class name and class prefix.
  */
 const CLASSNAME$k = 'lumx-skeleton-rectangle';
+const {
+  block: block$j,
+  element: element$c
+} = classNames.bem(CLASSNAME$k);
 
 /**
  * SkeletonRectangle component.
@@ -10689,17 +10994,16 @@ const SkeletonRectangle = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$k,
-      aspectRatio,
-      height: aspectRatio ? undefined : height,
-      theme,
-      variant,
-      width,
-      color
+    className: classNames.join(className, block$j({
+      [`aspect-ratio-${aspectRatio}`]: Boolean(aspectRatio),
+      [`height-${height}`]: Boolean(aspectRatio ? undefined : height),
+      [`theme-${theme}`]: Boolean(theme),
+      [`variant-${variant}`]: Boolean(variant),
+      [`width-${width}`]: Boolean(width),
+      [`color-${color}`]: Boolean(color)
     })),
     children: /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$k}__inner`
+      className: element$c('inner')
     })
   });
 });
@@ -10718,6 +11022,10 @@ const COMPONENT_NAME$k = 'SkeletonTypography';
  * Component default class name and class prefix.
  */
 const CLASSNAME$j = 'lumx-skeleton-typography';
+const {
+  block: block$i,
+  element: element$b
+} = classNames.bem(CLASSNAME$j);
 
 /**
  * SkeletonTypography component.
@@ -10739,18 +11047,17 @@ const SkeletonTypography = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$j,
-      theme,
-      typography,
-      color
+    className: classNames.join(className, block$i({
+      [`theme-${theme}`]: Boolean(theme),
+      [`typography-${typography}`]: Boolean(typography),
+      [`color-${color}`]: Boolean(color)
     })),
     style: {
       ...forwardedProps.style,
       width
     },
     children: /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$j}__inner`
+      className: element$b('inner')
     })
   });
 });
@@ -10802,6 +11109,10 @@ const COMPONENT_NAME$j = 'Slider';
  * Component default class name and class prefix.
  */
 const CLASSNAME$i = 'lumx-slider';
+const {
+  block: block$h,
+  element: element$a
+} = classNames.bem(CLASSNAME$i);
 
 /**
  * Component default props.
@@ -10994,41 +11305,46 @@ const Slider = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$i,
-      theme,
-      hasLabel: Boolean(label)
+    className: classNames.join(className, block$h({
+      [`theme-${theme}`]: Boolean(theme),
+      'has-label': Boolean(label)
     })),
     onMouseDown: handleMouseDown,
     children: [label && /*#__PURE__*/jsx(InputLabel, {
       id: sliderLabelId,
       htmlFor: sliderId,
-      className: `${CLASSNAME$i}__label`,
+      className: element$a('label'),
       theme: theme,
       children: label
     }), helper && /*#__PURE__*/jsx(InputHelper, {
-      className: `${CLASSNAME$i}__helper`,
+      className: element$a('helper'),
       theme: theme,
       children: helper
     }), /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME$i}__ui-wrapper`,
+      className: element$a('ui-wrapper'),
       children: [!hideMinMaxLabel && /*#__PURE__*/jsx("span", {
-        className: `${CLASSNAME$i}__value-label ${CLASSNAME$i}__value-label--min`,
+        className: element$a('value-label', {
+          min: true
+        }),
         children: min
       }), /*#__PURE__*/jsxs("div", {
-        className: `${CLASSNAME$i}__wrapper`,
+        className: element$a('wrapper'),
         ref: sliderRef,
         children: [/*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$i}__track ${CLASSNAME$i}__track--background`
+          className: element$a('track', {
+            background: true
+          })
         }), /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$i}__track ${CLASSNAME$i}__track--active`,
+          className: element$a('track', {
+            active: true
+          }),
           style: {
             width: percentString
           }
         }), steps ? /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$i}__ticks`,
+          className: element$a('ticks'),
           children: availableSteps.map((step, idx) => /*#__PURE__*/jsx("div", {
-            className: `${CLASSNAME$i}__tick`,
+            className: element$a('tick'),
             style: {
               left: `${step * 100}%`
             }
@@ -11038,7 +11354,7 @@ const Slider = forwardRef((props, ref) => {
           "aria-labelledby": sliderLabelId,
           name: name,
           id: sliderId,
-          className: `${CLASSNAME$i}__handle`,
+          className: element$a('handle'),
           style: {
             left: percentString
           },
@@ -11046,7 +11362,9 @@ const Slider = forwardRef((props, ref) => {
           ...disabledStateProps
         })]
       }), !hideMinMaxLabel && /*#__PURE__*/jsx("span", {
-        className: `${CLASSNAME$i}__value-label ${CLASSNAME$i}__value-label--max`,
+        className: element$a('value-label', {
+          max: true
+        }),
         children: max
       })]
     })]
@@ -11653,6 +11971,10 @@ const COMPONENT_NAME$g = 'SlideshowControls';
  * Component default class name and class prefix.
  */
 const CLASSNAME$f = 'lumx-slideshow-controls';
+const {
+  block: block$g,
+  element: element$9
+} = classNames.bem(CLASSNAME$f);
 
 /**
  * Component default props.
@@ -11708,8 +12030,8 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
     parentRef: paginationRef,
     elementSelector: 'button',
     keepTabIndex: true,
-    onElementFocus: element => {
-      element.click();
+    onElementFocus: el => {
+      el.click();
     }
   });
 
@@ -11723,24 +12045,22 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$f,
-      theme
-    }), {
-      [`${CLASSNAME$f}--has-infinite-pagination`]: slidesCount > PAGINATION_ITEMS_MAX
-    }),
+    className: classNames.join(className, block$g({
+      [`theme-${theme}`]: Boolean(theme),
+      'has-infinite-pagination': slidesCount > PAGINATION_ITEMS_MAX
+    })),
     children: [/*#__PURE__*/jsx(IconButton, {
       ...previousButtonProps,
       icon: mdiChevronLeft,
-      className: `${CLASSNAME$f}__navigation`,
+      className: element$9('navigation'),
       color: theme === Theme$1.dark ? 'light' : 'dark',
       emphasis: Emphasis$1.low,
       onClick: onPreviousClick
     }), /*#__PURE__*/jsx("div", {
       ref: paginationRef,
-      className: `${CLASSNAME$f}__pagination`,
+      className: element$9('pagination'),
       children: /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$f}__pagination-items`,
+        className: element$9('pagination-items'),
         style: wrapperStyle,
         role: "tablist",
         ...paginationProps,
@@ -11755,11 +12075,10 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
           } = paginationItemProps ? paginationItemProps(index) : {};
           const ariaLabel = label || paginationItemLabel?.(index) || `${index + 1} / ${slidesCount}`;
           return /*#__PURE__*/jsx("button", {
-            className: classNames.join(handleBasicClasses({
-              prefix: `${CLASSNAME$f}__pagination-item`,
-              isActive,
-              isOnEdge,
-              isOutRange
+            className: classNames.join(element$9('pagination-item', {
+              'is-active': isActive,
+              'is-on-edge': isOnEdge,
+              'is-out-range': isOutRange
             }), itemClassName),
             type: "button",
             tabIndex: isActive ? undefined : -1,
@@ -11774,13 +12093,13 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
     }), playButtonProps ? /*#__PURE__*/jsx(IconButton, {
       ...playButtonProps,
       icon: isAutoPlaying ? mdiPauseCircleOutline : mdiPlayCircleOutline,
-      className: `${CLASSNAME$f}__play`,
+      className: element$9('play'),
       color: theme === Theme$1.dark ? 'light' : 'dark',
       emphasis: Emphasis$1.low
     }) : null, /*#__PURE__*/jsx(IconButton, {
       ...nextButtonProps,
       icon: mdiChevronRight,
-      className: `${CLASSNAME$f}__navigation`,
+      className: element$9('navigation'),
       color: theme === Theme$1.dark ? 'light' : 'dark',
       emphasis: Emphasis$1.low,
       onClick: onNextClick
@@ -11913,6 +12232,10 @@ const COMPONENT_NAME$f = 'Slideshow';
  * Component default class name and class prefix.
  */
 const CLASSNAME$e = 'lumx-slideshow';
+const {
+  block: block$f,
+  element: element$8
+} = classNames.bem(CLASSNAME$e);
 
 /**
  * Component default props.
@@ -11982,23 +12305,23 @@ const Slides = forwardRef((props, ref) => {
     id: id,
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$e,
-      theme
-    }), {
-      [`${CLASSNAME$e}--fill-height`]: fillHeight,
-      [`${CLASSNAME$e}--group-by-${groupBy}`]: Boolean(groupBy)
-    }),
+    className: classNames.join(className, block$f({
+      [`theme-${theme}`]: Boolean(theme),
+      'fill-height': fillHeight,
+      [`group-by-${groupBy}`]: Boolean(groupBy)
+    })),
     "aria-roledescription": "carousel",
     children: [/*#__PURE__*/jsx("div", {
       id: slidesId,
-      className: `${CLASSNAME$e}__slides`,
+      className: element$8('slides'),
       onMouseEnter: toggleAutoPlay,
       onMouseLeave: toggleAutoPlay,
       "aria-live": isAutoPlaying ? 'off' : 'polite',
       children: /*#__PURE__*/jsx("div", {
         ref: wrapperRef,
-        className: classNames.join(`${CLASSNAME$e}__wrapper`, isScrollSnapEnabled && `${CLASSNAME$e}__wrapper--${slideMode}`),
+        className: element$8('wrapper', {
+          [`${slideMode}`]: isScrollSnapEnabled
+        }),
         ...wrapperProps,
         children: groups.map((group, index) => /*#__PURE__*/jsx(SlideshowItemGroup, {
           id: slidesId && buildSlideShowGroupId(slidesId, index),
@@ -12023,6 +12346,10 @@ const COMPONENT_NAME$e = 'Switch';
  * Component default class name and class prefix.
  */
 const CLASSNAME$d = 'lumx-switch';
+const {
+  block: block$e,
+  element: element$7
+} = classNames.bem(CLASSNAME$d);
 
 /**
  * Component default props.
@@ -12070,21 +12397,20 @@ const Switch = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$d,
-      isChecked,
-      isDisabled: isAnyDisabled,
-      position,
-      theme,
-      isUnchecked: !isChecked
+    className: classNames.join(className, block$e({
+      'is-checked': isChecked,
+      'is-disabled': isAnyDisabled,
+      [`position-${position}`]: Boolean(position),
+      [`theme-${theme}`]: Boolean(theme),
+      'is-unchecked': !isChecked
     })),
     children: [/*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME$d}__input-wrapper`,
+      className: element$7('input-wrapper'),
       children: [/*#__PURE__*/jsx("input", {
         type: "checkbox",
         role: "switch",
         id: inputId,
-        className: `${CLASSNAME$d}__input-native`,
+        className: element$7('input-native'),
         name: name,
         value: value,
         ...disabledStateProps,
@@ -12095,24 +12421,24 @@ const Switch = forwardRef((props, ref) => {
         "aria-describedby": helper ? `${inputId}-helper` : undefined,
         ...inputProps
       }), /*#__PURE__*/jsxs("div", {
-        className: `${CLASSNAME$d}__input-placeholder`,
+        className: element$7('input-placeholder'),
         children: [/*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$d}__input-background`
+          className: element$7('input-background')
         }), /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$d}__input-indicator`
+          className: element$7('input-indicator')
         })]
       })]
     }), Children.count(children) > 0 && /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME$d}__content`,
+      className: element$7('content'),
       children: [/*#__PURE__*/jsx(InputLabel, {
         htmlFor: inputId,
         theme: theme,
-        className: `${CLASSNAME$d}__label`,
+        className: element$7('label'),
         children: children
       }), !isEmpty(helper) && /*#__PURE__*/jsx(InputHelper, {
         id: `${inputId}-helper`,
         theme: theme,
-        className: `${CLASSNAME$d}__helper`,
+        className: element$7('helper'),
         children: helper
       })]
     })]
@@ -12132,6 +12458,14 @@ const COMPONENT_NAME$d = 'Table';
  */
 const CLASSNAME$c = 'lumx-table';
 
+const {
+  block: block$d
+} = classNames.bem(CLASSNAME$c);
+
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component default props.
  */
@@ -12157,11 +12491,10 @@ const Table = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("table", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$c,
-      hasBefore,
-      hasDividers,
-      theme
+    className: classNames.join(className, block$d({
+      'has-before': hasBefore,
+      'has-dividers': hasDividers,
+      [`theme-${theme}`]: Boolean(theme)
     })),
     children: children
   });
@@ -12228,6 +12561,9 @@ const COMPONENT_NAME$b = 'TableCell';
  * Component default class name and class prefix.
  */
 const CLASSNAME$a = `${CLASSNAME$c}__cell`;
+const {
+  block: block$c
+} = classNames.bem(CLASSNAME$a);
 
 /**
  * Component default props.
@@ -12273,11 +12609,11 @@ const TableCell = forwardRef((props, ref) => {
     children: [variant === TableCellVariant.head && /*#__PURE__*/jsx("th", {
       ref: ref,
       ...forwardedProps,
-      className: classNames.join(handleBasicClasses({
-        prefix: CLASSNAME$a,
-        isSortable,
-        isSorted: isSortable && !!sortOrder
-      }), className, `${CLASSNAME$a}--head`),
+      className: classNames.join(className, block$c({
+        'is-sortable': isSortable,
+        'is-sorted': isSortable && !!sortOrder,
+        head: true
+      })),
       "aria-sort": ariaSort,
       children: /*#__PURE__*/jsxs(Wrapper, {
         className: `${CLASSNAME$a}-wrapper`,
@@ -12301,7 +12637,9 @@ const TableCell = forwardRef((props, ref) => {
       })
     }), variant === TableCellVariant.body && /*#__PURE__*/jsx("td", {
       ...forwardedProps,
-      className: classNames.join(className, CLASSNAME$a, `${CLASSNAME$a}--body`),
+      className: classNames.join(className, block$c({
+        body: true
+      })),
       children: /*#__PURE__*/jsx("div", {
         className: `${CLASSNAME$a}-content`,
         children: children
@@ -12361,6 +12699,9 @@ const COMPONENT_NAME$9 = 'TableRow';
  * Component default class name and class prefix.
  */
 const CLASSNAME$8 = `${CLASSNAME$c}__row`;
+const {
+  block: block$b
+} = classNames.bem(CLASSNAME$8);
 
 /**
  * Component default props.
@@ -12391,11 +12732,10 @@ const TableRow = forwardRef((props, ref) => {
     ref: ref,
     tabIndex: isClickable && !disabledStateProps.disabled ? 0 : -1,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      isClickable: isClickable && !isAnyDisabled,
-      isDisabled: isAnyDisabled,
-      isSelected: isSelected && !isAnyDisabled,
-      prefix: CLASSNAME$8
+    className: classNames.join(className, block$b({
+      'is-clickable': isClickable && !isAnyDisabled,
+      'is-disabled': isAnyDisabled,
+      'is-selected': isSelected && !isAnyDisabled
     })),
     "aria-disabled": isAnyDisabled,
     children: children
@@ -12468,6 +12808,10 @@ TabProvider.defaultProps = DEFAULT_PROPS$b;
  */
 const TABS_CLASSNAME = `lumx-tabs`;
 
+const {
+  block: block$a,
+  element: element$6
+} = classNames.bem(TABS_CLASSNAME);
 let TabListLayout = /*#__PURE__*/function (TabListLayout) {
   TabListLayout["clustered"] = "clustered";
   TabListLayout["fixed"] = "fixed";
@@ -12521,14 +12865,13 @@ const TabList = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: mergeRefs(ref, tabListRef),
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: TABS_CLASSNAME,
-      layout,
-      position,
-      theme
+    className: classNames.join(className, block$a({
+      [`layout-${layout}`]: Boolean(layout),
+      [`position-${position}`]: Boolean(position),
+      [`theme-${theme}`]: Boolean(theme)
     })),
     children: /*#__PURE__*/jsx("div", {
-      className: `${TABS_CLASSNAME}__links`,
+      className: element$6('links'),
       role: "tablist",
       "aria-label": ariaLabel,
       children: children
@@ -12548,6 +12891,9 @@ const COMPONENT_NAME$7 = 'Tab';
  * Component default class name and class prefix.
  */
 const CLASSNAME$7 = `${TABS_CLASSNAME}__link`;
+const {
+  block: block$9
+} = classNames.bem(CLASSNAME$7);
 
 /**
  * Component default props.
@@ -12606,10 +12952,9 @@ const Tab = forwardRef((props, ref) => {
     ...forwardedProps,
     type: "button",
     id: state?.tabId,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$7,
-      isActive,
-      isDisabled: isAnyDisabled
+    className: classNames.join(className, block$9({
+      'is-active': isActive,
+      'is-disabled': isAnyDisabled
     })),
     onClick: changeToCurrentTab,
     onKeyPress: handleKeyPress,
@@ -12643,6 +12988,9 @@ const COMPONENT_NAME$6 = 'TabPanel';
  * Component default class name and class prefix.
  */
 const CLASSNAME$6 = `lumx-tab-panel`;
+const {
+  block: block$8
+} = classNames.bem(CLASSNAME$6);
 
 /**
  * Component default props.
@@ -12672,9 +13020,8 @@ const TabPanel = forwardRef((props, ref) => {
     ref: ref,
     ...forwardedProps,
     id: state?.tabPanelId,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME$6,
-      isActive
+    className: classNames.join(className, block$8({
+      'is-active': isActive
     })),
     role: "tabpanel",
     tabIndex: isActive ? 0 : -1,
@@ -12701,6 +13048,14 @@ const CLASSNAME$5 = 'lumx-text-field';
  */
 const INPUT_NATIVE_CLASSNAME = `${CLASSNAME$5}__input-native`;
 
+const {
+  block: block$7
+} = classNames.bem(INPUT_NATIVE_CLASSNAME);
+
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component default props.
  */
@@ -12732,10 +13087,10 @@ const RawInputText = forwardRef((props, ref) => {
     name: name,
     type: type,
     ref: useMergeRefs(ref, textareaRef),
-    className: classNames.join(className, handleBasicClasses({
-      prefix: INPUT_NATIVE_CLASSNAME,
-      theme
-    }), `${INPUT_NATIVE_CLASSNAME}--text`),
+    className: classNames.join(className, block$7({
+      [`theme-${theme}`]: Boolean(theme),
+      text: true
+    })),
     onChange: handleChange,
     value: value
   });
@@ -12782,6 +13137,14 @@ function useFitRowsToContent(minimumRows, textareaRef, value) {
   return rows;
 }
 
+const {
+  block: block$6
+} = classNames.bem(INPUT_NATIVE_CLASSNAME);
+
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component default props.
  */
@@ -12812,10 +13175,10 @@ const RawInputTextarea = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("textarea", {
     ...forwardedProps,
     name: name,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: INPUT_NATIVE_CLASSNAME,
-      theme
-    }), `${INPUT_NATIVE_CLASSNAME}--textarea`),
+    className: classNames.join(className, block$6({
+      [`theme-${theme}`]: Boolean(theme),
+      textarea: true
+    })),
     ref: useMergeRefs(ref, textareaRef),
     onChange: handleChange,
     value: value,
@@ -12823,6 +13186,15 @@ const RawInputTextarea = forwardRef((props, ref) => {
   });
 });
 
+const {
+  block: block$5,
+  element: element$5
+} = classNames.bem(CLASSNAME$5);
+
+/**
+ * Defines the props of the component.
+ */
+
 /**
  * Component default props.
  */
@@ -12949,33 +13321,32 @@ const TextField = forwardRef((props, ref) => {
   });
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: classNames.join(className, handleBasicClasses({
-      hasChips: Boolean(chips),
-      hasError: !isValid && hasError,
-      hasIcon: Boolean(icon),
-      hasInput: !multiline,
-      hasInputClear: clearButtonProps && isNotEmpty,
-      hasLabel: Boolean(label),
-      hasPlaceholder: Boolean(placeholder),
-      hasTextarea: multiline,
-      hasValue: Boolean(value),
-      isDisabled: isAnyDisabled,
-      isFocus: isFocus || forceFocusStyle,
-      isValid,
-      prefix: CLASSNAME$5,
-      theme
+    className: classNames.join(className, block$5({
+      'has-chips': Boolean(chips),
+      'has-error': !isValid && hasError,
+      'has-icon': Boolean(icon),
+      'has-input': !multiline,
+      'has-input-clear': Boolean(clearButtonProps && isNotEmpty),
+      'has-label': Boolean(label),
+      'has-placeholder': Boolean(placeholder),
+      'has-textarea': multiline,
+      'has-value': Boolean(value),
+      'is-disabled': isAnyDisabled,
+      'is-focus': isFocus || forceFocusStyle,
+      'is-valid': isValid,
+      [`theme-${theme}`]: Boolean(theme)
     })),
     children: [(label || maxLength) && /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME$5}__header`,
+      className: element$5('header'),
       children: [label && /*#__PURE__*/jsx(InputLabel, {
         ...labelProps,
         htmlFor: textFieldId,
-        className: `${CLASSNAME$5}__label`,
+        className: element$5('label'),
         isRequired: isRequired,
         theme: theme,
         children: label
       }), maxLength && /*#__PURE__*/jsxs("div", {
-        className: `${CLASSNAME$5}__char-counter`,
+        className: element$5('char-counter'),
         children: [/*#__PURE__*/jsx("span", {
           children: maxLength - valueLength
         }), maxLength - valueLength === 0 && /*#__PURE__*/jsx(Icon, {
@@ -12984,27 +13355,27 @@ const TextField = forwardRef((props, ref) => {
         })]
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME$5}__wrapper`,
+      className: element$5('wrapper'),
       ref: textFieldRef,
       children: [icon && /*#__PURE__*/jsx(Icon, {
-        className: `${CLASSNAME$5}__input-icon`,
+        className: element$5('input-icon'),
         color: theme === Theme$1.dark ? 'light' : undefined,
         icon: icon,
         size: Size$1.xs
       }), chips ? /*#__PURE__*/jsxs("div", {
-        className: `${CLASSNAME$5}__chips`,
+        className: element$5('chips'),
         children: [chips, input]
       }) : /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$5}__input-wrapper`,
+        className: element$5('input-wrapper'),
         children: input
       }), (isValid || hasError) && /*#__PURE__*/jsx(Icon, {
-        className: `${CLASSNAME$5}__input-validity`,
+        className: element$5('input-validity'),
         color: theme === Theme$1.dark ? 'light' : undefined,
         icon: isValid ? mdiCheckCircle : mdiAlertCircle,
         size: Size$1.xxs
       }), clearButtonProps && isNotEmpty && !isAnyDisabled && /*#__PURE__*/jsx(IconButton, {
         ...clearButtonProps,
-        className: `${CLASSNAME$5}__input-clear`,
+        className: element$5('input-clear'),
         icon: mdiCloseCircle,
         emphasis: Emphasis$1.low,
         size: Size$1.s,
@@ -13012,17 +13383,17 @@ const TextField = forwardRef((props, ref) => {
         onClick: handleClear,
         type: "button"
       }), afterElement && /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$5}__after-element`,
+        className: element$5('after-element'),
         children: afterElement
       })]
     }), hasError && error && /*#__PURE__*/jsx(InputHelper, {
-      className: `${CLASSNAME$5}__helper`,
+      className: element$5('helper'),
       kind: Kind$1.error,
       theme: theme,
       id: errorId,
       children: error
     }), helper && /*#__PURE__*/jsx(InputHelper, {
-      className: `${CLASSNAME$5}__helper`,
+      className: element$5('helper'),
       theme: theme,
       id: helperId,
       children: helper
@@ -13179,6 +13550,10 @@ const COMPONENT_NAME$4 = 'Thumbnail';
  * Component default class name and class prefix.
  */
 const CLASSNAME$4 = 'lumx-thumbnail';
+const {
+  block: block$4,
+  element: element$4
+} = classNames.bem(CLASSNAME$4);
 
 /**
  * Component default props.
@@ -13275,23 +13650,23 @@ const Thumbnail = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs(Wrapper, {
     ...wrapperProps,
     ref: ref,
-    className: classNames.join(linkProps?.className, className, handleBasicClasses({
-      align,
-      aspectRatio,
-      prefix: CLASSNAME$4,
-      size,
-      theme,
-      variant,
-      isClickable,
-      hasError,
-      hasIconErrorFallback,
-      hasCustomErrorFallback,
-      isLoading,
-      objectFit,
-      hasBadge: !!badge
-    }), fillHeight && `${CLASSNAME$4}--fill-height`),
+    className: classNames.join(linkProps?.className, className, block$4({
+      [`align-${align}`]: Boolean(align),
+      [`aspect-ratio-${aspectRatio}`]: Boolean(aspectRatio),
+      [`size-${size}`]: Boolean(size),
+      [`theme-${theme}`]: Boolean(theme),
+      [`variant-${variant}`]: Boolean(variant),
+      'is-clickable': isClickable,
+      'has-error': hasError,
+      'has-icon-error-fallback': hasIconErrorFallback,
+      'has-custom-error-fallback': hasCustomErrorFallback,
+      'is-loading': isLoading,
+      [`object-fit-${objectFit}`]: Boolean(objectFit),
+      'has-badge': !!badge,
+      'fill-height': fillHeight
+    })),
     children: [/*#__PURE__*/jsxs("span", {
-      className: `${CLASSNAME$4}__background`,
+      className: element$4('background'),
       children: [/*#__PURE__*/jsx("img", {
         // Use placeholder image size
         width: loadingPlaceholderImage?.naturalWidth,
@@ -13306,17 +13681,16 @@ const Thumbnail = forwardRef((props, ref) => {
           ...loadingStyle
         },
         ref: useMergeRefs(setImgElement, propImgRef),
-        className: classNames.join(handleBasicClasses({
-          prefix: `${CLASSNAME$4}__image`,
-          isLoading,
-          hasDefinedSize: Boolean(imgProps?.height && imgProps.width)
+        className: classNames.join(element$4('image', {
+          'is-loading': isLoading,
+          'has-defined-size': Boolean(imgProps?.height && imgProps.width)
         }), imgProps?.className),
         crossOrigin: crossOrigin,
         src: image,
         alt: alt,
         loading: loading
       }), !isLoading && hasError && /*#__PURE__*/jsx("span", {
-        className: `${CLASSNAME$4}__fallback`,
+        className: element$4('fallback'),
         children: hasIconErrorFallback ? /*#__PURE__*/jsx(Icon, {
           icon: fallback,
           size: Size$1.xxs,
@@ -13324,7 +13698,7 @@ const Thumbnail = forwardRef((props, ref) => {
         }) : fallback
       })]
     }), badge && /*#__PURE__*/React__default.cloneElement(badge, {
-      className: classNames.join(`${CLASSNAME$4}__badge`, badge.props.className)
+      className: classNames.join(element$4('badge'), badge.props.className)
     })]
   });
 });
@@ -13378,6 +13752,10 @@ const COMPONENT_NAME$3 = 'Toolbar';
  * Component default class name and class prefix.
  */
 const CLASSNAME$3 = 'lumx-toolbar';
+const {
+  block: block$3,
+  element: element$3
+} = classNames.bem(CLASSNAME$3);
 
 /**
  * Component default props.
@@ -13402,20 +13780,19 @@ const Toolbar = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      hasAfter: Boolean(after),
-      hasBefore: Boolean(before),
-      hasLabel: Boolean(label),
-      prefix: CLASSNAME$3
+    className: classNames.join(className, block$3({
+      'has-after': Boolean(after),
+      'has-before': Boolean(before),
+      'has-label': Boolean(label)
     })),
     children: [before && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$3}__before`,
+      className: element$3('before'),
       children: before
     }), label && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$3}__label`,
+      className: element$3('label'),
       children: label
     }), after && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$3}__after`,
+      className: element$3('after'),
       children: after
     })]
   });
@@ -13620,6 +13997,10 @@ const COMPONENT_NAME$2 = 'Tooltip';
  * Component default class name and class prefix.
  */
 const CLASSNAME$2 = 'lumx-tooltip';
+const {
+  block: block$2,
+  element: element$2
+} = classNames.bem(CLASSNAME$2);
 
 /**
  * Component default props.
@@ -13710,10 +14091,9 @@ const Tooltip = forwardRef((props, ref) => {
         ...forwardedProps,
         id: id,
         role: "tooltip",
-        className: classNames.join(className, handleBasicClasses({
-          prefix: CLASSNAME$2,
-          position,
-          isInitializing: !styles.popper?.transform
+        className: classNames.join(className, block$2({
+          [`position-${position}`]: Boolean(position),
+          'is-initializing': !styles.popper?.transform
         }), isHidden && classNames.visuallyHidden()),
         style: {
           ...(isHidden ? undefined : styles.popper),
@@ -13721,9 +14101,9 @@ const Tooltip = forwardRef((props, ref) => {
         },
         ...attributes.popper,
         children: [/*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$2}__arrow`
+          className: element$2('arrow')
         }), /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$2}__inner`,
+          className: element$2('inner'),
           children: labelLines.map(line => /*#__PURE__*/jsx("p", {
             children: line
           }, line))
@@ -13763,6 +14143,10 @@ const COMPONENT_NAME$1 = 'Uploader';
  * Component default class name and class prefix.
  */
 const CLASSNAME$1 = 'lumx-uploader';
+const {
+  block: block$1,
+  element: element$1
+} = classNames.bem(CLASSNAME$1);
 
 /**
  * Component default props.
@@ -13836,31 +14220,30 @@ const Uploader = forwardRef((props, ref) => {
     ...wrapper.props,
     ...forwardedProps,
     onClick: handleClick,
-    className: classNames.join(className, handleBasicClasses({
-      aspectRatio: adjustedAspectRatio,
-      prefix: CLASSNAME$1,
-      size,
-      theme,
-      variant,
-      isDragHovering,
-      isDisabled: isAnyDisabled
+    className: classNames.join(className, block$1({
+      [`aspect-ratio-${adjustedAspectRatio}`]: Boolean(adjustedAspectRatio),
+      [`size-${size}`]: Boolean(size),
+      [`theme-${theme}`]: Boolean(theme),
+      [`variant-${variant}`]: Boolean(variant),
+      'is-drag-hovering': isDragHovering,
+      'is-disabled': isAnyDisabled
     })),
     children: [/*#__PURE__*/jsx("span", {
-      className: `${CLASSNAME$1}__background`
+      className: element$1('background')
     }), /*#__PURE__*/jsxs("span", {
-      className: `${CLASSNAME$1}__wrapper`,
+      className: element$1('wrapper'),
       children: [icon && /*#__PURE__*/jsx(Icon, {
-        className: `${CLASSNAME$1}__icon`,
+        className: element$1('icon'),
         icon: icon,
         size: Size$1.s
       }), label && /*#__PURE__*/jsx("span", {
-        className: `${CLASSNAME$1}__label`,
+        className: element$1('label'),
         children: label
       })]
     }), fileInputProps && /*#__PURE__*/jsx("input", {
       type: "file",
       id: inputId,
-      className: `${CLASSNAME$1}__input ${classNames.visuallyHidden()}`,
+      className: classNames.join(element$1('input'), classNames.visuallyHidden()),
       ...disabledStateProps,
       ...fileInputProps,
       readOnly: isAnyDisabled,
@@ -13884,6 +14267,10 @@ const COMPONENT_NAME = 'UserBlock';
  * Component default class name and class prefix.
  */
 const CLASSNAME = 'lumx-user-block';
+const {
+  block,
+  element
+} = classNames.bem(CLASSNAME);
 
 /**
  * Component default props.
@@ -13939,7 +14326,7 @@ const UserBlock = forwardRef((props, ref) => {
     let NameComponent = 'span';
     const nProps = {
       ...nameProps,
-      className: classNames.join(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className)
+      className: classNames.join(element('name'), linkProps?.className, nameProps?.className)
     };
     if (isClickable) {
       NameComponent = Link;
@@ -13964,22 +14351,21 @@ const UserBlock = forwardRef((props, ref) => {
   }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
   const shouldDisplayFields = componentSize !== Size$1.s && componentSize !== Size$1.xs;
   const fieldsBlock = fields && shouldDisplayFields && /*#__PURE__*/jsx("div", {
-    className: `${CLASSNAME}__fields`,
+    className: element('fields'),
     children: fields.map((field, idx) => /*#__PURE__*/jsx(Text, {
       as: "span",
-      className: `${CLASSNAME}__field`,
+      className: element('field'),
       children: field
     }, idx))
   });
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, handleBasicClasses({
-      prefix: CLASSNAME,
-      orientation,
-      size: componentSize,
-      theme,
-      isClickable
+    className: classNames.join(className, block({
+      [`orientation-${orientation}`]: Boolean(orientation),
+      [`size-${componentSize}`]: Boolean(componentSize),
+      [`theme-${theme}`]: Boolean(theme),
+      'is-clickable': isClickable
     })),
     onMouseLeave: onMouseLeave,
     onMouseEnter: onMouseEnter,
@@ -13988,21 +14374,21 @@ const UserBlock = forwardRef((props, ref) => {
       linkProps: linkProps,
       alt: "",
       ...avatarProps,
-      className: classNames.join(`${CLASSNAME}__avatar`, avatarProps.className),
+      className: classNames.join(element('avatar'), avatarProps.className),
       size: componentSize,
       onClick: onClick,
       theme: theme
     }), (fields || name || children || additionalFields) && /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME}__wrapper`,
+      className: element('wrapper'),
       children: [children || nameBlock, fieldsBlock, shouldDisplayFields ? additionalFields : null]
     }), shouldDisplayActions && simpleAction && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME}__action`,
+      className: element('action'),
       children: simpleAction
     }), shouldDisplayActions && multipleActions && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME}__actions`,
+      className: element('actions'),
       children: multipleActions
     }), after ? /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME}__after`,
+      className: element('after'),
       children: after
     }) : null]
   });