@lumx/react 3.21.2-alpha.0 → 3.21.2-alpha.1

package/index.js

@@ -1,8 +1,9 @@
-import { Kind, Size, ColorPalette, Emphasis, Theme, AspectRatio, DIALOG_TRANSITION_DURATION, Orientation, Typography, Alignment, ColorVariant, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
+import { Kind, Size, ColorPalette, Emphasis, Theme, AspectRatio, DIALOG_TRANSITION_DURATION, Orientation, Typography, Alignment, ColorVariant as ColorVariant$1, 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';
 import React__default, { useState, useEffect, useMemo, useRef, useCallback, Children, useLayoutEffect, cloneElement, createContext, isValidElement, useContext, useReducer } from 'react';
+import classNames from 'classnames';
 import { mdiAlert } from '@lumx/icons/esm/alert';
 import { mdiAlertCircle } from '@lumx/icons/esm/alert-circle';
 import { mdiCheckCircle } from '@lumx/icons/esm/check-circle';
@@ -10,8 +11,8 @@ import { mdiInformation } from '@lumx/icons/esm/information';
 import isBoolean from 'lodash/isBoolean';
 import isEmpty from 'lodash/isEmpty';
 import kebabCase from 'lodash/kebabCase';
-import { classNames as classNames$1, onEnterPressed, onEscapePressed, onButtonPressed, detectHorizontalSwipe } from '@lumx/core/js/utils';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { onEnterPressed, onEscapePressed, onButtonPressed, detectHorizontalSwipe } from '@lumx/core/js/utils';
 import last from 'lodash/last';
 import pull from 'lodash/pull';
 import get from 'lodash/get';
@@ -53,79 +54,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 = {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.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));
-	return classnames.exports;
-}
-
-var classnamesExports = requireClassnames();
-var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
-
 /**
  * Get the basic CSS class for the given type.
  *
@@ -194,6 +122,43 @@ function handleBasicClasses({
   return classNames(prefix, otherClasses);
 }
 
+/**
+ * Returns the classname associated to the given typography.
+ * For example, for `Typography.title` it returns `lumx-typography-title`
+ */
+const getTypographyClassName = typography => {
+  return `lumx-typography-${typography}`;
+};
+
+/**
+ * Alignments.
+ */
+/**
+ * See SCSS variable $lumx-color-variants
+ */
+const ColorVariant = {
+  N: 'N'
+};
+
+/** ColorPalette with all possible color variant combination */
+
+/** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
+function resolveColorWithVariants(colorWithVariants, colorVariant) {
+  if (!colorWithVariants) return [undefined, colorVariant];
+  const [color, baseColorVariant] = colorWithVariants.split('-');
+  return [color, colorVariant || baseColorVariant];
+}
+
+/**
+ * Returns the classname associated to the given color and variant.
+ * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-L2`
+ */
+function fontColorClass(propColor, propColorVariant) {
+  if (!propColor) return undefined;
+  const [color, colorVariant = ColorVariant.N] = resolveColorWithVariants(propColor, propColorVariant);
+  return `lumx-color-font-${color}-${colorVariant}`;
+}
+
 let i = 0;
 
 /**
@@ -311,7 +276,7 @@ const AlertDialog = forwardRef((props, ref) => {
       'aria-describedby': descriptionId,
       ...dialogProps
     },
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       kind,
       prefix: CLASSNAME$1i
     })),
@@ -522,7 +487,7 @@ const Autocomplete = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, CLASSNAME$1h),
+    className: classNames(className, CLASSNAME$1h),
     children: [/*#__PURE__*/jsx(TextField, {
       ...textFieldProps,
       chips: chips,
@@ -654,7 +619,7 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     ref: ref,
     ...forwardedProps,
     anchorToInput: anchorToInput,
-    className: classNames$1.join(className, CLASSNAME$1g),
+    className: classNames(className, CLASSNAME$1g),
     name: name,
     value: value,
     onChange: onChange,
@@ -735,7 +700,7 @@ const Avatar = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$1f,
       size,
       theme
@@ -799,7 +764,7 @@ const Badge = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$1e,
       color
     })),
