@lumx/react 3.10.1-alpha.5 → 3.10.1-alpha.7

package/index.js

@@ -1,11 +1,7 @@
 import * as React from 'react';
 import React__default, { useState, useEffect, useMemo, useRef, Children, isValidElement, cloneElement, useLayoutEffect, useCallback, Fragment, createContext, useContext, useReducer } from 'react';
-import isBoolean from 'lodash/isBoolean';
-import isEmpty from 'lodash/isEmpty';
-import kebabCase from 'lodash/kebabCase';
 import ReactDOM, { createPortal } from 'react-dom';
-import get from 'lodash/get';
-import { C as ClickAwayProvider, i as isEmpty$1 } from './_internal/index.js';
+import { C as ClickAwayProvider, i as isEmpty } from './_internal/index.js';
 
 function ownKeys(e, r) {
   var t = Object.keys(e);
@@ -318,19 +314,10 @@ var classNames = classnames.exports;
 const mdiAlert='M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2z';const mdiAlertCircle='M13 13h-2V7h2m0 10h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';const mdiArrowDown='M11 4h2v12l5.5-5.5 1.42 1.42L12 19.84l-7.92-7.92L5.5 10.5 11 16z';const mdiArrowUp='M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z';const mdiCheck='M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59z';const mdiCheckCircle='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z';const mdiChevronDown='M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6z';const mdiChevronLeft='M15.41 16.58 10.83 12l4.58-4.59L14 6l-6 6 6 6z';const mdiChevronRight='M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6z';const mdiChevronUp='M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z';const mdiClose='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';const mdiCloseCircle='M12 2a10 10 0 1 1 0 20 10 10 0 1 1 0-20m3.59 5L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z';const mdiDragVertical='M9 3h2v2H9zm4 0h2v2h-2zM9 7h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z';const mdiImageBroken='M19 3a2 2 0 0 1 2 2v6h-2v2h-2v2h-2v2h-2v2h-2v2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm2 12v4a2 2 0 0 1-2 2h-4v-2h2v-2h2v-2zm-2-6.5a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5H11v-1h2v-2h2v-2h2V9h2z';const mdiInformation='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';const mdiMagnifyMinusOutline='M15.5 14h-.79l-.28-.27A6.5 6.5 0 0 0 16 9.5 6.5 6.5 0 0 0 9.5 3 6.5 6.5 0 0 0 3 9.5 6.5 6.5 0 0 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5 1.5-1.5zm-6 0C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14M7 9h5v1H7z';const mdiMagnifyPlusOutline='m15.5 14 5 5-1.5 1.5-5-5v-.79l-.27-.28A6.5 6.5 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3 6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.57 4.23l.28.27zm-6 0C12 14 14 12 14 9.5S12 5 9.5 5 5 7 5 9.5 7 14 9.5 14m2.5-4h-2v2H9v-2H7V9h2V7h1v2h2z';const mdiMenuDown='m7 10 5 5 5-5z';const mdiMinus='M19 13H5v-2h14z';const mdiPauseCircleOutline='M13 16V8h2v8zm-4 0V8h2v8zm3-14a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8';const mdiPlayCircleOutline='M12 20a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m-2 14.5 6-4.5-6-4.5z';const mdiRadioboxBlank='M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';const mdiRadioboxMarked='M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 5a5 5 0 0 0-5 5 5 5 0 0 0 5 5 5 5 0 0 0 5-5 5 5 0 0 0-5-5';
 
 const _excluded$1t = ["prefix"];
-
-/**
- * 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);
-};
+/** Transform camelCase to kebab-case */
+function camelToKebabCase(str) {
+  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
 
 /**
  * Get the basic CSS class for the given type.
@@ -346,18 +333,18 @@ function getBasicClass(_ref) {
     type,
     value
   } = _ref;
-  if (isBoolean(value)) {
+  if (typeof value === 'boolean') {
     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}--${camelToKebabCase(type)}`;
     }
-    return `${prefix}--is-${kebabCase(type)}`;
+    return `${prefix}--is-${camelToKebabCase(type)}`;
   }
-  return `${prefix}--${kebabCase(type)}-${value}`;
+  return `${prefix}--${camelToKebabCase(type)}-${value}`;
 }
 
 /**
@@ -377,14 +364,18 @@ function handleBasicClasses(_ref2) {
     } = _ref2,
     props = _objectWithoutProperties(_ref2, _excluded$1t);
   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]);
-    });
+  const propKeys = Object.keys(props);
+  if (propKeys.length > 1) {
+    for (const prop of propKeys) {
+      if (props[prop]) {
+        const className = getBasicClass({
+          prefix,
+          type: prop,
+          value: props[prop]
+        });
+        otherClasses[className] = true;
+      }
+    }
   }
   return classNames(prefix, otherClasses);
 }
@@ -514,58 +505,6 @@ function onButtonPressed(handler) {
   };
 }
 
-/**
- * The prefix to use for the CSS classes.
- */
-const CSS_PREFIX = 'lumx';
-
-/**
- * Animation duration constants. Take into consideration that if you change one of these variables,
- * you need to update their scss counterpart as well
- */
-const DIALOG_TRANSITION_DURATION = 400;
-const EXPANSION_PANEL_TRANSITION_DURATION = 400;
-const NOTIFICATION_TRANSITION_DURATION = 200;
-
-/**
- * Delay on hover after which we open or close the tooltip.
- * Only applies to devices supporting pointer hover.
- */
-const TOOLTIP_HOVER_DELAY = {
-  open: 500,
-  close: 500
-};
-
-/**
- * Delay on long press after which we open or close the tooltip.
- * Only applies to devices not supporting pointer hover.
- */
-const TOOLTIP_LONG_PRESS_DELAY = {
-  open: 250,
-  close: 3000
-};
-
-// See https://regex101.com/r/YjS1uI/3
-const LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;
-
-/**
- * Get the name of the root CSS class of a component based on its name.
- *
- * @param  componentName The name of the component. This name should contains the component prefix and be
- *                       written in PascalCase.
- * @param  subComponent Whether the current component is a sub component, if true, define the class according
- *                      to BEM standards.
- * @return The name of the root CSS class. This classname include the CSS classname prefix and is written in
- *         lower-snake-case.
- */
-function getRootClassName(componentName, subComponent) {
-  const formattedClassName = `${CSS_PREFIX}-${kebabCase(componentName)}`;
-  if (subComponent) {
-    return formattedClassName.replace(LAST_PART_CLASSNAME, '$1__$2');
-  }
-  return formattedClassName;
-}
-
 /**
  * Returns the classname associated to the given typography.
  * For example, for `Typography.title` it returns `lumx-typography-title`
@@ -630,12 +569,12 @@ const CONFIG$1 = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1n = 'AlertDialog';
+const COMPONENT_NAME$1l = 'AlertDialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1k = getRootClassName(COMPONENT_NAME$1n);
+const CLASSNAME$1k = 'lumx-alert-dialog';
 
 /**
  * Component default props.
@@ -735,7 +674,7 @@ const AlertDialog = forwardRef((props, ref) => {
     }), confirmLabel))
   })));
 });
-AlertDialog.displayName = COMPONENT_NAME$1n;
+AlertDialog.displayName = COMPONENT_NAME$1l;
 AlertDialog.className = CLASSNAME$1k;
 AlertDialog.defaultProps = DEFAULT_PROPS$14;
 
@@ -809,12 +748,12 @@ const _excluded$1r = ["anchorToInput", "children", "chips", "className", "closeO
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1m = 'Autocomplete';
+const COMPONENT_NAME$1k = 'Autocomplete';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1j = getRootClassName(COMPONENT_NAME$1m);
+const CLASSNAME$1j = 'lumx-autocomplete';
 
 /**
  * Component default props.
@@ -916,7 +855,7 @@ const Autocomplete = forwardRef((props, ref) => {
     theme: theme
   }, children));
 });
-Autocomplete.displayName = COMPONENT_NAME$1m;
+Autocomplete.displayName = COMPONENT_NAME$1k;
 Autocomplete.className = CLASSNAME$1j;
 Autocomplete.defaultProps = DEFAULT_PROPS$13;
 
@@ -929,12 +868,12 @@ const _excluded$1q = ["anchorToInput", "children", "chipsAlignment", "className"
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1l = 'AutocompleteMultiple';
+const COMPONENT_NAME$1j = 'AutocompleteMultiple';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1i = getRootClassName(COMPONENT_NAME$1l);
+const CLASSNAME$1i = 'lumx-autocomplete-multiple';
 
 /**
  * Component default props.
@@ -1043,7 +982,7 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     onInfiniteScroll: onInfiniteScroll
   }), children);
 });
-AutocompleteMultiple.displayName = COMPONENT_NAME$1l;
+AutocompleteMultiple.displayName = COMPONENT_NAME$1j;
 AutocompleteMultiple.className = CLASSNAME$1i;
 AutocompleteMultiple.defaultProps = DEFAULT_PROPS$12;
 
@@ -1060,12 +999,12 @@ const _excluded$1p = ["actions", "alt", "badge", "className", "image", "linkProp
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1k = 'Avatar';
+const COMPONENT_NAME$1i = 'Avatar';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1h = getRootClassName(COMPONENT_NAME$1k);
+const CLASSNAME$1h = 'lumx-avatar';
 
 /**
  * Component default props.
@@ -1124,7 +1063,7 @@ const Avatar = forwardRef((props, ref) => {
     className: `${CLASSNAME$1h}__badge`
   }, badge));
 });
-Avatar.displayName = COMPONENT_NAME$1k;
+Avatar.displayName = COMPONENT_NAME$1i;
 Avatar.className = CLASSNAME$1h;
 Avatar.defaultProps = DEFAULT_PROPS$11;
 
@@ -1137,12 +1076,12 @@ const _excluded$1o = ["children", "className", "color"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1j = 'Badge';
+const COMPONENT_NAME$1h = 'Badge';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1g = getRootClassName(COMPONENT_NAME$1j);
+const CLASSNAME$1g = 'lumx-badge';
 
 /**
  * Component default props.
@@ -1174,7 +1113,7 @@ const Badge = forwardRef((props, ref) => {
     }))
   }), children);
 });
-Badge.displayName = COMPONENT_NAME$1j;
+Badge.displayName = COMPONENT_NAME$1h;
 Badge.className = CLASSNAME$1g;
 Badge.defaultProps = DEFAULT_PROPS$10;
 
@@ -1377,12 +1316,12 @@ const _excluded$1m = ["after", "before", "children", "className", "isHighlighted
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1i = 'ListItem';
+const COMPONENT_NAME$1g = 'ListItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1f = getRootClassName(COMPONENT_NAME$1i);
+const CLASSNAME$1f = 'lumx-list-item';
 
 /**
  * Component default props.
@@ -1473,78 +1412,15 @@ const ListItem = forwardRef((props, ref) => {
     className: `${CLASSNAME$1f}__wrapper`
   }, content));
 });
-ListItem.displayName = COMPONENT_NAME$1i;
+ListItem.displayName = COMPONENT_NAME$1g;
 ListItem.className = CLASSNAME$1f;
 ListItem.defaultProps = DEFAULT_PROPS$$;
 
-/** Get types of the values of a record. */
-
-/**
- * Properties of a component to use to determine it's name.
- * In the order of preference.
- */
-const NAME_PROPERTIES = ['type', 'type.displayName', 'displayName', 'name', 'type.name', 'props.mdxType', '_reactInternalFiber.elementType.name'];
-
-/** LumX Component Type. */
-
-/** Union type of all heading elements */
-
-/** Union type of all text elements */
-
-/**
- * Define a generic props types.
- */
-
-/**
- * Callback function type alias (use for readability)
- */
-
-/**
- * Create a predicate function that checks if a ReactNode is a react element from the given component.
- *
- * @param  component React function component or the component name
- * @return predicate returning true if value is instance of the component
- */
-const isComponent = component => instance => {
-  const componentName = typeof component === 'string' ? component : component.displayName;
-  return !!get(instance, '$$typeof') && NAME_PROPERTIES.some(nameProperty => get(instance, nameProperty) === componentName);
-};
-
 /**
  * Similar to `isComponent` but more precise as it's not based on the component `displayName` but on the component function reference.
  */
 const isComponentType = type => node => /*#__PURE__*/React__default.isValidElement(node) && node.type === type;
 
-/**
- * JS falsy values.
- * (excluding `NaN` as it can't be distinguished from `number`)
- */
-
-/**
- * Require either `aria-label` or `arial-labelledby` prop.
- * If none are set, the order will prioritize `aria-labelledby` over `aria-label` as it
- * needs a visible element.
- */
-
-/**
- * Extract ref type for a component or JSX intrinsic element
- *
- * @example ComponentRef<'div'> => React.Ref<HTMLDivElement>
- * @example ComponentRef<Button> => React.Ref<HTMLButtonElement
- */
-
-/**
- * Rectangle size
- */
-
-/**
- * Maybe a HTMLElement or a React ref of a HTMLElement
- */
-
-/**
- * A point coordinate in 2D space
- */
-
 var reactIs = {exports: {}};
 
 var reactIs_production_min = {};
@@ -1848,7 +1724,7 @@ function onKeyboardFocus(props, handler) {
   };
 }
 const isNavigableItem = node => {
-  return isComponent('ListItem')(node) && isClickable(node.props) && !node.props.isDisabled;
+  return isComponentType(ListItem)(node) && isClickable(node.props) && !node.props.isDisabled;
 };
 
 /**
@@ -1985,12 +1861,12 @@ const _excluded$1l = ["children", "className", "isClickable", "itemPadding", "on
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1h = 'List';
+const COMPONENT_NAME$1f = 'List';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1e = getRootClassName(COMPONENT_NAME$1h);
+const CLASSNAME$1e = 'lumx-list';
 
 /**
  * Component default props.
@@ -2036,13 +1912,44 @@ const InternalList = forwardRef((props, ref) => {
     ref: mergeRefs(ref, listElementRef)
   }), items);
 });
-InternalList.displayName = COMPONENT_NAME$1h;
+InternalList.displayName = COMPONENT_NAME$1f;
 InternalList.className = CLASSNAME$1e;
 InternalList.defaultProps = DEFAULT_PROPS$_;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
 });
 
+/**
+ * The prefix to use for the CSS classes.
+ */
+const CSS_PREFIX = 'lumx';
+
+/**
+ * Animation duration constants. Take into consideration that if you change one of these variables,
+ * you need to update their scss counterpart as well
+ */
+const DIALOG_TRANSITION_DURATION = 400;
+const EXPANSION_PANEL_TRANSITION_DURATION = 400;
+const NOTIFICATION_TRANSITION_DURATION = 200;
+
+/**
+ * Delay on hover after which we open or close the tooltip.
+ * Only applies to devices supporting pointer hover.
+ */
+const TOOLTIP_HOVER_DELAY = {
+  open: 500,
+  close: 500
+};
+
+/**
+ * Delay on long press after which we open or close the tooltip.
+ * Only applies to devices not supporting pointer hover.
+ */
+const TOOLTIP_LONG_PRESS_DELAY = {
+  open: 250,
+  close: 3000
+};
+
 /**
  * Optional global `window` instance (not defined when running SSR).
  */
@@ -4670,12 +4577,12 @@ const _excluded$1k = ["anchorRef", "as", "children", "className", "closeOnClickA
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1g = 'Popover';
+const COMPONENT_NAME$1e = 'Popover';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1d = getRootClassName(COMPONENT_NAME$1g);
+const CLASSNAME$1d = 'lumx-popover';
 
 /**
  * Component default props.
@@ -4781,7 +4688,7 @@ const _InnerPopover = forwardRef((props, ref) => {
     value: undefined
   }, children))), usePortal) : null;
 });
-_InnerPopover.displayName = COMPONENT_NAME$1g;
+_InnerPopover.displayName = COMPONENT_NAME$1e;
 
 /**
  * Popover component.
@@ -4793,7 +4700,7 @@ _InnerPopover.displayName = COMPONENT_NAME$1g;
 const Popover = skipRender(
 // Skip render in SSR
 () => Boolean(DOCUMENT), _InnerPopover);
-Popover.displayName = COMPONENT_NAME$1g;
+Popover.displayName = COMPONENT_NAME$1e;
 Popover.className = CLASSNAME$1d;
 Popover.defaultProps = DEFAULT_PROPS$Z;
 
@@ -4849,12 +4756,12 @@ const _excluded$1j = ["anchorRef", "children", "className", "closeOnClick", "clo
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1f = 'Dropdown';
+const COMPONENT_NAME$1d = 'Dropdown';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1c = getRootClassName(COMPONENT_NAME$1f);
+const CLASSNAME$1c = 'lumx-dropdown';
 
 /**
  * Component default props.
@@ -4901,7 +4808,7 @@ const Dropdown = forwardRef((props, ref) => {
   const listElement = useRef(null);
   useInfiniteScroll(innerRef, onInfiniteScroll);
   const popperElement = useMemo(() => {
-    return !Array.isArray(children) && isComponent(List)(children) ? /*#__PURE__*/cloneElement(children, _objectSpread2(_objectSpread2({}, children.props), {}, {
+    return !Array.isArray(children) && isComponentType(List)(children) ? /*#__PURE__*/cloneElement(children, _objectSpread2(_objectSpread2({}, children.props), {}, {
       ref: listElement,
       onClick(evt) {
         var _children$props$onCli, _children$props;
@@ -4935,7 +4842,7 @@ const Dropdown = forwardRef((props, ref) => {
     ref: innerRef
   }, popperElement)) : null;
 });
-Dropdown.displayName = COMPONENT_NAME$1f;
+Dropdown.displayName = COMPONENT_NAME$1d;
 Dropdown.className = CLASSNAME$1c;
 Dropdown.defaultProps = DEFAULT_PROPS$Y;
 
@@ -4960,12 +4867,12 @@ const _excluded$1i = ["children", "className", "kind", "theme"];
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1e = 'InputHelper';
+const COMPONENT_NAME$1c = 'InputHelper';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1b = getRootClassName(COMPONENT_NAME$1e);
+const CLASSNAME$1b = 'lumx-input-helper';
 
 /**
  * Component default props.
@@ -5003,7 +4910,7 @@ const InputHelper = forwardRef((props, ref) => {
     }))
   }), children);
 });
-InputHelper.displayName = COMPONENT_NAME$1e;
+InputHelper.displayName = COMPONENT_NAME$1c;
 InputHelper.className = CLASSNAME$1b;
 InputHelper.defaultProps = DEFAULT_PROPS$X;
 
@@ -5041,11 +4948,8 @@ const SelectVariant = {
 
 const _excluded$1h = ["children", "className", "focusElement", "isMultiple", "closeOnClick", "disabled", "error", "hasError", "helper", "id", "isDisabled", "isEmpty", "isOpen", "isRequired", "isValid", "label", "onClear", "onDropdownClose", "onInfiniteScroll", "onInputClick", "placeholder", "theme", "value", "variant"];
 
-/** The display name of the component. */
-const COMPONENT_NAME$1d = 'Select';
-
 /** The default class name and classes prefix for this component. */
-const CLASSNAME$1a = getRootClassName(COMPONENT_NAME$1d);
+const CLASSNAME$1a = 'lumx-select';
 
 /** The default value of props. */
 const DEFAULT_PROPS$W = {
@@ -5155,15 +5059,11 @@ const WithSelectContext = (SelectElement, props, ref) => {
 };
 
 const _excluded$1g = ["badge", "children", "className"];
-/**
- * Component display name.
- */
-const COMPONENT_NAME$1c = 'BadgeWrapper';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$19 = getRootClassName(COMPONENT_NAME$1c);
+const CLASSNAME$19 = 'lumx-badge-wrapper';
 const BadgeWrapper = forwardRef((props, ref) => {
   const {
       badge,
@@ -5331,7 +5231,7 @@ const COMPONENT_NAME$1a = 'Button';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$18 = getRootClassName(COMPONENT_NAME$1a);
+const CLASSNAME$18 = 'lumx-button';
 
 /**
  * Component default props.
@@ -5380,7 +5280,7 @@ const Button = forwardRef((props, ref) => {
     variant: "button"
   }), leftIcon && /*#__PURE__*/React__default.createElement(Icon, {
     icon: leftIcon
-  }), children && (isComponent(Text)(children) ? children : /*#__PURE__*/React__default.createElement("span", null, children)), rightIcon && /*#__PURE__*/React__default.createElement(Icon, {
+  }), children && (isComponentType(Text)(children) ? children : /*#__PURE__*/React__default.createElement("span", null, children)), rightIcon && /*#__PURE__*/React__default.createElement(Icon, {
     icon: rightIcon
   }));
 });
@@ -5397,7 +5297,7 @@ const COMPONENT_NAME$19 = 'IconButton';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$17 = getRootClassName(COMPONENT_NAME$19);
+const CLASSNAME$17 = 'lumx-icon-button';
 
 /**
  * Component default props.
@@ -5464,7 +5364,7 @@ const COMPONENT_NAME$18 = 'ButtonGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$16 = getRootClassName(COMPONENT_NAME$18);
+const CLASSNAME$16 = 'lumx-button-group';
 
 /**
  * Component default props.
@@ -5513,7 +5413,7 @@ const COMPONENT_NAME$17 = 'Checkbox';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$15 = getRootClassName(COMPONENT_NAME$17);
+const CLASSNAME$15 = 'lumx-checkbox';
 
 /**
  * Component default props.
@@ -5643,7 +5543,7 @@ const COMPONENT_NAME$16 = 'Chip';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$14 = getRootClassName(COMPONENT_NAME$16);
+const CLASSNAME$14 = 'lumx-chip';
 
 /**
  * Component default props.
@@ -5814,7 +5714,7 @@ const COMPONENT_NAME$15 = 'ChipGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$13 = getRootClassName(COMPONENT_NAME$15);
+const CLASSNAME$13 = 'lumx-chip-group';
 
 /**
  * ChipGroup component.
@@ -5864,7 +5764,7 @@ const COMPONENT_NAME$14 = 'CommentBlock';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$12 = getRootClassName(COMPONENT_NAME$14);
+const CLASSNAME$12 = 'lumx-comment-block';
 
 /**
  * Component default props.
@@ -5978,7 +5878,7 @@ const COMPONENT_NAME$13 = 'DatePicker';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$11 = getRootClassName(COMPONENT_NAME$13);
+const CLASSNAME$11 = 'lumx-date-picker';
 
 /** Get first day of week for locale from the browser API */
 const getFromBrowser = locale => {
@@ -6861,8 +6761,8 @@ const _excluded$15 = ["children", "className", "header", "focusElement", "forceF
  * Defines the props of the component.
  */
 
-const isHeader$1 = isComponent('header');
-const isFooter$1 = isComponent('footer');
+const isHeader$1 = isComponentType('header');
+const isFooter$1 = isComponentType('footer');
 
 /**
  * Component display name.
@@ -6872,7 +6772,7 @@ const COMPONENT_NAME$10 = 'Dialog';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$10 = getRootClassName(COMPONENT_NAME$10);
+const CLASSNAME$10 = 'lumx-dialog';
 
 /**
  * Component default props.
@@ -7045,7 +6945,7 @@ const COMPONENT_NAME$$ = 'Divider';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$$ = getRootClassName(COMPONENT_NAME$$);
+const CLASSNAME$$ = 'lumx-divider';
 
 /**
  * Component default props.
@@ -7093,7 +6993,7 @@ const COMPONENT_NAME$_ = 'DragHandle';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$_ = getRootClassName(COMPONENT_NAME$_);
+const CLASSNAME$_ = 'lumx-drag-handle';
 
 /**
  * DragHandle component.
@@ -7139,15 +7039,15 @@ const COMPONENT_NAME$Z = 'ExpansionPanel';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Z = getRootClassName(COMPONENT_NAME$Z);
+const CLASSNAME$Z = 'lumx-expansion-panel';
 
 /**
  * Component default props.
  */
 const DEFAULT_PROPS$M = {};
-const isDragHandle = isComponent(DragHandle);
-const isHeader = isComponent('header');
-const isFooter = isComponent('footer');
+const isDragHandle = isComponentType(DragHandle);
+const isHeader = isComponentType('header');
+const isFooter = isComponentType('footer');
 
 /**
  * ExpansionPanel component.
@@ -7195,7 +7095,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
   const rootClassName = classNames(className, handleBasicClasses({
     hasBackground,
-    hasHeader: Boolean(!isEmpty$1(headerProps.children)),
+    hasHeader: Boolean(!isEmpty(headerProps.children)),
     hasHeaderDivider,
     isClose: !isOpen,
     isDraggable: Boolean(dragHandle),
@@ -7253,7 +7153,7 @@ ExpansionPanel.defaultProps = DEFAULT_PROPS$M;
 
 const _excluded$11 = ["label", "icon", "color", "className", "theme", "truncate"];
 const COMPONENT_NAME$Y = 'Flag';
-const CLASSNAME$Y = getRootClassName(COMPONENT_NAME$Y);
+const CLASSNAME$Y = 'lumx-flag';
 const DEFAULT_PROPS$L = {};
 
 /**
@@ -7315,7 +7215,7 @@ const COMPONENT_NAME$X = 'FlexBox';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$X = getRootClassName(COMPONENT_NAME$X);
+const CLASSNAME$X = 'lumx-flex-box';
 
 /**
  * FlexBox component.
@@ -7363,7 +7263,7 @@ const COMPONENT_NAME$W = 'GenericBlock';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$W = getRootClassName(COMPONENT_NAME$W);
+const CLASSNAME$W = 'lumx-generic-block';
 
 /**
  * Component default props.
@@ -7523,7 +7423,7 @@ const COMPONENT_NAME$V = 'Text';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$V = getRootClassName(COMPONENT_NAME$V);
+const CLASSNAME$V = 'lumx-text';
 
 /**
  * Component default props.
@@ -7584,7 +7484,7 @@ const Text = forwardRef((props, ref) => {
     style: _objectSpread2(_objectSpread2(_objectSpread2({}, truncateLinesStyle), whiteSpaceStyle), style)
   }, forwardedProps), children && Children.toArray(children).map((child, index) => {
     // Force wrap spaces around icons to make sure they are never stuck against text.
-    if (isComponent(Icon)(child)) {
+    if (isComponentType(Icon)(child)) {
       return /*#__PURE__*/React__default.createElement(Fragment, {
         key: child.key || index
       }, " ", child, " ");
@@ -7642,7 +7542,7 @@ const COMPONENT_NAME$U = 'Heading';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$U = getRootClassName(COMPONENT_NAME$U);
+const CLASSNAME$U = 'lumx-heading';
 
 /**
  * Component default props.
@@ -7713,7 +7613,7 @@ const COMPONENT_NAME$T = 'Grid';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$T = getRootClassName(COMPONENT_NAME$T);
+const CLASSNAME$T = 'lumx-grid';
 
 /**
  * Component default props.
@@ -7774,7 +7674,7 @@ const COMPONENT_NAME$S = 'GridItem';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$S = getRootClassName(COMPONENT_NAME$S);
+const CLASSNAME$S = 'lumx-grid-item';
 
 /**
  * GridItem component.
@@ -7820,7 +7720,7 @@ const COMPONENT_NAME$R = 'GridColumn';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$R = getRootClassName(COMPONENT_NAME$R);
+const CLASSNAME$R = 'lumx-grid-column';
 
 /**
  * Component default props.
@@ -7875,7 +7775,7 @@ const COMPONENT_NAME$Q = 'Icon';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Q = getRootClassName(COMPONENT_NAME$Q);
+const CLASSNAME$Q = 'lumx-icon';
 
 /**
  * Component default props.
@@ -8040,7 +7940,7 @@ const COMPONENT_NAME$P = 'ImageBlock';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$P = getRootClassName(COMPONENT_NAME$P);
+const CLASSNAME$P = 'lumx-image-block';
 
 /**
  * Component default props.
@@ -8124,7 +8024,7 @@ const COMPONENT_NAME$O = 'ImageLightbox';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$O = getRootClassName(COMPONENT_NAME$O);
+const CLASSNAME$O = 'lumx-image-lightbox';
 
 /**
  * Observe element size (only works if it's size depends on the window size).
@@ -8874,7 +8774,7 @@ const COMPONENT_NAME$N = 'InlineList';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$N = getRootClassName(COMPONENT_NAME$N);
+const CLASSNAME$N = 'lumx-inline-list';
 
 /**
  * Component default props.
@@ -8945,7 +8845,7 @@ const COMPONENT_NAME$M = 'InputLabel';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$M = getRootClassName(COMPONENT_NAME$M);
+const CLASSNAME$M = 'lumx-input-label';
 
 /**
  * Component default props.
@@ -8998,7 +8898,7 @@ const COMPONENT_NAME$L = 'Lightbox';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$L = getRootClassName(COMPONENT_NAME$L);
+const CLASSNAME$L = 'lumx-lightbox';
 
 /**
  * Lightbox component.
@@ -9131,7 +9031,7 @@ const COMPONENT_NAME$K = 'Link';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$K = getRootClassName(COMPONENT_NAME$K);
+const CLASSNAME$K = 'lumx-link';
 const getIconSize = typography => {
   switch (typography) {
     case Typography.display1:
@@ -9242,7 +9142,7 @@ const COMPONENT_NAME$J = 'LinkPreview';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$J = getRootClassName(COMPONENT_NAME$J);
+const CLASSNAME$J = 'lumx-link-preview';
 
 /**
  * Component default props.
@@ -9342,7 +9242,7 @@ const COMPONENT_NAME$I = 'ListDivider';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$I = getRootClassName(COMPONENT_NAME$I);
+const CLASSNAME$I = 'lumx-list-divider';
 
 /**
  * ListDivider component.
@@ -9379,7 +9279,7 @@ const COMPONENT_NAME$H = 'ListSubheader';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$H = getRootClassName(COMPONENT_NAME$H);
+const CLASSNAME$H = 'lumx-list-subheader';
 
 /**
  * ListSubheader component.
@@ -9417,7 +9317,7 @@ const COMPONENT_NAME$G = 'Message';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$G = getRootClassName(COMPONENT_NAME$G);
+const CLASSNAME$G = 'lumx-message';
 
 /**
  * Associative map from message kind to color and icon.
@@ -9507,7 +9407,7 @@ const COMPONENT_NAME$F = 'Mosaic';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$F = getRootClassName(COMPONENT_NAME$F);
+const CLASSNAME$F = 'lumx-mosaic';
 
 /**
  * Component default props.
@@ -9596,7 +9496,7 @@ const COMPONENT_NAME$E = 'NavigationItem';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$E = getRootClassName(COMPONENT_NAME$E);
+const CLASSNAME$E = 'lumx-navigation-item';
 const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
   const {
       className,
@@ -9658,7 +9558,7 @@ const COMPONENT_NAME$D = 'NavigationSection';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$D = getRootClassName(COMPONENT_NAME$D);
+const CLASSNAME$D = 'lumx-navigation-section';
 const NavigationSection = forwardRef((props, ref) => {
   const {
       children,
@@ -9739,7 +9639,7 @@ const COMPONENT_NAME$C = 'Navigation';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$C = getRootClassName(COMPONENT_NAME$C);
+const CLASSNAME$C = 'lumx-navigation';
 
 /**
  * Component default props
@@ -9817,7 +9717,7 @@ const COMPONENT_NAME$B = 'Notification';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$B = getRootClassName(COMPONENT_NAME$B);
+const CLASSNAME$B = 'lumx-notification';
 
 /**
  * Component default props.
@@ -9921,7 +9821,7 @@ const COMPONENT_NAME$A = 'PopoverDialog';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$A = getRootClassName(COMPONENT_NAME$A);
+const CLASSNAME$A = 'lumx-popover-dialog';
 
 /**
  * Component default props.
@@ -9980,7 +9880,7 @@ const COMPONENT_NAME$z = 'PostBlock';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$z = getRootClassName(COMPONENT_NAME$z);
+const CLASSNAME$z = 'lumx-post-block';
 
 /**
  * Component default props.
@@ -10067,7 +9967,7 @@ const COMPONENT_NAME$y = 'ProgressLinear';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$y = getRootClassName(COMPONENT_NAME$y);
+const CLASSNAME$y = 'lumx-progress-linear';
 
 /**
  * Component default props.
@@ -10123,7 +10023,7 @@ const COMPONENT_NAME$x = 'ProgressCircular';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$x = getRootClassName(COMPONENT_NAME$x);
+const CLASSNAME$x = 'lumx-progress-circular';
 
 /**
  * Component default props.
@@ -10197,7 +10097,7 @@ const COMPONENT_NAME$w = 'Progress';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$w = getRootClassName(COMPONENT_NAME$w);
+const CLASSNAME$w = 'lumx-progress';
 
 /**
  * Component default props.
@@ -10498,7 +10398,7 @@ const COMPONENT_NAME$v = 'ProgressTracker';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$v = getRootClassName(COMPONENT_NAME$v);
+const CLASSNAME$v = 'lumx-progress-tracker';
 
 /**
  * Component default props.
@@ -10574,7 +10474,7 @@ const COMPONENT_NAME$u = 'ProgressTrackerStep';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$u = getRootClassName(COMPONENT_NAME$u);
+const CLASSNAME$u = 'lumx-progress-tracker-step';
 
 /**
  * Component default props.
@@ -10743,7 +10643,7 @@ const COMPONENT_NAME$s = 'RadioButton';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$s = getRootClassName(COMPONENT_NAME$s);
+const CLASSNAME$s = 'lumx-radio-button';
 
 /**
  * Component default props.
@@ -10843,7 +10743,7 @@ const COMPONENT_NAME$r = 'RadioGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$r = getRootClassName(COMPONENT_NAME$r);
+const CLASSNAME$r = 'lumx-radio-group';
 
 /**
  * RadioGroup component.
@@ -10873,7 +10773,7 @@ const _excluded$t = ["anchorRef", "clearButtonProps", "handleKeyboardNav", "hasE
 const COMPONENT_NAME$q = 'Select';
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME$q = getRootClassName(COMPONENT_NAME$q);
+const CLASSNAME$q = 'lumx-select';
 
 /** The default value of props. */
 const DEFAULT_PROPS$n = {
@@ -10996,7 +10896,7 @@ const _excluded$s = ["anchorRef", "handleKeyboardNav", "hasError", "icon", "id",
 const COMPONENT_NAME$p = 'Select';
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME$p = getRootClassName(COMPONENT_NAME$p);
+const CLASSNAME$p = 'lumx-select';
 
 /** The default value of props. */
 const DEFAULT_PROPS$m = {
@@ -11124,7 +11024,7 @@ const COMPONENT_NAME$o = 'SideNavigation';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$o = getRootClassName(COMPONENT_NAME$o);
+const CLASSNAME$o = 'lumx-side-navigation';
 
 /**
  * SideNavigation component.
@@ -11141,7 +11041,7 @@ const SideNavigation = forwardRef((props, ref) => {
       theme = defaultTheme
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$r);
-  const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
+  const content = Children.toArray(children).filter(isComponentType(SideNavigationItem));
   return /*#__PURE__*/React__default.createElement("ul", _extends({
     ref: ref
   }, forwardedProps, {
@@ -11184,7 +11084,7 @@ const COMPONENT_NAME$n = 'SideNavigationItem';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$n = getRootClassName(COMPONENT_NAME$n);
+const CLASSNAME$n = 'lumx-side-navigation-item';
 
 /**
  * Component default props.
@@ -11218,8 +11118,8 @@ const SideNavigationItem = forwardRef((props, ref) => {
       closeMode = 'unmount'
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$p);
-  const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
-  const hasContent = !isEmpty$1(content);
+  const content = children && Children.toArray(children).filter(isComponentType(SideNavigationItem));
+  const hasContent = !isEmpty(content);
   const shouldSplitActions = Boolean(onActionClick);
   const showChildren = hasContent && isOpen;
   const contentId = useId();
@@ -11295,7 +11195,7 @@ const COMPONENT_NAME$m = 'SkeletonCircle';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$m = getRootClassName(COMPONENT_NAME$m);
+const CLASSNAME$m = 'lumx-skeleton-circle';
 
 /**
  * SkeletonCircle component.
@@ -11355,7 +11255,7 @@ const COMPONENT_NAME$l = 'SkeletonRectangle';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$l = getRootClassName(COMPONENT_NAME$l);
+const CLASSNAME$l = 'lumx-skeleton-rectangle';
 
 /**
  * SkeletonRectangle component.
@@ -11412,7 +11312,7 @@ const COMPONENT_NAME$k = 'SkeletonTypography';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$k = getRootClassName(COMPONENT_NAME$k);
+const CLASSNAME$k = 'lumx-skeleton-typography';
 
 /**
  * SkeletonTypography component.
@@ -11499,7 +11399,7 @@ const COMPONENT_NAME$j = 'Slider';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$j = getRootClassName(COMPONENT_NAME$j);
+const CLASSNAME$j = 'lumx-slider';
 
 /**
  * Component default props.
@@ -12082,7 +11982,7 @@ const COMPONENT_NAME$i = 'SlideshowItemGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$i = getRootClassName(COMPONENT_NAME$i);
+const CLASSNAME$i = 'lumx-slideshow-item-group';
 const buildSlideShowGroupId = (slidesId, index) => `${slidesId}-slide-${index}`;
 
 /**
@@ -12248,7 +12148,7 @@ const COMPONENT_NAME$h = 'SlideshowItem';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$h = getRootClassName(COMPONENT_NAME$h);
+const CLASSNAME$h = 'lumx-slideshow-item';
 
 /**
  * SlideshowItem component.
@@ -12348,7 +12248,7 @@ const COMPONENT_NAME$g = 'SlideshowControls';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$g = getRootClassName(COMPONENT_NAME$g);
+const CLASSNAME$g = 'lumx-slideshow-controls';
 
 /**
  * Component default props.
@@ -12501,7 +12401,7 @@ const COMPONENT_NAME$f = 'Slideshow';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$f = getRootClassName(COMPONENT_NAME$f);
+const CLASSNAME$f = 'lumx-slideshow';
 
 /**
  * Slides component.
@@ -12587,7 +12487,7 @@ const COMPONENT_NAME$e = 'Switch';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$e = getRootClassName(COMPONENT_NAME$e);
+const CLASSNAME$e = 'lumx-switch';
 
 /**
  * Component default props.
@@ -12691,7 +12591,7 @@ const COMPONENT_NAME$d = 'Table';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$d = getRootClassName(COMPONENT_NAME$d);
+const CLASSNAME$d = 'lumx-table';
 
 /**
  * Component default props.
@@ -12744,7 +12644,7 @@ const COMPONENT_NAME$c = 'TableBody';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$c = getRootClassName(COMPONENT_NAME$c, true);
+const CLASSNAME$c = 'lumx-table__body';
 
 /**
  * TableBody component.
@@ -12797,7 +12697,7 @@ const COMPONENT_NAME$b = 'TableCell';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$b = getRootClassName(COMPONENT_NAME$b, true);
+const CLASSNAME$b = 'lumx-table__cell';
 
 /**
  * Component default props.
@@ -12888,7 +12788,7 @@ const COMPONENT_NAME$a = 'TableHeader';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$a = getRootClassName(COMPONENT_NAME$a, true);
+const CLASSNAME$a = 'lumx-table__header';
 
 /**
  * Component default props.
@@ -12932,7 +12832,7 @@ const COMPONENT_NAME$9 = 'TableRow';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$9 = getRootClassName(COMPONENT_NAME$9, true);
+const CLASSNAME$9 = 'lumx-table__row';
 
 /**
  * Component default props.
@@ -13264,7 +13164,7 @@ const COMPONENT_NAME$5 = 'TextField';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$5 = getRootClassName(COMPONENT_NAME$5);
+const CLASSNAME$5 = 'lumx-text-field';
 
 /**
  * Default minimum number of rows in the multiline mode.
@@ -13733,7 +13633,7 @@ const COMPONENT_NAME$4 = 'Thumbnail';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$4 = getRootClassName(COMPONENT_NAME$4);
+const CLASSNAME$4 = 'lumx-thumbnail';
 
 /**
  * Component default props.
@@ -13921,7 +13821,7 @@ const COMPONENT_NAME$3 = 'Toolbar';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$3 = getRootClassName(COMPONENT_NAME$3);
+const CLASSNAME$3 = 'lumx-toolbar';
 
 /**
  * Component default props.
@@ -14168,7 +14068,7 @@ const COMPONENT_NAME$2 = 'Tooltip';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$2 = getRootClassName(COMPONENT_NAME$2);
+const CLASSNAME$2 = 'lumx-tooltip';
 
 /**
  * Component default props.
@@ -14305,7 +14205,7 @@ const COMPONENT_NAME$1 = 'Uploader';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
+const CLASSNAME$1 = 'lumx-uploader';
 
 /**
  * Component default props.
@@ -14414,7 +14314,7 @@ const COMPONENT_NAME = 'UserBlock';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
+const CLASSNAME = 'lumx-user-block';
 
 /**
  * Component default props.