@@ -824,7 +789,7 @@ const BadgeWrapper = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, CLASSNAME$1d),
+    className: classNames(className, CLASSNAME$1d),
     children: [children, badge && /*#__PURE__*/jsx("div", {
       className: `${CLASSNAME$1d}__badge`,
       children: badge
@@ -923,7 +888,7 @@ const renderButtonWrapper = props => {
     fullWidth
   } = props;
   const adaptedColor = emphasis === Emphasis.low && (color === ColorPalette.light ? ColorPalette.dark : ColorPalette.light);
-  const wrapperClassName = classNames$1.join(handleBasicClasses({
+  const wrapperClassName = classNames(handleBasicClasses({
     color: adaptedColor,
     prefix: BUTTON_WRAPPER_CLASSNAME,
     variant,
@@ -981,7 +946,7 @@ const ButtonRoot = forwardRef((props, ref) => {
       color: adaptedColor
     });
   }
-  const buttonClassName = classNames$1.join(className, handleBasicClasses({
+  const buttonClassName = classNames(className, handleBasicClasses({
     color: adaptedColor,
     emphasis,
     isSelected,
@@ -1052,7 +1017,7 @@ const Button = forwardRef((props, ref) => {
     theme = defaultTheme,
     ...forwardedProps
   } = props;
-  const buttonClassName = classNames$1.join(className, getBasicClass({
+  const buttonClassName = classNames(className, getBasicClass({
     prefix: CLASSNAME$1c,
     type: 'hasLeftIcon',
     value: !isEmpty(leftIcon)
@@ -1191,7 +1156,7 @@ const ButtonGroup = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, CLASSNAME$1a),
+    className: classNames(className, CLASSNAME$1a),
     children: children
   });
 });
@@ -1268,7 +1233,7 @@ const Checkbox = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       // Whether state is intermediate class name will "-checked"
       isChecked: intermediateState ? true : isChecked,
       isDisabled: isAnyDisabled,
@@ -1413,7 +1378,7 @@ const Chip = forwardRef((props, ref) => {
       ...forwardedProps,
       href: !disabledStateProps.disabled ? href : undefined,
       ref: ref,
-      className: classNames$1.join(className, handleBasicClasses({
+      className: classNames(className, handleBasicClasses({
         clickable: isClickable,
         color: chipColor,
         isDisabled: isAnyDisabled,
@@ -1432,7 +1397,7 @@ 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$1.join(`${CLASSNAME$18}__before`, {
+        className: classNames(`${CLASSNAME$18}__before`, {
           [`${CLASSNAME$18}__before--is-clickable`]: hasBeforeClick
         }),
         onClick: handleOnBeforeClick,
@@ -1444,7 +1409,7 @@ 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$1.join(`${CLASSNAME$18}__after`, {
+        className: classNames(`${CLASSNAME$18}__after`, {
           [`${CLASSNAME$18}__after--is-clickable`]: hasAfterClick
         }),
         onClick: handleOnAfterClick,
@@ -1540,7 +1505,7 @@ const InternalChipGroup = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, CLASSNAME$17),
+    className: classNames(className, CLASSNAME$17),
     children: children
   });
 });
@@ -1612,7 +1577,7 @@ const CommentBlock = forwardRef((props, ref) => {
   const hasChildren = Children.count(children) > 0;
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       hasChildren: hasChildren && isOpen,
       hasIndentedChildren: hasChildren && variant === CommentBlockVariant.indented,
       hasLinearChildren: hasChildren && variant === CommentBlockVariant.linear,
@@ -1919,6 +1884,26 @@ function formatDayNumber(locale, date) {
   return formattedDate;
 }
 
+/**
+ * Optional global `window` instance (not defined when running SSR).
+ */
+const WINDOW = typeof window !== 'undefined' ? window : undefined;
+
+/**
+ * Optional global `document` instance (not defined when running SSR).
+ */
+const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
+
+/**
+ * Check if we are running in a true browser
+ */
+const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.includes('jsdom');
+
+/**
+ * Visually hidden a11y utility class name
+ */
+const VISUALLY_HIDDEN = 'visually-hidden';
+
 /**
  * Component display name.
  */
@@ -2026,7 +2011,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
       label: /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsx("span", {
           "aria-live": labelAriaLive,
-          className: onMonthChange ? classNames$1.visuallyHidden() : undefined,
+          className: onMonthChange ? VISUALLY_HIDDEN : '',
           dir: "auto",
           children: monthYear
         }), onMonthChange && /*#__PURE__*/jsx(FlexBox, {
@@ -2086,7 +2071,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
               className: `${CLASSNAME$15}__day-wrapper`,
               children: date && /*#__PURE__*/jsxs(Button, {
                 ref: isSelected || !value && isToday ? todayOrSelectedDateRef : null,
-                className: classNames$1.join(`${CLASSNAME$15}__month-day`, {
+                className: classNames(`${CLASSNAME$15}__month-day`, {
                   [`${CLASSNAME$15}__month-day--is-today`]: isToday
                 }),
                 disabled: isOutOfRange,
@@ -2097,7 +2082,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
                   "aria-hidden": true,
                   children: formatDayNumber(locale, date)
                 }), /*#__PURE__*/jsx("span", {
-                  className: classNames$1.visuallyHidden(),
+                  className: VISUALLY_HIDDEN,
                   children: date.toLocaleDateString(locale, {
                     day: 'numeric',
                     month: 'long',
@@ -2260,21 +2245,6 @@ const DatePickerField = forwardRef((props, ref) => {
 });
 DatePickerField.displayName = COMPONENT_NAME$15;
 
-/**
- * Optional global `window` instance (not defined when running SSR).
- */
-const WINDOW = typeof window !== 'undefined' ? window : undefined;
-
-/**
- * Optional global `document` instance (not defined when running SSR).
- */
-const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
-
-/**
- * Check if we are running in a true browser
- */
-const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.includes('jsdom');
-
 /**
  * Keep track of listeners, only the last registered listener gets activated at any point (previously registered
  * listener are disabled).
@@ -2875,7 +2845,7 @@ const Dialog = forwardRef((props, ref) => {
     children: /*#__PURE__*/jsxs("div", {
       ref: mergeRefs(rootRef, ref),
       ...forwardedProps,
-      className: classNames$1.join(className, handleBasicClasses({
+      className: classNames(className, handleBasicClasses({
         isHidden: !isOpen,
         isLoading,
         isShown: isOpen || isVisible,
@@ -2905,7 +2875,7 @@ const Dialog = forwardRef((props, ref) => {
                 ref: wrapperRef,
                 children: [(header || headerChildContent) && /*#__PURE__*/jsxs("header", {
                   ...headerChildProps,
-                  className: classNames$1.join(`${CLASSNAME$14}__header`, (forceHeaderDivider || hasTopIntersection) && `${CLASSNAME$14}__header--has-divider`, headerChildProps?.className),
+                  className: classNames(`${CLASSNAME$14}__header`, (forceHeaderDivider || hasTopIntersection) && `${CLASSNAME$14}__header--has-divider`, headerChildProps?.className),
                   children: [header, headerChildContent]
                 }), /*#__PURE__*/jsxs("div", {
                   ref: mergeRefs(contentRef, localContentRef),
@@ -2919,7 +2889,7 @@ const Dialog = forwardRef((props, ref) => {
                   })]
                 }), (footer || footerChildContent) && /*#__PURE__*/jsxs("footer", {
                   ...footerChildProps,
-                  className: classNames$1.join(`${CLASSNAME$14}__footer`, (forceFooterDivider || hasBottomIntersection) && `${CLASSNAME$14}__footer--has-divider`, footerChildProps?.className),
+                  className: classNames(`${CLASSNAME$14}__footer`, (forceFooterDivider || hasBottomIntersection) && `${CLASSNAME$14}__footer--has-divider`, footerChildProps?.className),
                   children: [footer, footerChildContent]
                 }), isLoading && /*#__PURE__*/jsx("div", {
                   className: `${CLASSNAME$14}__progress-overlay`,
@@ -2971,7 +2941,7 @@ const Divider = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("hr", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$13,
       theme
     }))
@@ -3008,7 +2978,7 @@ const DragHandle = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$12,
       theme
     })),
@@ -3223,7 +3193,7 @@ const InternalList = forwardRef((props, ref) => {
   } = props;
   return /*#__PURE__*/jsx("ul", {
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$11,
       itemPadding: itemPadding ?? (isClickable ? Size.big : undefined)
     })),
@@ -5171,6 +5141,10 @@ var fromEntries = function fromEntries(entries) {
 
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' && window.document && window.document.createElement ? React.useLayoutEffect : React.useEffect;
 
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
 /* global Map:readonly, Set:readonly, ArrayBuffer:readonly */
 
 var reactFastCompare;
@@ -5750,7 +5724,7 @@ const _InnerPopover = forwardRef((props, ref) => {
     children: /*#__PURE__*/jsxs(Component, {
       ...forwardedProps,
       ref: mergedRefs,
-      className: classNames$1.join(className, handleBasicClasses({
+      className: classNames(className, handleBasicClasses({
         prefix: CLASSNAME$10,
         theme,
         elevation: Math.min(elevation || 0, 5),
@@ -5910,7 +5884,7 @@ const Dropdown = forwardRef((props, ref) => {
     ...forwardedProps,
     focusAnchorOnClose: focusAnchorOnClose,
     anchorRef: anchorRef,
-    className: classNames$1.join(className, CLASSNAME$$),
+    className: classNames(className, CLASSNAME$$),
     elevation: 0,
     closeOnClickAway: closeOnClickAway,
     closeOnEscape: closeOnEscape,
@@ -6001,7 +5975,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
     }
   };
   const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
-  const rootClassName = classNames$1.join(className, handleBasicClasses({
+  const rootClassName = classNames(className, handleBasicClasses({
     hasBackground,
     hasHeader: Boolean(!isEmpty(headerProps.children)),
     hasHeaderDivider,
@@ -6110,7 +6084,7 @@ const Flag = forwardRef((props, ref) => {
   const isTruncated = !!truncate;
   return /*#__PURE__*/jsxs("div", {
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$Z,
       color: flagColor,
       isTruncated
@@ -6168,7 +6142,7 @@ const FlexBox = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx(Component, {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$Y,
       orientation: orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null),
       vAlign,
@@ -6244,7 +6218,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
   }, [children]);
   return /*#__PURE__*/jsxs(FlexBox, {
     ref: ref,
-    className: classNames$1.join(className, CLASSNAME$X),
+    className: classNames(className, CLASSNAME$X),
     gap: gap,
     orientation: orientation,
     ...forwardedProps,
@@ -6254,7 +6228,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       hAlign: forwardedProps.hAlign,
       ...figureProps,
       ...sections.figureChildProps,
-      className: classNames$1.join(figureProps?.className, sections.figureChildProps?.className, `${CLASSNAME$X}__figure`),
+      className: classNames(figureProps?.className, sections.figureChildProps?.className, `${CLASSNAME$X}__figure`),
       children: [figure, sections.figureChildProps?.children]
     }), (sections.contentChildProps?.children || sections.otherChildren.length > 0) && /*#__PURE__*/jsxs(FlexBox, {
       ref: sections.contentChild?.ref,
@@ -6264,7 +6238,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       hAlign: forwardedProps.hAlign,
       ...contentProps,
       ...sections.contentChildProps,
-      className: classNames$1.join(contentProps?.className, sections.contentChildProps?.className, `${CLASSNAME$X}__content`),
+      className: classNames(contentProps?.className, sections.contentChildProps?.className, `${CLASSNAME$X}__content`),
       children: [sections.contentChildProps?.children, sections.otherChildren]
     }), (actions || sections.actionsChildProps?.children) && /*#__PURE__*/jsxs(FlexBox, {
       ref: sections.actionsChild?.ref,
@@ -6272,7 +6246,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       hAlign: forwardedProps.hAlign,
       ...actionsProps,
       ...sections.actionsChildProps,
-      className: classNames$1.join(actionsProps?.className, sections.actionsChildProps?.className, `${CLASSNAME$X}__actions`),
+      className: classNames(actionsProps?.className, sections.actionsChildProps?.className, `${CLASSNAME$X}__actions`),
       children: [actions, sections.actionsChildProps?.children]
     })]
   });
@@ -6318,7 +6292,7 @@ const useOverflowTooltipLabel = content => {
     // Not inside a tooltip
     !parentTooltip && labelElement &&
     // Not inside a visually hidden
-    !labelElement?.closest(`.${classNames$1.visuallyHidden()}`) &&
+    !labelElement?.closest(`.${VISUALLY_HIDDEN}`) &&
     // Text overflows
     labelElement.offsetWidth < labelElement.scrollWidth) {
       // Set tooltip label
@@ -6383,6 +6357,7 @@ const Text = forwardRef((props, ref) => {
     style,
     ...forwardedProps
   } = props;
+  const typographyClass = typography && getTypographyClassName(typography);
 
   // Truncate mode
   const truncateLinesStyle = typeof truncate === 'object' && truncate.lines > 1 && {
@@ -6405,11 +6380,11 @@ const Text = forwardRef((props, ref) => {
   } = useOverflowTooltipLabel(children);
   return /*#__PURE__*/jsx(Component, {
     ref: useMergeRefs(ref, labelRef),
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$W,
       isTruncated: isTruncated && !isTruncatedMultiline,
       isTruncatedMultiline
-    }), typography && classNames$1.typography(typography), color && classNames$1.font(color, colorVariant), noWrap && `${CLASSNAME$W}--no-wrap`),
+    }), typographyClass, fontColorClass(color, colorVariant), noWrap && `${CLASSNAME$W}--no-wrap`),
     title: tooltipLabel,
     style: {
       ...truncateLinesStyle,
@@ -6489,7 +6464,7 @@ const Heading = forwardRef((props, ref) => {
   const computedHeadingElement = as || headingElement;
   return /*#__PURE__*/jsx(Text, {
     ref: ref,
-    className: classNames$1.join(className, CLASSNAME$V),
+    className: classNames(className, CLASSNAME$V),
     as: computedHeadingElement,
     typography: DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement],
     ...forwardedProps,
@@ -6562,7 +6537,7 @@ const Grid = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, `${CLASSNAME$U}-container`, {
+    className: classNames(className, `${CLASSNAME$U}-container`, {
       [`${CLASSNAME$U}--h-align-${hAlign}`]: hAlign
     }, {
       [`${CLASSNAME$U}--v-align-${vAlign}`]: vAlign
@@ -6608,7 +6583,7 @@ const GridItem = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$T,
       width,
       order,
@@ -6658,7 +6633,7 @@ const GridColumn = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx(Component, {
     ...forwardedProps,
     ref: ref,
-    className: classNames$1.join(className, CLASSNAME$S),
+    className: classNames(className, CLASSNAME$S),
     style: {
       ...style,
       ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
@@ -6672,13 +6647,6 @@ GridColumn.displayName = COMPONENT_NAME$S;
 GridColumn.className = CLASSNAME$S;
 GridColumn.defaultProps = DEFAULT_PROPS$K;
 
-/** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
-function resolveColorWithVariants(colorWithVariants, colorVariant) {
-  if (!colorWithVariants) return [undefined, colorVariant];
-  const [color, baseColorVariant] = colorWithVariants.split('-');
-  return [color, colorVariant || baseColorVariant];
-}
-
 /**
  * Component display name.
  */
@@ -6742,7 +6710,7 @@ const Icon = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("i", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       color: iconColor,
       colorVariant: iconColorVariant,
       hasShape,
@@ -6805,7 +6773,7 @@ const ImageCaption = props => {
   };
   return /*#__PURE__*/jsxs(FlexBox, {
     as: as,
-    className: classNames$1.join(baseClassName && `${baseClassName}__wrapper`),
+    className: classNames(baseClassName && `${baseClassName}__wrapper`),
     style: captionStyle,
     orientation: "vertical",
     vAlign: align,
@@ -6813,25 +6781,25 @@ const ImageCaption = props => {
     gap: "regular",
     children: [(title || description) && /*#__PURE__*/jsxs(Text, {
       as: "p",
-      className: classNames$1.join(baseClassName && `${baseClassName}__caption`),
+      className: classNames(baseClassName && `${baseClassName}__caption`),
       truncate: truncate,
       ...baseColor,
       children: [title && /*#__PURE__*/jsx(Text, {
         ...titleProps,
         as: "span",
-        className: classNames$1.join(titleProps?.className, baseClassName && `${baseClassName}__title`),
+        className: classNames(titleProps?.className, baseClassName && `${baseClassName}__title`),
         typography: "subtitle1",
         ...titleColor,
         children: title
       }), ' ', description && /*#__PURE__*/jsx(Text, {
         ...descriptionProps,
         as: "span",
-        className: classNames$1.join(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
+        className: classNames(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
         typography: "body1",
         ...descriptionContent
       })]
     }), tags && /*#__PURE__*/jsx(FlexBox, {
-      className: classNames$1.join(baseClassName && `${baseClassName}__tags`),
+      className: classNames(baseClassName && `${baseClassName}__tags`),
       orientation: "horizontal",
       vAlign: align,
       children: tags
@@ -6901,7 +6869,7 @@ const ImageBlock = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("figure", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$Q,
       captionPosition,
       align,
@@ -6910,7 +6878,7 @@ const ImageBlock = forwardRef((props, ref) => {
     }), fillHeight && `${CLASSNAME$Q}--fill-height`),
     children: [/*#__PURE__*/jsx(Thumbnail, {
       ...thumbnailProps,
-      className: classNames$1.join(`${CLASSNAME$Q}__image`, thumbnailProps?.className),
+      className: classNames(`${CLASSNAME$Q}__image`, thumbnailProps?.className),
       fillHeight: fillHeight,
       align: align,
       image: image,
@@ -7631,7 +7599,7 @@ const Inner = forwardRef((props, ref) => {
   }, [onClose]);
   return /*#__PURE__*/jsx(Lightbox, {
     ref: ref,
-    className: classNames$1.join(className, CLASSNAME$P),
+    className: classNames(className, CLASSNAME$P),
     parentElement: parentElement,
     isOpen: isOpen,
     onClose: onClose,
@@ -7706,13 +7674,14 @@ const InlineList = forwardRef((props, ref) => {
     wrap,
     ...forwardedProps
   } = props;
+  const typographyClassName = typography && getTypographyClassName(typography);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-redundant-roles
     jsx("ul", {
       ...forwardedProps,
       ref: ref,
-      className: classNames$1.join(className, CLASSNAME$O, wrap && `${CLASSNAME$O}--wrap`, color && classNames$1.font(color, colorVariant), typography && classNames$1.typography(typography))
+      className: classNames(className, CLASSNAME$O, wrap && `${CLASSNAME$O}--wrap`, fontColorClass(color, colorVariant), typographyClassName)
       // Lists with removed bullet style can lose their a11y list role on some browsers
       ,
       role: "list",
@@ -7791,7 +7760,7 @@ const InputHelper = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("p", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$N,
       color,
       theme
@@ -7836,16 +7805,17 @@ const InputLabel = forwardRef((props, ref) => {
     typography,
     ...forwardedProps
   } = props;
+  const typographyClass = typography && getTypographyClassName(typography);
   return /*#__PURE__*/jsx("label", {
     ref: ref,
     ...forwardedProps,
     htmlFor: htmlFor,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$M,
       isRequired,
       theme,
       hasCustomTypography: Boolean(typography)
-    }), typography && classNames$1.typography(typography)),
+    }), typographyClass),
     children: children
   });
 });
@@ -7945,7 +7915,7 @@ const Lightbox = forwardRef((props, ref) => {
       "aria-modal": "true",
       role: "dialog",
       tabIndex: -1,
-      className: classNames$1.join(className, handleBasicClasses({
+      className: classNames(className, handleBasicClasses({
         prefix: CLASSNAME$L,
         isHidden: !isOpen,
         isShown: isOpen || isVisible,
@@ -8027,12 +7997,12 @@ const Link = forwardRef((props, ref) => {
     as: linkAs || (forwardedProps.href ? 'a' : 'button'),
     ...forwardedProps,
     ...disabledStateProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$K,
       color,
       colorVariant,
       hasTypography: !!typography
-    }), typography && classNames$1.typography(typography)),
+    }), typography && getTypographyClassName(typography)),
     children: wrapChildrenIconWithSpaces(/*#__PURE__*/jsxs(Fragment, {
       children: [leftIcon && /*#__PURE__*/jsx(Icon, {
         icon: leftIcon,
@@ -8095,7 +8065,7 @@ const LinkPreview = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("article", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$J,
       size: size === Size.big && thumbnailProps ? Size.big : Size.regular,
       theme
@@ -8127,7 +8097,7 @@ const LinkPreview = forwardRef((props, ref) => {
             target: "_blank",
             href: link,
             color: theme === Theme.light ? ColorPalette.dark : ColorPalette.light,
-            colorVariant: ColorVariant.N,
+            colorVariant: ColorVariant$1.N,
             children: title
           })
         }), description && /*#__PURE__*/jsx("p", {
@@ -8138,11 +8108,11 @@ const LinkPreview = forwardRef((props, ref) => {
           children: /*#__PURE__*/jsx(Link, {
             ...linkProps,
             linkAs: linkAs,
-            className: classNames$1.join(`${CLASSNAME$J}__link`, linkProps?.className),
+            className: classNames(`${CLASSNAME$J}__link`, linkProps?.className),
             target: "_blank",
             href: link,
             color: theme === Theme.light ? ColorPalette.primary : ColorPalette.light,
-            colorVariant: ColorVariant.N
+            colorVariant: ColorVariant$1.N
             // Avoid redundant links in focus order
             ,
             tabIndex: title ? '-1' : undefined,
@@ -8247,7 +8217,7 @@ const ListItem = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("li", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$I,
       size
     })),
@@ -8262,7 +8232,7 @@ const ListItem = forwardRef((props, ref) => {
       'aria-disabled': isAnyDisabled,
       ...linkProps,
       href: isAnyDisabled ? undefined : linkProps.href,
-      className: classNames$1.join(handleBasicClasses({
+      className: classNames(handleBasicClasses({
         prefix: `${CLASSNAME$I}__link`,
         isHighlighted,
         isSelected,
@@ -8309,7 +8279,7 @@ const ListDivider = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("li", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, CLASSNAME$H)
+    className: classNames(className, CLASSNAME$H)
   });
 });
 ListDivider.displayName = COMPONENT_NAME$H;
@@ -8341,7 +8311,7 @@ const ListSubheader = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("li", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, CLASSNAME$G),
+    className: classNames(className, CLASSNAME$G),
     children: children
   });
 });
@@ -8408,7 +8378,7 @@ const Message = forwardRef((props, ref) => {
   const isCloseButtonDisplayed = hasBackground && kind === 'info' && onClick && closeButtonLabel;
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       color,
       hasBackground,
       prefix: CLASSNAME$F
@@ -8475,7 +8445,7 @@ const Mosaic = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$E,
       theme
     }), {
@@ -8558,7 +8528,7 @@ const NavigationSection = forwardRef((props, ref) => {
   const theme = useTheme();
   const isDropdown = orientation === Orientation.horizontal;
   return /*#__PURE__*/jsxs("li", {
-    className: classNames$1.join(className, CLASSNAME$D, ITEM_CLASSNAME, handleBasicClasses({
+    className: classNames(className, CLASSNAME$D, ITEM_CLASSNAME, handleBasicClasses({
       prefix: ITEM_CLASSNAME,
       theme
     })),
@@ -8568,7 +8538,7 @@ const NavigationSection = forwardRef((props, ref) => {
       ...forwardedProps,
       "aria-controls": sectionId,
       "aria-expanded": isOpen,
-      className: classNames$1.join(`${ITEM_CLASSNAME}__link`),
+      className: classNames(`${ITEM_CLASSNAME}__link`),
       ref: buttonRef,
       onClick: event => {
         setIsOpen(!isOpen);
@@ -8585,7 +8555,7 @@ const NavigationSection = forwardRef((props, ref) => {
         ref: ref,
         children: label
       }), /*#__PURE__*/jsx(Icon, {
-        className: classNames$1.join(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME$D}__chevron`),
+        className: classNames(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME$D}__chevron`),
         icon: isOpen ? mdiChevronUp : mdiChevronDown
       })]
     }), isOpen && (isDropdown ? /*#__PURE__*/jsx(Popover, {
@@ -8636,7 +8606,7 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
     labelRef
   } = useOverflowTooltipLabel(label);
   return /*#__PURE__*/jsx("li", {
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: ITEM_CLASSNAME,
       theme
     })),
@@ -8700,7 +8670,7 @@ const Navigation = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx(ThemeProvider, {
     value: theme,
     children: /*#__PURE__*/jsx("nav", {
-      className: classNames$1.join(className, handleBasicClasses({
+      className: classNames(className, handleBasicClasses({
         prefix: CLASSNAME$C,
         theme,
         orientation
@@ -8817,7 +8787,7 @@ const Notification = forwardRef((props, ref) => {
       ref: mergeRefs(ref, rootRef),
       role: "alert",
       ...forwardedProps,
-      className: classNames$1.join(className, handleBasicClasses({
+      className: classNames(className, handleBasicClasses({
         color,
         hasAction,
         isHidden: !isOpen,
@@ -8890,7 +8860,7 @@ const PopoverDialog = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx(Popover, {
     ...forwardedProps,
     ref: ref,
-    className: classNames$1.join(className, CLASSNAME$A),
+    className: classNames(className, CLASSNAME$A),
     role: "dialog",
     "aria-modal": "true"
     /**
@@ -8956,7 +8926,7 @@ const PostBlock = forwardRef((props, ref) => {
   } = props;
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$z,
       orientation,
       theme
@@ -9043,7 +9013,7 @@ const ProgressLinear = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$y,
       theme
     })),
@@ -9096,7 +9066,7 @@ const ProgressCircular = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs(Element, {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$x,
       theme,
       size,
@@ -9169,7 +9139,7 @@ const Progress = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$w,
       theme,
       variant
@@ -9482,7 +9452,7 @@ const ProgressTracker = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: mergeRefs(ref, stepListRef),
     ...forwardedProps,
-    className: classNames$1.join(className, CLASSNAME$v),
+    className: classNames(className, CLASSNAME$v),
     children: [/*#__PURE__*/jsx("div", {
       className: `${CLASSNAME$v}__steps`,
       role: "tablist",
@@ -9585,7 +9555,7 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
     ...forwardedProps,
     type: "button",
     id: state?.tabId,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$u,
       hasError,
       isActive,
@@ -9657,7 +9627,7 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
     ref: ref,
     ...forwardedProps,
     id: state?.tabPanelId,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$t,
       isActive
     })),
@@ -9725,7 +9695,7 @@ const RadioButton = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       isChecked,
       isDisabled: isAnyDisabled,
       isUnchecked: !isChecked,
@@ -9801,7 +9771,7 @@ const RadioGroup = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, CLASSNAME$r),
+    className: classNames(className, CLASSNAME$r),
     children: children
   });
 });
@@ -9886,7 +9856,7 @@ const WithSelectContext = (SelectElement, props, ref) => {
   useFocusTrap(isOpen && dropdownRef.current, focusElement?.current);
   return /*#__PURE__*/jsxs("div", {
     ref: mergeRefs(ref, selectRef),
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       hasError,
       hasLabel: Boolean(label),
       hasPlaceholder: Boolean(placeholder),
@@ -10016,7 +9986,7 @@ const SelectField = props => {
           icon: icon,
           size: Size.xs
         }), /*#__PURE__*/jsxs("div", {
-          className: classNames$1.join([`${CLASSNAME$p}__input-native`, isEmpty && placeholder && `${CLASSNAME$p}__input-native--placeholder`]),
+          className: classNames([`${CLASSNAME$p}__input-native`, isEmpty && placeholder && `${CLASSNAME$p}__input-native--placeholder`]),
           children: [!isEmpty && /*#__PURE__*/jsx("span", {
             children: selectedValueRender?.(value)
           }), isEmpty && placeholder && /*#__PURE__*/jsx("span", {
@@ -10079,7 +10049,7 @@ const Select = forwardRef((props, ref) => {
   return WithSelectContext(SelectField, {
     ...DEFAULT_PROPS$p,
     ...props,
-    className: classNames$1.join(props.className, handleBasicClasses({
+    className: classNames(props.className, handleBasicClasses({
       hasInputClear,
       hasUnique: !props.isEmpty,
       prefix: CLASSNAME$p
@@ -10172,7 +10142,7 @@ const SelectMultipleField = props => {
           className: `${CLASSNAME$o}__chips`,
           children: !isEmpty && value.map((val, index) => selectedChipRender?.(val, index, onClear, isDisabled, theme))
         }), isEmpty && placeholder && /*#__PURE__*/jsx("div", {
-          className: classNames$1.join([`${CLASSNAME$o}__input-native`, `${CLASSNAME$o}__input-native--placeholder`]),
+          className: classNames([`${CLASSNAME$o}__input-native`, `${CLASSNAME$o}__input-native--placeholder`]),
           children: /*#__PURE__*/jsx("span", {
             children: placeholder
           })
@@ -10226,7 +10196,7 @@ const SelectMultiple = forwardRef((props, ref) => {
   return WithSelectContext(SelectMultipleField, {
     ...DEFAULT_PROPS$o,
     ...props,
-    className: classNames$1.join(props.className, handleBasicClasses({
+    className: classNames(props.className, handleBasicClasses({
       hasMultiple: !props.isEmpty,
       prefix: CLASSNAME$o
     })),
@@ -10267,7 +10237,7 @@ const SideNavigation = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("ul", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, theme === Theme.dark && 'lumx-color-font-light-N', CLASSNAME$n),
+    className: classNames(className, theme === Theme.dark && 'lumx-color-font-light-N', CLASSNAME$n),
     children: content
   });
 });
@@ -10330,7 +10300,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("li", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       emphasis,
       isOpen: showChildren,
       isSelected,
@@ -10418,7 +10388,7 @@ const SkeletonCircle = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$l,
       size,
       color,
@@ -10476,7 +10446,7 @@ const SkeletonRectangle = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$k,
       aspectRatio,
       height: aspectRatio ? undefined : height,
@@ -10526,7 +10496,7 @@ const SkeletonTypography = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$j,
       theme,
       typography,
@@ -10781,7 +10751,7 @@ const Slider = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$i,
       theme,
       hasLabel: Boolean(label)
@@ -11191,7 +11161,7 @@ const SlideshowItemGroup = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: mergeRefs(groupRef, ref),
     role: role,
-    className: classNames$1.join(className, CLASSNAME$h),
+    className: classNames(className, CLASSNAME$h),
     "aria-roledescription": "slide",
     "aria-label": label,
     ...forwardedProps,
@@ -11342,7 +11312,7 @@ const SlideshowItem = forwardRef((props, ref) => {
   } = props;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
-    className: classNames$1.join(className, CLASSNAME$g),
+    className: classNames(className, CLASSNAME$g),
     ...forwardedProps,
     children: children
   });
@@ -11486,7 +11456,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$f,
       theme
     }), {
@@ -11518,7 +11488,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
           } = paginationItemProps ? paginationItemProps(index) : {};
           const ariaLabel = label || paginationItemLabel?.(index) || `${index + 1} / ${slidesCount}`;
           return /*#__PURE__*/jsx("button", {
-            className: classNames$1.join(handleBasicClasses({
+            className: classNames(handleBasicClasses({
               prefix: `${CLASSNAME$f}__pagination-item`,
               isActive,
               isOnEdge,
@@ -11609,7 +11579,7 @@ const Slides = forwardRef((props, ref) => {
     id: id,
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$e,
       theme
     }), {
@@ -11697,7 +11667,7 @@ const Switch = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$d,
       isChecked,
       isDisabled: isAnyDisabled,
@@ -11784,7 +11754,7 @@ const Table = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("table", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$c,
       hasBefore,
       hasDividers,
@@ -11823,7 +11793,7 @@ const TableBody = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("tbody", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, CLASSNAME$b),
+    className: classNames(className, CLASSNAME$b),
     children: children
   });
 });
@@ -11900,7 +11870,7 @@ const TableCell = forwardRef((props, ref) => {
     children: [variant === TableCellVariant.head && /*#__PURE__*/jsx("th", {
       ref: ref,
       ...forwardedProps,
-      className: classNames$1.join(handleBasicClasses({
+      className: classNames(handleBasicClasses({
         prefix: CLASSNAME$a,
         isSortable,
         isSorted: isSortable && !!sortOrder
@@ -11928,7 +11898,7 @@ const TableCell = forwardRef((props, ref) => {
       })
     }), variant === TableCellVariant.body && /*#__PURE__*/jsx("td", {
       ...forwardedProps,
-      className: classNames$1.join(className, CLASSNAME$a, `${CLASSNAME$a}--body`),
+      className: classNames(className, CLASSNAME$a, `${CLASSNAME$a}--body`),
       children: /*#__PURE__*/jsx("div", {
         className: `${CLASSNAME$a}-content`,
         children: children
@@ -11971,7 +11941,7 @@ const TableHeader = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("thead", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, CLASSNAME$9),
+    className: classNames(className, CLASSNAME$9),
     children: children
   });
 });
@@ -12018,7 +11988,7 @@ const TableRow = forwardRef((props, ref) => {
     ref: ref,
     tabIndex: isClickable && !disabledStateProps.disabled ? 0 : -1,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       isClickable: isClickable && !isAnyDisabled,
       isDisabled: isAnyDisabled,
       isSelected: isSelected && !isAnyDisabled,
@@ -12148,7 +12118,7 @@ const TabList = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: mergeRefs(ref, tabListRef),
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: TABS_CLASSNAME,
       layout,
       position,
@@ -12233,7 +12203,7 @@ const Tab = forwardRef((props, ref) => {
     ...forwardedProps,
     type: "button",
     id: state?.tabId,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$7,
       isActive,
       isDisabled: isAnyDisabled
@@ -12299,7 +12269,7 @@ const TabPanel = forwardRef((props, ref) => {
     ref: ref,
     ...forwardedProps,
     id: state?.tabPanelId,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME$6,
       isActive
     })),
@@ -12359,7 +12329,7 @@ const RawInputText = forwardRef((props, ref) => {
     name: name,
     type: type,
     ref: useMergeRefs(ref, textareaRef),
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: INPUT_NATIVE_CLASSNAME,
       theme
     }), `${INPUT_NATIVE_CLASSNAME}--text`),
@@ -12439,7 +12409,7 @@ const RawInputTextarea = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("textarea", {
     ...forwardedProps,
     name: name,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: INPUT_NATIVE_CLASSNAME,
       theme
     }), `${INPUT_NATIVE_CLASSNAME}--textarea`),
@@ -12576,7 +12546,7 @@ const TextField = forwardRef((props, ref) => {
   });
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       hasChips: Boolean(chips),
       hasError: !isValid && hasError,
       hasIcon: Boolean(icon),
@@ -12902,7 +12872,7 @@ const Thumbnail = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs(Wrapper, {
     ...wrapperProps,
     ref: ref,
-    className: classNames$1.join(linkProps?.className, className, handleBasicClasses({
+    className: classNames(linkProps?.className, className, handleBasicClasses({
       align,
       aspectRatio,
       prefix: CLASSNAME$4,
@@ -12933,7 +12903,7 @@ const Thumbnail = forwardRef((props, ref) => {
           ...loadingStyle
         },
         ref: useMergeRefs(setImgElement, propImgRef),
-        className: classNames$1.join(handleBasicClasses({
+        className: classNames(handleBasicClasses({
           prefix: `${CLASSNAME$4}__image`,
           isLoading,
           hasDefinedSize: Boolean(imgProps?.height && imgProps.width)
@@ -12951,7 +12921,7 @@ const Thumbnail = forwardRef((props, ref) => {
         }) : fallback
       })]
     }), badge && /*#__PURE__*/React__default.cloneElement(badge, {
-      className: classNames$1.join(`${CLASSNAME$4}__badge`, badge.props.className)
+      className: classNames(`${CLASSNAME$4}__badge`, badge.props.className)
     })]
   });
 });
@@ -13029,7 +12999,7 @@ const Toolbar = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       hasAfter: Boolean(after),
       hasBefore: Boolean(before),
       hasLabel: Boolean(label),
@@ -13337,11 +13307,11 @@ const Tooltip = forwardRef((props, ref) => {
         ...forwardedProps,
         id: id,
         role: "tooltip",
-        className: classNames$1.join(className, handleBasicClasses({
+        className: classNames(className, handleBasicClasses({
           prefix: CLASSNAME$2,
           position,
           isInitializing: !styles.popper?.transform
-        }), isHidden && classNames$1.visuallyHidden()),
+        }), isHidden && VISUALLY_HIDDEN),
         style: {
           ...(isHidden ? undefined : styles.popper),
           zIndex
@@ -13463,7 +13433,7 @@ const Uploader = forwardRef((props, ref) => {
     ...wrapper.props,
     ...forwardedProps,
     onClick: handleClick,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       aspectRatio: adjustedAspectRatio,
       prefix: CLASSNAME$1,
       size,
@@ -13487,7 +13457,7 @@ const Uploader = forwardRef((props, ref) => {
     }), fileInputProps && /*#__PURE__*/jsx("input", {
       type: "file",
       id: inputId,
-      className: `${CLASSNAME$1}__input ${classNames$1.visuallyHidden()}`,
+      className: `${CLASSNAME$1}__input ${VISUALLY_HIDDEN}`,
       ...disabledStateProps,
       ...fileInputProps,
       readOnly: isAnyDisabled,
@@ -13566,7 +13536,7 @@ const UserBlock = forwardRef((props, ref) => {
     let NameComponent = 'span';
     const nProps = {
       ...nameProps,
-      className: classNames$1.join(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className)
+      className: classNames(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className)
     };
     if (isClickable) {
       NameComponent = Link;
@@ -13597,7 +13567,7 @@ const UserBlock = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames$1.join(className, handleBasicClasses({
+    className: classNames(className, handleBasicClasses({
       prefix: CLASSNAME,
       orientation,
       size: componentSize,
@@ -13611,7 +13581,7 @@ const UserBlock = forwardRef((props, ref) => {
       linkProps: linkProps,
       alt: "",
       ...avatarProps,
-      className: classNames$1.join(`${CLASSNAME}__avatar`, avatarProps.className),
+      className: classNames(`${CLASSNAME}__avatar`, avatarProps.className),
       size: componentSize,
       onClick: onClick,
       theme: theme