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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/index.d.ts +3 -0
  2. package/index.js +220 -190
  3. package/index.js.map +1 -1
  4. package/package.json +3 -4
package/index.js CHANGED
@@ -1,9 +1,8 @@
1
- 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';
1
+ 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';
2
2
  export * from '@lumx/core/js/constants';
3
3
  export * from '@lumx/core/js/types';
4
4
  import * as React from 'react';
5
5
  import React__default, { useState, useEffect, useMemo, useRef, useCallback, Children, useLayoutEffect, cloneElement, createContext, isValidElement, useContext, useReducer } from 'react';
6
- import classNames from 'classnames';
7
6
  import { mdiAlert } from '@lumx/icons/esm/alert';
8
7
  import { mdiAlertCircle } from '@lumx/icons/esm/alert-circle';
9
8
  import { mdiCheckCircle } from '@lumx/icons/esm/check-circle';
@@ -11,8 +10,8 @@ import { mdiInformation } from '@lumx/icons/esm/information';
11
10
  import isBoolean from 'lodash/isBoolean';
12
11
  import isEmpty from 'lodash/isEmpty';
13
12
  import kebabCase from 'lodash/kebabCase';
13
+ import { classNames as classNames$1, onEnterPressed, onEscapePressed, onButtonPressed, detectHorizontalSwipe } from '@lumx/core/js/utils';
14
14
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
15
- import { onEnterPressed, onEscapePressed, onButtonPressed, detectHorizontalSwipe } from '@lumx/core/js/utils';
16
15
  import last from 'lodash/last';
17
16
  import pull from 'lodash/pull';
18
17
  import get from 'lodash/get';
@@ -54,6 +53,79 @@ import { mdiArrowDown } from '@lumx/icons/esm/arrow-down';
54
53
  import { mdiArrowUp } from '@lumx/icons/esm/arrow-up';
55
54
  import set from 'lodash/set';
56
55
 
56
+ function getDefaultExportFromCjs (x) {
57
+ return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
58
+ }
59
+
60
+ var classnames = {exports: {}};
61
+
62
+ /*!
63
+ Copyright (c) 2018 Jed Watson.
64
+ Licensed under the MIT License (MIT), see
65
+ http://jedwatson.github.io/classnames
66
+ */
67
+
68
+ var hasRequiredClassnames;
69
+
70
+ function requireClassnames () {
71
+ if (hasRequiredClassnames) return classnames.exports;
72
+ hasRequiredClassnames = 1;
73
+ (function (module) {
74
+ /* global define */
75
+
76
+ (function () {
77
+
78
+ var hasOwn = {}.hasOwnProperty;
79
+
80
+ function classNames() {
81
+ var classes = [];
82
+
83
+ for (var i = 0; i < arguments.length; i++) {
84
+ var arg = arguments[i];
85
+ if (!arg) continue;
86
+
87
+ var argType = typeof arg;
88
+
89
+ if (argType === 'string' || argType === 'number') {
90
+ classes.push(arg);
91
+ } else if (Array.isArray(arg)) {
92
+ if (arg.length) {
93
+ var inner = classNames.apply(null, arg);
94
+ if (inner) {
95
+ classes.push(inner);
96
+ }
97
+ }
98
+ } else if (argType === 'object') {
99
+ if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
100
+ classes.push(arg.toString());
101
+ continue;
102
+ }
103
+
104
+ for (var key in arg) {
105
+ if (hasOwn.call(arg, key) && arg[key]) {
106
+ classes.push(key);
107
+ }
108
+ }
109
+ }
110
+ }
111
+
112
+ return classes.join(' ');
113
+ }
114
+
115
+ if (module.exports) {
116
+ classNames.default = classNames;
117
+ module.exports = classNames;
118
+ } else {
119
+ window.classNames = classNames;
120
+ }
121
+ }());
122
+ } (classnames));
123
+ return classnames.exports;
124
+ }
125
+
126
+ var classnamesExports = requireClassnames();
127
+ var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
128
+
57
129
  /**
58
130
  * Get the basic CSS class for the given type.
59
131
  *
@@ -122,43 +194,6 @@ function handleBasicClasses({
122
194
  return classNames(prefix, otherClasses);
123
195
  }
124
196
 
125
- /**
126
- * Returns the classname associated to the given typography.
127
- * For example, for `Typography.title` it returns `lumx-typography-title`
128
- */
129
- const getTypographyClassName = typography => {
130
- return `lumx-typography-${typography}`;
131
- };
132
-
133
- /**
134
- * Alignments.
135
- */
136
- /**
137
- * See SCSS variable $lumx-color-variants
138
- */
139
- const ColorVariant = {
140
- N: 'N'
141
- };
142
-
143
- /** ColorPalette with all possible color variant combination */
144
-
145
- /** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
146
- function resolveColorWithVariants(colorWithVariants, colorVariant) {
147
- if (!colorWithVariants) return [undefined, colorVariant];
148
- const [color, baseColorVariant] = colorWithVariants.split('-');
149
- return [color, colorVariant || baseColorVariant];
150
- }
151
-
152
- /**
153
- * Returns the classname associated to the given color and variant.
154
- * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-L2`
155
- */
156
- function fontColorClass(propColor, propColorVariant) {
157
- if (!propColor) return undefined;
158
- const [color, colorVariant = ColorVariant.N] = resolveColorWithVariants(propColor, propColorVariant);
159
- return `lumx-color-font-${color}-${colorVariant}`;
160
- }
161
-
162
197
  let i = 0;
163
198
 
164
199
  /**
@@ -276,7 +311,7 @@ const AlertDialog = forwardRef((props, ref) => {
276
311
  'aria-describedby': descriptionId,
277
312
  ...dialogProps
278
313
  },
279
- className: classNames(className, handleBasicClasses({
314
+ className: classNames$1.join(className, handleBasicClasses({
280
315
  kind,
281
316
  prefix: CLASSNAME$1i
282
317
  })),
@@ -487,7 +522,7 @@ const Autocomplete = forwardRef((props, ref) => {
487
522
  return /*#__PURE__*/jsxs("div", {
488
523
  ref: ref,
489
524
  ...forwardedProps,
490
- className: classNames(className, CLASSNAME$1h),
525
+ className: classNames$1.join(className, CLASSNAME$1h),
491
526
  children: [/*#__PURE__*/jsx(TextField, {
492
527
  ...textFieldProps,
493
528
  chips: chips,
@@ -619,7 +654,7 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
619
654
  ref: ref,
620
655
  ...forwardedProps,
621
656
  anchorToInput: anchorToInput,
622
- className: classNames(className, CLASSNAME$1g),
657
+ className: classNames$1.join(className, CLASSNAME$1g),
623
658
  name: name,
624
659
  value: value,
625
660
  onChange: onChange,
@@ -700,7 +735,7 @@ const Avatar = forwardRef((props, ref) => {
700
735
  return /*#__PURE__*/jsxs("div", {
701
736
  ref: ref,
702
737
  ...forwardedProps,
703
- className: classNames(className, handleBasicClasses({
738
+ className: classNames$1.join(className, handleBasicClasses({
704
739
  prefix: CLASSNAME$1f,
705
740
  size,
706
741
  theme
@@ -764,7 +799,7 @@ const Badge = forwardRef((props, ref) => {
764
799
  return /*#__PURE__*/jsx("div", {
765
800
  ref: ref,
766
801
  ...forwardedProps,
767
- className: classNames(className, handleBasicClasses({
802
+ className: classNames$1.join(className, handleBasicClasses({
768
803
  prefix: CLASSNAME$1e,
769
804
  color
770
805
  })),
@@ -789,7 +824,7 @@ const BadgeWrapper = forwardRef((props, ref) => {
789
824
  return /*#__PURE__*/jsxs("div", {
790
825
  ref: ref,
791
826
  ...forwardedProps,
792
- className: classNames(className, CLASSNAME$1d),
827
+ className: classNames$1.join(className, CLASSNAME$1d),
793
828
  children: [children, badge && /*#__PURE__*/jsx("div", {
794
829
  className: `${CLASSNAME$1d}__badge`,
795
830
  children: badge
@@ -888,7 +923,7 @@ const renderButtonWrapper = props => {
888
923
  fullWidth
889
924
  } = props;
890
925
  const adaptedColor = emphasis === Emphasis.low && (color === ColorPalette.light ? ColorPalette.dark : ColorPalette.light);
891
- const wrapperClassName = classNames(handleBasicClasses({
926
+ const wrapperClassName = classNames$1.join(handleBasicClasses({
892
927
  color: adaptedColor,
893
928
  prefix: BUTTON_WRAPPER_CLASSNAME,
894
929
  variant,
@@ -946,7 +981,7 @@ const ButtonRoot = forwardRef((props, ref) => {
946
981
  color: adaptedColor
947
982
  });
948
983
  }
949
- const buttonClassName = classNames(className, handleBasicClasses({
984
+ const buttonClassName = classNames$1.join(className, handleBasicClasses({
950
985
  color: adaptedColor,
951
986
  emphasis,
952
987
  isSelected,
@@ -1017,7 +1052,7 @@ const Button = forwardRef((props, ref) => {
1017
1052
  theme = defaultTheme,
1018
1053
  ...forwardedProps
1019
1054
  } = props;
1020
- const buttonClassName = classNames(className, getBasicClass({
1055
+ const buttonClassName = classNames$1.join(className, getBasicClass({
1021
1056
  prefix: CLASSNAME$1c,
1022
1057
  type: 'hasLeftIcon',
1023
1058
  value: !isEmpty(leftIcon)
@@ -1156,7 +1191,7 @@ const ButtonGroup = forwardRef((props, ref) => {
1156
1191
  return /*#__PURE__*/jsx("div", {
1157
1192
  ref: ref,
1158
1193
  ...forwardedProps,
1159
- className: classNames(className, CLASSNAME$1a),
1194
+ className: classNames$1.join(className, CLASSNAME$1a),
1160
1195
  children: children
1161
1196
  });
1162
1197
  });
@@ -1233,7 +1268,7 @@ const Checkbox = forwardRef((props, ref) => {
1233
1268
  return /*#__PURE__*/jsxs("div", {
1234
1269
  ref: ref,
1235
1270
  ...forwardedProps,
1236
- className: classNames(className, handleBasicClasses({
1271
+ className: classNames$1.join(className, handleBasicClasses({
1237
1272
  // Whether state is intermediate class name will "-checked"
1238
1273
  isChecked: intermediateState ? true : isChecked,
1239
1274
  isDisabled: isAnyDisabled,
@@ -1378,7 +1413,7 @@ const Chip = forwardRef((props, ref) => {
1378
1413
  ...forwardedProps,
1379
1414
  href: !disabledStateProps.disabled ? href : undefined,
1380
1415
  ref: ref,
1381
- className: classNames(className, handleBasicClasses({
1416
+ className: classNames$1.join(className, handleBasicClasses({
1382
1417
  clickable: isClickable,
1383
1418
  color: chipColor,
1384
1419
  isDisabled: isAnyDisabled,
@@ -1397,7 +1432,7 @@ const Chip = forwardRef((props, ref) => {
1397
1432
  /*#__PURE__*/
1398
1433
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
1399
1434
  jsx("div", {
1400
- className: classNames(`${CLASSNAME$18}__before`, {
1435
+ className: classNames$1.join(`${CLASSNAME$18}__before`, {
1401
1436
  [`${CLASSNAME$18}__before--is-clickable`]: hasBeforeClick
1402
1437
  }),
1403
1438
  onClick: handleOnBeforeClick,
@@ -1409,7 +1444,7 @@ const Chip = forwardRef((props, ref) => {
1409
1444
  /*#__PURE__*/
1410
1445
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
1411
1446
  jsx("div", {
1412
- className: classNames(`${CLASSNAME$18}__after`, {
1447
+ className: classNames$1.join(`${CLASSNAME$18}__after`, {
1413
1448
  [`${CLASSNAME$18}__after--is-clickable`]: hasAfterClick
1414
1449
  }),
1415
1450
  onClick: handleOnAfterClick,
@@ -1505,7 +1540,7 @@ const InternalChipGroup = forwardRef((props, ref) => {
1505
1540
  return /*#__PURE__*/jsx("div", {
1506
1541
  ref: ref,
1507
1542
  ...forwardedProps,
1508
- className: classNames(className, CLASSNAME$17),
1543
+ className: classNames$1.join(className, CLASSNAME$17),
1509
1544
  children: children
1510
1545
  });
1511
1546
  });
@@ -1577,7 +1612,7 @@ const CommentBlock = forwardRef((props, ref) => {
1577
1612
  const hasChildren = Children.count(children) > 0;
1578
1613
  return /*#__PURE__*/jsxs("div", {
1579
1614
  ref: ref,
1580
- className: classNames(className, handleBasicClasses({
1615
+ className: classNames$1.join(className, handleBasicClasses({
1581
1616
  hasChildren: hasChildren && isOpen,
1582
1617
  hasIndentedChildren: hasChildren && variant === CommentBlockVariant.indented,
1583
1618
  hasLinearChildren: hasChildren && variant === CommentBlockVariant.linear,
@@ -1884,26 +1919,6 @@ function formatDayNumber(locale, date) {
1884
1919
  return formattedDate;
1885
1920
  }
1886
1921
 
1887
- /**
1888
- * Optional global `window` instance (not defined when running SSR).
1889
- */
1890
- const WINDOW = typeof window !== 'undefined' ? window : undefined;
1891
-
1892
- /**
1893
- * Optional global `document` instance (not defined when running SSR).
1894
- */
1895
- const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
1896
-
1897
- /**
1898
- * Check if we are running in a true browser
1899
- */
1900
- const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.includes('jsdom');
1901
-
1902
- /**
1903
- * Visually hidden a11y utility class name
1904
- */
1905
- const VISUALLY_HIDDEN = 'visually-hidden';
1906
-
1907
1922
  /**
1908
1923
  * Component display name.
1909
1924
  */
@@ -2011,7 +2026,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
2011
2026
  label: /*#__PURE__*/jsxs(Fragment, {
2012
2027
  children: [/*#__PURE__*/jsx("span", {
2013
2028
  "aria-live": labelAriaLive,
2014
- className: onMonthChange ? VISUALLY_HIDDEN : '',
2029
+ className: onMonthChange ? classNames$1.visuallyHidden() : undefined,
2015
2030
  dir: "auto",
2016
2031
  children: monthYear
2017
2032
  }), onMonthChange && /*#__PURE__*/jsx(FlexBox, {
@@ -2071,7 +2086,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
2071
2086
  className: `${CLASSNAME$15}__day-wrapper`,
2072
2087
  children: date && /*#__PURE__*/jsxs(Button, {
2073
2088
  ref: isSelected || !value && isToday ? todayOrSelectedDateRef : null,
2074
- className: classNames(`${CLASSNAME$15}__month-day`, {
2089
+ className: classNames$1.join(`${CLASSNAME$15}__month-day`, {
2075
2090
  [`${CLASSNAME$15}__month-day--is-today`]: isToday
2076
2091
  }),
2077
2092
  disabled: isOutOfRange,
@@ -2082,7 +2097,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
2082
2097
  "aria-hidden": true,
2083
2098
  children: formatDayNumber(locale, date)
2084
2099
  }), /*#__PURE__*/jsx("span", {
2085
- className: VISUALLY_HIDDEN,
2100
+ className: classNames$1.visuallyHidden(),
2086
2101
  children: date.toLocaleDateString(locale, {
2087
2102
  day: 'numeric',
2088
2103
  month: 'long',
@@ -2245,6 +2260,21 @@ const DatePickerField = forwardRef((props, ref) => {
2245
2260
  });
2246
2261
  DatePickerField.displayName = COMPONENT_NAME$15;
2247
2262
 
2263
+ /**
2264
+ * Optional global `window` instance (not defined when running SSR).
2265
+ */
2266
+ const WINDOW = typeof window !== 'undefined' ? window : undefined;
2267
+
2268
+ /**
2269
+ * Optional global `document` instance (not defined when running SSR).
2270
+ */
2271
+ const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
2272
+
2273
+ /**
2274
+ * Check if we are running in a true browser
2275
+ */
2276
+ const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.includes('jsdom');
2277
+
2248
2278
  /**
2249
2279
  * Keep track of listeners, only the last registered listener gets activated at any point (previously registered
2250
2280
  * listener are disabled).
@@ -2845,7 +2875,7 @@ const Dialog = forwardRef((props, ref) => {
2845
2875
  children: /*#__PURE__*/jsxs("div", {
2846
2876
  ref: mergeRefs(rootRef, ref),
2847
2877
  ...forwardedProps,
2848
- className: classNames(className, handleBasicClasses({
2878
+ className: classNames$1.join(className, handleBasicClasses({
2849
2879
  isHidden: !isOpen,
2850
2880
  isLoading,
2851
2881
  isShown: isOpen || isVisible,
@@ -2875,7 +2905,7 @@ const Dialog = forwardRef((props, ref) => {
2875
2905
  ref: wrapperRef,
2876
2906
  children: [(header || headerChildContent) && /*#__PURE__*/jsxs("header", {
2877
2907
  ...headerChildProps,
2878
- className: classNames(`${CLASSNAME$14}__header`, (forceHeaderDivider || hasTopIntersection) && `${CLASSNAME$14}__header--has-divider`, headerChildProps?.className),
2908
+ className: classNames$1.join(`${CLASSNAME$14}__header`, (forceHeaderDivider || hasTopIntersection) && `${CLASSNAME$14}__header--has-divider`, headerChildProps?.className),
2879
2909
  children: [header, headerChildContent]
2880
2910
  }), /*#__PURE__*/jsxs("div", {
2881
2911
  ref: mergeRefs(contentRef, localContentRef),
@@ -2889,7 +2919,7 @@ const Dialog = forwardRef((props, ref) => {
2889
2919
  })]
2890
2920
  }), (footer || footerChildContent) && /*#__PURE__*/jsxs("footer", {
2891
2921
  ...footerChildProps,
2892
- className: classNames(`${CLASSNAME$14}__footer`, (forceFooterDivider || hasBottomIntersection) && `${CLASSNAME$14}__footer--has-divider`, footerChildProps?.className),
2922
+ className: classNames$1.join(`${CLASSNAME$14}__footer`, (forceFooterDivider || hasBottomIntersection) && `${CLASSNAME$14}__footer--has-divider`, footerChildProps?.className),
2893
2923
  children: [footer, footerChildContent]
2894
2924
  }), isLoading && /*#__PURE__*/jsx("div", {
2895
2925
  className: `${CLASSNAME$14}__progress-overlay`,
@@ -2941,7 +2971,7 @@ const Divider = forwardRef((props, ref) => {
2941
2971
  return /*#__PURE__*/jsx("hr", {
2942
2972
  ref: ref,
2943
2973
  ...forwardedProps,
2944
- className: classNames(className, handleBasicClasses({
2974
+ className: classNames$1.join(className, handleBasicClasses({
2945
2975
  prefix: CLASSNAME$13,
2946
2976
  theme
2947
2977
  }))
@@ -2978,7 +3008,7 @@ const DragHandle = forwardRef((props, ref) => {
2978
3008
  return /*#__PURE__*/jsx("div", {
2979
3009
  ref: ref,
2980
3010
  ...forwardedProps,
2981
- className: classNames(className, handleBasicClasses({
3011
+ className: classNames$1.join(className, handleBasicClasses({
2982
3012
  prefix: CLASSNAME$12,
2983
3013
  theme
2984
3014
  })),
@@ -3193,7 +3223,7 @@ const InternalList = forwardRef((props, ref) => {
3193
3223
  } = props;
3194
3224
  return /*#__PURE__*/jsx("ul", {
3195
3225
  ...forwardedProps,
3196
- className: classNames(className, handleBasicClasses({
3226
+ className: classNames$1.join(className, handleBasicClasses({
3197
3227
  prefix: CLASSNAME$11,
3198
3228
  itemPadding: itemPadding ?? (isClickable ? Size.big : undefined)
3199
3229
  })),
@@ -5141,10 +5171,6 @@ var fromEntries = function fromEntries(entries) {
5141
5171
 
5142
5172
  var useIsomorphicLayoutEffect = typeof window !== 'undefined' && window.document && window.document.createElement ? React.useLayoutEffect : React.useEffect;
5143
5173
 
5144
- function getDefaultExportFromCjs (x) {
5145
- return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
5146
- }
5147
-
5148
5174
  /* global Map:readonly, Set:readonly, ArrayBuffer:readonly */
5149
5175
 
5150
5176
  var reactFastCompare;
@@ -5724,7 +5750,7 @@ const _InnerPopover = forwardRef((props, ref) => {
5724
5750
  children: /*#__PURE__*/jsxs(Component, {
5725
5751
  ...forwardedProps,
5726
5752
  ref: mergedRefs,
5727
- className: classNames(className, handleBasicClasses({
5753
+ className: classNames$1.join(className, handleBasicClasses({
5728
5754
  prefix: CLASSNAME$10,
5729
5755
  theme,
5730
5756
  elevation: Math.min(elevation || 0, 5),
@@ -5884,7 +5910,7 @@ const Dropdown = forwardRef((props, ref) => {
5884
5910
  ...forwardedProps,
5885
5911
  focusAnchorOnClose: focusAnchorOnClose,
5886
5912
  anchorRef: anchorRef,
5887
- className: classNames(className, CLASSNAME$$),
5913
+ className: classNames$1.join(className, CLASSNAME$$),
5888
5914
  elevation: 0,
5889
5915
  closeOnClickAway: closeOnClickAway,
5890
5916
  closeOnEscape: closeOnEscape,
@@ -5975,7 +6001,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
5975
6001
  }
5976
6002
  };
5977
6003
  const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
5978
- const rootClassName = classNames(className, handleBasicClasses({
6004
+ const rootClassName = classNames$1.join(className, handleBasicClasses({
5979
6005
  hasBackground,
5980
6006
  hasHeader: Boolean(!isEmpty(headerProps.children)),
5981
6007
  hasHeaderDivider,
@@ -6084,7 +6110,7 @@ const Flag = forwardRef((props, ref) => {
6084
6110
  const isTruncated = !!truncate;
6085
6111
  return /*#__PURE__*/jsxs("div", {
6086
6112
  ...forwardedProps,
6087
- className: classNames(className, handleBasicClasses({
6113
+ className: classNames$1.join(className, handleBasicClasses({
6088
6114
  prefix: CLASSNAME$Z,
6089
6115
  color: flagColor,
6090
6116
  isTruncated
@@ -6142,7 +6168,7 @@ const FlexBox = forwardRef((props, ref) => {
6142
6168
  return /*#__PURE__*/jsx(Component, {
6143
6169
  ref: ref,
6144
6170
  ...forwardedProps,
6145
- className: classNames(className, handleBasicClasses({
6171
+ className: classNames$1.join(className, handleBasicClasses({
6146
6172
  prefix: CLASSNAME$Y,
6147
6173
  orientation: orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null),
6148
6174
  vAlign,
@@ -6218,7 +6244,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
6218
6244
  }, [children]);
6219
6245
  return /*#__PURE__*/jsxs(FlexBox, {
6220
6246
  ref: ref,
6221
- className: classNames(className, CLASSNAME$X),
6247
+ className: classNames$1.join(className, CLASSNAME$X),
6222
6248
  gap: gap,
6223
6249
  orientation: orientation,
6224
6250
  ...forwardedProps,
@@ -6228,7 +6254,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
6228
6254
  hAlign: forwardedProps.hAlign,
6229
6255
  ...figureProps,
6230
6256
  ...sections.figureChildProps,
6231
- className: classNames(figureProps?.className, sections.figureChildProps?.className, `${CLASSNAME$X}__figure`),
6257
+ className: classNames$1.join(figureProps?.className, sections.figureChildProps?.className, `${CLASSNAME$X}__figure`),
6232
6258
  children: [figure, sections.figureChildProps?.children]
6233
6259
  }), (sections.contentChildProps?.children || sections.otherChildren.length > 0) && /*#__PURE__*/jsxs(FlexBox, {
6234
6260
  ref: sections.contentChild?.ref,
@@ -6238,7 +6264,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
6238
6264
  hAlign: forwardedProps.hAlign,
6239
6265
  ...contentProps,
6240
6266
  ...sections.contentChildProps,
6241
- className: classNames(contentProps?.className, sections.contentChildProps?.className, `${CLASSNAME$X}__content`),
6267
+ className: classNames$1.join(contentProps?.className, sections.contentChildProps?.className, `${CLASSNAME$X}__content`),
6242
6268
  children: [sections.contentChildProps?.children, sections.otherChildren]
6243
6269
  }), (actions || sections.actionsChildProps?.children) && /*#__PURE__*/jsxs(FlexBox, {
6244
6270
  ref: sections.actionsChild?.ref,
@@ -6246,7 +6272,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
6246
6272
  hAlign: forwardedProps.hAlign,
6247
6273
  ...actionsProps,
6248
6274
  ...sections.actionsChildProps,
6249
- className: classNames(actionsProps?.className, sections.actionsChildProps?.className, `${CLASSNAME$X}__actions`),
6275
+ className: classNames$1.join(actionsProps?.className, sections.actionsChildProps?.className, `${CLASSNAME$X}__actions`),
6250
6276
  children: [actions, sections.actionsChildProps?.children]
6251
6277
  })]
6252
6278
  });
@@ -6292,7 +6318,7 @@ const useOverflowTooltipLabel = content => {
6292
6318
  // Not inside a tooltip
6293
6319
  !parentTooltip && labelElement &&
6294
6320
  // Not inside a visually hidden
6295
- !labelElement?.closest(`.${VISUALLY_HIDDEN}`) &&
6321
+ !labelElement?.closest(`.${classNames$1.visuallyHidden()}`) &&
6296
6322
  // Text overflows
6297
6323
  labelElement.offsetWidth < labelElement.scrollWidth) {
6298
6324
  // Set tooltip label
@@ -6357,7 +6383,6 @@ const Text = forwardRef((props, ref) => {
6357
6383
  style,
6358
6384
  ...forwardedProps
6359
6385
  } = props;
6360
- const typographyClass = typography && getTypographyClassName(typography);
6361
6386
 
6362
6387
  // Truncate mode
6363
6388
  const truncateLinesStyle = typeof truncate === 'object' && truncate.lines > 1 && {
@@ -6380,11 +6405,11 @@ const Text = forwardRef((props, ref) => {
6380
6405
  } = useOverflowTooltipLabel(children);
6381
6406
  return /*#__PURE__*/jsx(Component, {
6382
6407
  ref: useMergeRefs(ref, labelRef),
6383
- className: classNames(className, handleBasicClasses({
6408
+ className: classNames$1.join(className, handleBasicClasses({
6384
6409
  prefix: CLASSNAME$W,
6385
6410
  isTruncated: isTruncated && !isTruncatedMultiline,
6386
6411
  isTruncatedMultiline
6387
- }), typographyClass, fontColorClass(color, colorVariant), noWrap && `${CLASSNAME$W}--no-wrap`),
6412
+ }), typography && classNames$1.typography(typography), color && classNames$1.font(color, colorVariant), noWrap && `${CLASSNAME$W}--no-wrap`),
6388
6413
  title: tooltipLabel,
6389
6414
  style: {
6390
6415
  ...truncateLinesStyle,
@@ -6464,7 +6489,7 @@ const Heading = forwardRef((props, ref) => {
6464
6489
  const computedHeadingElement = as || headingElement;
6465
6490
  return /*#__PURE__*/jsx(Text, {
6466
6491
  ref: ref,
6467
- className: classNames(className, CLASSNAME$V),
6492
+ className: classNames$1.join(className, CLASSNAME$V),
6468
6493
  as: computedHeadingElement,
6469
6494
  typography: DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement],
6470
6495
  ...forwardedProps,
@@ -6537,7 +6562,7 @@ const Grid = forwardRef((props, ref) => {
6537
6562
  return /*#__PURE__*/jsx("div", {
6538
6563
  ref: ref,
6539
6564
  ...forwardedProps,
6540
- className: classNames(className, `${CLASSNAME$U}-container`, {
6565
+ className: classNames$1.join(className, `${CLASSNAME$U}-container`, {
6541
6566
  [`${CLASSNAME$U}--h-align-${hAlign}`]: hAlign
6542
6567
  }, {
6543
6568
  [`${CLASSNAME$U}--v-align-${vAlign}`]: vAlign
@@ -6583,7 +6608,7 @@ const GridItem = forwardRef((props, ref) => {
6583
6608
  return /*#__PURE__*/jsx("div", {
6584
6609
  ref: ref,
6585
6610
  ...forwardedProps,
6586
- className: classNames(className, handleBasicClasses({
6611
+ className: classNames$1.join(className, handleBasicClasses({
6587
6612
  prefix: CLASSNAME$T,
6588
6613
  width,
6589
6614
  order,
@@ -6633,7 +6658,7 @@ const GridColumn = forwardRef((props, ref) => {
6633
6658
  return /*#__PURE__*/jsx(Component, {
6634
6659
  ...forwardedProps,
6635
6660
  ref: ref,
6636
- className: classNames(className, CLASSNAME$S),
6661
+ className: classNames$1.join(className, CLASSNAME$S),
6637
6662
  style: {
6638
6663
  ...style,
6639
6664
  ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
@@ -6647,6 +6672,13 @@ GridColumn.displayName = COMPONENT_NAME$S;
6647
6672
  GridColumn.className = CLASSNAME$S;
6648
6673
  GridColumn.defaultProps = DEFAULT_PROPS$K;
6649
6674
 
6675
+ /** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
6676
+ function resolveColorWithVariants(colorWithVariants, colorVariant) {
6677
+ if (!colorWithVariants) return [undefined, colorVariant];
6678
+ const [color, baseColorVariant] = colorWithVariants.split('-');
6679
+ return [color, colorVariant || baseColorVariant];
6680
+ }
6681
+
6650
6682
  /**
6651
6683
  * Component display name.
6652
6684
  */
@@ -6710,7 +6742,7 @@ const Icon = forwardRef((props, ref) => {
6710
6742
  return /*#__PURE__*/jsx("i", {
6711
6743
  ref: ref,
6712
6744
  ...forwardedProps,
6713
- className: classNames(className, handleBasicClasses({
6745
+ className: classNames$1.join(className, handleBasicClasses({
6714
6746
  color: iconColor,
6715
6747
  colorVariant: iconColorVariant,
6716
6748
  hasShape,
@@ -6773,7 +6805,7 @@ const ImageCaption = props => {
6773
6805
  };
6774
6806
  return /*#__PURE__*/jsxs(FlexBox, {
6775
6807
  as: as,
6776
- className: classNames(baseClassName && `${baseClassName}__wrapper`),
6808
+ className: classNames$1.join(baseClassName && `${baseClassName}__wrapper`),
6777
6809
  style: captionStyle,
6778
6810
  orientation: "vertical",
6779
6811
  vAlign: align,
@@ -6781,25 +6813,25 @@ const ImageCaption = props => {
6781
6813
  gap: "regular",
6782
6814
  children: [(title || description) && /*#__PURE__*/jsxs(Text, {
6783
6815
  as: "p",
6784
- className: classNames(baseClassName && `${baseClassName}__caption`),
6816
+ className: classNames$1.join(baseClassName && `${baseClassName}__caption`),
6785
6817
  truncate: truncate,
6786
6818
  ...baseColor,
6787
6819
  children: [title && /*#__PURE__*/jsx(Text, {
6788
6820
  ...titleProps,
6789
6821
  as: "span",
6790
- className: classNames(titleProps?.className, baseClassName && `${baseClassName}__title`),
6822
+ className: classNames$1.join(titleProps?.className, baseClassName && `${baseClassName}__title`),
6791
6823
  typography: "subtitle1",
6792
6824
  ...titleColor,
6793
6825
  children: title
6794
6826
  }), ' ', description && /*#__PURE__*/jsx(Text, {
6795
6827
  ...descriptionProps,
6796
6828
  as: "span",
6797
- className: classNames(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
6829
+ className: classNames$1.join(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
6798
6830
  typography: "body1",
6799
6831
  ...descriptionContent
6800
6832
  })]
6801
6833
  }), tags && /*#__PURE__*/jsx(FlexBox, {
6802
- className: classNames(baseClassName && `${baseClassName}__tags`),
6834
+ className: classNames$1.join(baseClassName && `${baseClassName}__tags`),
6803
6835
  orientation: "horizontal",
6804
6836
  vAlign: align,
6805
6837
  children: tags
@@ -6869,7 +6901,7 @@ const ImageBlock = forwardRef((props, ref) => {
6869
6901
  return /*#__PURE__*/jsxs("figure", {
6870
6902
  ref: ref,
6871
6903
  ...forwardedProps,
6872
- className: classNames(className, handleBasicClasses({
6904
+ className: classNames$1.join(className, handleBasicClasses({
6873
6905
  prefix: CLASSNAME$Q,
6874
6906
  captionPosition,
6875
6907
  align,
@@ -6878,7 +6910,7 @@ const ImageBlock = forwardRef((props, ref) => {
6878
6910
  }), fillHeight && `${CLASSNAME$Q}--fill-height`),
6879
6911
  children: [/*#__PURE__*/jsx(Thumbnail, {
6880
6912
  ...thumbnailProps,
6881
- className: classNames(`${CLASSNAME$Q}__image`, thumbnailProps?.className),
6913
+ className: classNames$1.join(`${CLASSNAME$Q}__image`, thumbnailProps?.className),
6882
6914
  fillHeight: fillHeight,
6883
6915
  align: align,
6884
6916
  image: image,
@@ -7599,7 +7631,7 @@ const Inner = forwardRef((props, ref) => {
7599
7631
  }, [onClose]);
7600
7632
  return /*#__PURE__*/jsx(Lightbox, {
7601
7633
  ref: ref,
7602
- className: classNames(className, CLASSNAME$P),
7634
+ className: classNames$1.join(className, CLASSNAME$P),
7603
7635
  parentElement: parentElement,
7604
7636
  isOpen: isOpen,
7605
7637
  onClose: onClose,
@@ -7674,14 +7706,13 @@ const InlineList = forwardRef((props, ref) => {
7674
7706
  wrap,
7675
7707
  ...forwardedProps
7676
7708
  } = props;
7677
- const typographyClassName = typography && getTypographyClassName(typography);
7678
7709
  return (
7679
7710
  /*#__PURE__*/
7680
7711
  // eslint-disable-next-line jsx-a11y/no-redundant-roles
7681
7712
  jsx("ul", {
7682
7713
  ...forwardedProps,
7683
7714
  ref: ref,
7684
- className: classNames(className, CLASSNAME$O, wrap && `${CLASSNAME$O}--wrap`, fontColorClass(color, colorVariant), typographyClassName)
7715
+ className: classNames$1.join(className, CLASSNAME$O, wrap && `${CLASSNAME$O}--wrap`, color && classNames$1.font(color, colorVariant), typography && classNames$1.typography(typography))
7685
7716
  // Lists with removed bullet style can lose their a11y list role on some browsers
7686
7717
  ,
7687
7718
  role: "list",
@@ -7760,7 +7791,7 @@ const InputHelper = forwardRef((props, ref) => {
7760
7791
  return /*#__PURE__*/jsx("p", {
7761
7792
  ref: ref,
7762
7793
  ...forwardedProps,
7763
- className: classNames(className, handleBasicClasses({
7794
+ className: classNames$1.join(className, handleBasicClasses({
7764
7795
  prefix: CLASSNAME$N,
7765
7796
  color,
7766
7797
  theme
@@ -7805,17 +7836,16 @@ const InputLabel = forwardRef((props, ref) => {
7805
7836
  typography,
7806
7837
  ...forwardedProps
7807
7838
  } = props;
7808
- const typographyClass = typography && getTypographyClassName(typography);
7809
7839
  return /*#__PURE__*/jsx("label", {
7810
7840
  ref: ref,
7811
7841
  ...forwardedProps,
7812
7842
  htmlFor: htmlFor,
7813
- className: classNames(className, handleBasicClasses({
7843
+ className: classNames$1.join(className, handleBasicClasses({
7814
7844
  prefix: CLASSNAME$M,
7815
7845
  isRequired,
7816
7846
  theme,
7817
7847
  hasCustomTypography: Boolean(typography)
7818
- }), typographyClass),
7848
+ }), typography && classNames$1.typography(typography)),
7819
7849
  children: children
7820
7850
  });
7821
7851
  });
@@ -7915,7 +7945,7 @@ const Lightbox = forwardRef((props, ref) => {
7915
7945
  "aria-modal": "true",
7916
7946
  role: "dialog",
7917
7947
  tabIndex: -1,
7918
- className: classNames(className, handleBasicClasses({
7948
+ className: classNames$1.join(className, handleBasicClasses({
7919
7949
  prefix: CLASSNAME$L,
7920
7950
  isHidden: !isOpen,
7921
7951
  isShown: isOpen || isVisible,
@@ -7997,12 +8027,12 @@ const Link = forwardRef((props, ref) => {
7997
8027
  as: linkAs || (forwardedProps.href ? 'a' : 'button'),
7998
8028
  ...forwardedProps,
7999
8029
  ...disabledStateProps,
8000
- className: classNames(className, handleBasicClasses({
8030
+ className: classNames$1.join(className, handleBasicClasses({
8001
8031
  prefix: CLASSNAME$K,
8002
8032
  color,
8003
8033
  colorVariant,
8004
8034
  hasTypography: !!typography
8005
- }), typography && getTypographyClassName(typography)),
8035
+ }), typography && classNames$1.typography(typography)),
8006
8036
  children: wrapChildrenIconWithSpaces(/*#__PURE__*/jsxs(Fragment, {
8007
8037
  children: [leftIcon && /*#__PURE__*/jsx(Icon, {
8008
8038
  icon: leftIcon,
@@ -8065,7 +8095,7 @@ const LinkPreview = forwardRef((props, ref) => {
8065
8095
  return /*#__PURE__*/jsx("article", {
8066
8096
  ref: ref,
8067
8097
  ...forwardedProps,
8068
- className: classNames(className, handleBasicClasses({
8098
+ className: classNames$1.join(className, handleBasicClasses({
8069
8099
  prefix: CLASSNAME$J,
8070
8100
  size: size === Size.big && thumbnailProps ? Size.big : Size.regular,
8071
8101
  theme
@@ -8097,7 +8127,7 @@ const LinkPreview = forwardRef((props, ref) => {
8097
8127
  target: "_blank",
8098
8128
  href: link,
8099
8129
  color: theme === Theme.light ? ColorPalette.dark : ColorPalette.light,
8100
- colorVariant: ColorVariant$1.N,
8130
+ colorVariant: ColorVariant.N,
8101
8131
  children: title
8102
8132
  })
8103
8133
  }), description && /*#__PURE__*/jsx("p", {
@@ -8108,11 +8138,11 @@ const LinkPreview = forwardRef((props, ref) => {
8108
8138
  children: /*#__PURE__*/jsx(Link, {
8109
8139
  ...linkProps,
8110
8140
  linkAs: linkAs,
8111
- className: classNames(`${CLASSNAME$J}__link`, linkProps?.className),
8141
+ className: classNames$1.join(`${CLASSNAME$J}__link`, linkProps?.className),
8112
8142
  target: "_blank",
8113
8143
  href: link,
8114
8144
  color: theme === Theme.light ? ColorPalette.primary : ColorPalette.light,
8115
- colorVariant: ColorVariant$1.N
8145
+ colorVariant: ColorVariant.N
8116
8146
  // Avoid redundant links in focus order
8117
8147
  ,
8118
8148
  tabIndex: title ? '-1' : undefined,
@@ -8217,7 +8247,7 @@ const ListItem = forwardRef((props, ref) => {
8217
8247
  return /*#__PURE__*/jsx("li", {
8218
8248
  ref: ref,
8219
8249
  ...forwardedProps,
8220
- className: classNames(className, handleBasicClasses({
8250
+ className: classNames$1.join(className, handleBasicClasses({
8221
8251
  prefix: CLASSNAME$I,
8222
8252
  size
8223
8253
  })),
@@ -8232,7 +8262,7 @@ const ListItem = forwardRef((props, ref) => {
8232
8262
  'aria-disabled': isAnyDisabled,
8233
8263
  ...linkProps,
8234
8264
  href: isAnyDisabled ? undefined : linkProps.href,
8235
- className: classNames(handleBasicClasses({
8265
+ className: classNames$1.join(handleBasicClasses({
8236
8266
  prefix: `${CLASSNAME$I}__link`,
8237
8267
  isHighlighted,
8238
8268
  isSelected,
@@ -8279,7 +8309,7 @@ const ListDivider = forwardRef((props, ref) => {
8279
8309
  return /*#__PURE__*/jsx("li", {
8280
8310
  ref: ref,
8281
8311
  ...forwardedProps,
8282
- className: classNames(className, CLASSNAME$H)
8312
+ className: classNames$1.join(className, CLASSNAME$H)
8283
8313
  });
8284
8314
  });
8285
8315
  ListDivider.displayName = COMPONENT_NAME$H;
@@ -8311,7 +8341,7 @@ const ListSubheader = forwardRef((props, ref) => {
8311
8341
  return /*#__PURE__*/jsx("li", {
8312
8342
  ref: ref,
8313
8343
  ...forwardedProps,
8314
- className: classNames(className, CLASSNAME$G),
8344
+ className: classNames$1.join(className, CLASSNAME$G),
8315
8345
  children: children
8316
8346
  });
8317
8347
  });
@@ -8378,7 +8408,7 @@ const Message = forwardRef((props, ref) => {
8378
8408
  const isCloseButtonDisplayed = hasBackground && kind === 'info' && onClick && closeButtonLabel;
8379
8409
  return /*#__PURE__*/jsxs("div", {
8380
8410
  ref: ref,
8381
- className: classNames(className, handleBasicClasses({
8411
+ className: classNames$1.join(className, handleBasicClasses({
8382
8412
  color,
8383
8413
  hasBackground,
8384
8414
  prefix: CLASSNAME$F
@@ -8445,7 +8475,7 @@ const Mosaic = forwardRef((props, ref) => {
8445
8475
  return /*#__PURE__*/jsx("div", {
8446
8476
  ref: ref,
8447
8477
  ...forwardedProps,
8448
- className: classNames(className, handleBasicClasses({
8478
+ className: classNames$1.join(className, handleBasicClasses({
8449
8479
  prefix: CLASSNAME$E,
8450
8480
  theme
8451
8481
  }), {
@@ -8528,7 +8558,7 @@ const NavigationSection = forwardRef((props, ref) => {
8528
8558
  const theme = useTheme();
8529
8559
  const isDropdown = orientation === Orientation.horizontal;
8530
8560
  return /*#__PURE__*/jsxs("li", {
8531
- className: classNames(className, CLASSNAME$D, ITEM_CLASSNAME, handleBasicClasses({
8561
+ className: classNames$1.join(className, CLASSNAME$D, ITEM_CLASSNAME, handleBasicClasses({
8532
8562
  prefix: ITEM_CLASSNAME,
8533
8563
  theme
8534
8564
  })),
@@ -8538,7 +8568,7 @@ const NavigationSection = forwardRef((props, ref) => {
8538
8568
  ...forwardedProps,
8539
8569
  "aria-controls": sectionId,
8540
8570
  "aria-expanded": isOpen,
8541
- className: classNames(`${ITEM_CLASSNAME}__link`),
8571
+ className: classNames$1.join(`${ITEM_CLASSNAME}__link`),
8542
8572
  ref: buttonRef,
8543
8573
  onClick: event => {
8544
8574
  setIsOpen(!isOpen);
@@ -8555,7 +8585,7 @@ const NavigationSection = forwardRef((props, ref) => {
8555
8585
  ref: ref,
8556
8586
  children: label
8557
8587
  }), /*#__PURE__*/jsx(Icon, {
8558
- className: classNames(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME$D}__chevron`),
8588
+ className: classNames$1.join(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME$D}__chevron`),
8559
8589
  icon: isOpen ? mdiChevronUp : mdiChevronDown
8560
8590
  })]
8561
8591
  }), isOpen && (isDropdown ? /*#__PURE__*/jsx(Popover, {
@@ -8606,7 +8636,7 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
8606
8636
  labelRef
8607
8637
  } = useOverflowTooltipLabel(label);
8608
8638
  return /*#__PURE__*/jsx("li", {
8609
- className: classNames(className, handleBasicClasses({
8639
+ className: classNames$1.join(className, handleBasicClasses({
8610
8640
  prefix: ITEM_CLASSNAME,
8611
8641
  theme
8612
8642
  })),
@@ -8670,7 +8700,7 @@ const Navigation = forwardRef((props, ref) => {
8670
8700
  return /*#__PURE__*/jsx(ThemeProvider, {
8671
8701
  value: theme,
8672
8702
  children: /*#__PURE__*/jsx("nav", {
8673
- className: classNames(className, handleBasicClasses({
8703
+ className: classNames$1.join(className, handleBasicClasses({
8674
8704
  prefix: CLASSNAME$C,
8675
8705
  theme,
8676
8706
  orientation
@@ -8787,7 +8817,7 @@ const Notification = forwardRef((props, ref) => {
8787
8817
  ref: mergeRefs(ref, rootRef),
8788
8818
  role: "alert",
8789
8819
  ...forwardedProps,
8790
- className: classNames(className, handleBasicClasses({
8820
+ className: classNames$1.join(className, handleBasicClasses({
8791
8821
  color,
8792
8822
  hasAction,
8793
8823
  isHidden: !isOpen,
@@ -8860,7 +8890,7 @@ const PopoverDialog = forwardRef((props, ref) => {
8860
8890
  return /*#__PURE__*/jsx(Popover, {
8861
8891
  ...forwardedProps,
8862
8892
  ref: ref,
8863
- className: classNames(className, CLASSNAME$A),
8893
+ className: classNames$1.join(className, CLASSNAME$A),
8864
8894
  role: "dialog",
8865
8895
  "aria-modal": "true"
8866
8896
  /**
@@ -8926,7 +8956,7 @@ const PostBlock = forwardRef((props, ref) => {
8926
8956
  } = props;
8927
8957
  return /*#__PURE__*/jsxs("div", {
8928
8958
  ref: ref,
8929
- className: classNames(className, handleBasicClasses({
8959
+ className: classNames$1.join(className, handleBasicClasses({
8930
8960
  prefix: CLASSNAME$z,
8931
8961
  orientation,
8932
8962
  theme
@@ -9013,7 +9043,7 @@ const ProgressLinear = forwardRef((props, ref) => {
9013
9043
  return /*#__PURE__*/jsxs("div", {
9014
9044
  ref: ref,
9015
9045
  ...forwardedProps,
9016
- className: classNames(className, handleBasicClasses({
9046
+ className: classNames$1.join(className, handleBasicClasses({
9017
9047
  prefix: CLASSNAME$y,
9018
9048
  theme
9019
9049
  })),
@@ -9066,7 +9096,7 @@ const ProgressCircular = forwardRef((props, ref) => {
9066
9096
  return /*#__PURE__*/jsxs(Element, {
9067
9097
  ref: ref,
9068
9098
  ...forwardedProps,
9069
- className: classNames(className, handleBasicClasses({
9099
+ className: classNames$1.join(className, handleBasicClasses({
9070
9100
  prefix: CLASSNAME$x,
9071
9101
  theme,
9072
9102
  size,
@@ -9139,7 +9169,7 @@ const Progress = forwardRef((props, ref) => {
9139
9169
  return /*#__PURE__*/jsxs("div", {
9140
9170
  ref: ref,
9141
9171
  ...forwardedProps,
9142
- className: classNames(className, handleBasicClasses({
9172
+ className: classNames$1.join(className, handleBasicClasses({
9143
9173
  prefix: CLASSNAME$w,
9144
9174
  theme,
9145
9175
  variant
@@ -9452,7 +9482,7 @@ const ProgressTracker = forwardRef((props, ref) => {
9452
9482
  return /*#__PURE__*/jsxs("div", {
9453
9483
  ref: mergeRefs(ref, stepListRef),
9454
9484
  ...forwardedProps,
9455
- className: classNames(className, CLASSNAME$v),
9485
+ className: classNames$1.join(className, CLASSNAME$v),
9456
9486
  children: [/*#__PURE__*/jsx("div", {
9457
9487
  className: `${CLASSNAME$v}__steps`,
9458
9488
  role: "tablist",
@@ -9555,7 +9585,7 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
9555
9585
  ...forwardedProps,
9556
9586
  type: "button",
9557
9587
  id: state?.tabId,
9558
- className: classNames(className, handleBasicClasses({
9588
+ className: classNames$1.join(className, handleBasicClasses({
9559
9589
  prefix: CLASSNAME$u,
9560
9590
  hasError,
9561
9591
  isActive,
@@ -9627,7 +9657,7 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
9627
9657
  ref: ref,
9628
9658
  ...forwardedProps,
9629
9659
  id: state?.tabPanelId,
9630
- className: classNames(className, handleBasicClasses({
9660
+ className: classNames$1.join(className, handleBasicClasses({
9631
9661
  prefix: CLASSNAME$t,
9632
9662
  isActive
9633
9663
  })),
@@ -9695,7 +9725,7 @@ const RadioButton = forwardRef((props, ref) => {
9695
9725
  return /*#__PURE__*/jsxs("div", {
9696
9726
  ref: ref,
9697
9727
  ...forwardedProps,
9698
- className: classNames(className, handleBasicClasses({
9728
+ className: classNames$1.join(className, handleBasicClasses({
9699
9729
  isChecked,
9700
9730
  isDisabled: isAnyDisabled,
9701
9731
  isUnchecked: !isChecked,
@@ -9771,7 +9801,7 @@ const RadioGroup = forwardRef((props, ref) => {
9771
9801
  return /*#__PURE__*/jsx("div", {
9772
9802
  ref: ref,
9773
9803
  ...forwardedProps,
9774
- className: classNames(className, CLASSNAME$r),
9804
+ className: classNames$1.join(className, CLASSNAME$r),
9775
9805
  children: children
9776
9806
  });
9777
9807
  });
@@ -9856,7 +9886,7 @@ const WithSelectContext = (SelectElement, props, ref) => {
9856
9886
  useFocusTrap(isOpen && dropdownRef.current, focusElement?.current);
9857
9887
  return /*#__PURE__*/jsxs("div", {
9858
9888
  ref: mergeRefs(ref, selectRef),
9859
- className: classNames(className, handleBasicClasses({
9889
+ className: classNames$1.join(className, handleBasicClasses({
9860
9890
  hasError,
9861
9891
  hasLabel: Boolean(label),
9862
9892
  hasPlaceholder: Boolean(placeholder),
@@ -9986,7 +10016,7 @@ const SelectField = props => {
9986
10016
  icon: icon,
9987
10017
  size: Size.xs
9988
10018
  }), /*#__PURE__*/jsxs("div", {
9989
- className: classNames([`${CLASSNAME$p}__input-native`, isEmpty && placeholder && `${CLASSNAME$p}__input-native--placeholder`]),
10019
+ className: classNames$1.join([`${CLASSNAME$p}__input-native`, isEmpty && placeholder && `${CLASSNAME$p}__input-native--placeholder`]),
9990
10020
  children: [!isEmpty && /*#__PURE__*/jsx("span", {
9991
10021
  children: selectedValueRender?.(value)
9992
10022
  }), isEmpty && placeholder && /*#__PURE__*/jsx("span", {
@@ -10049,7 +10079,7 @@ const Select = forwardRef((props, ref) => {
10049
10079
  return WithSelectContext(SelectField, {
10050
10080
  ...DEFAULT_PROPS$p,
10051
10081
  ...props,
10052
- className: classNames(props.className, handleBasicClasses({
10082
+ className: classNames$1.join(props.className, handleBasicClasses({
10053
10083
  hasInputClear,
10054
10084
  hasUnique: !props.isEmpty,
10055
10085
  prefix: CLASSNAME$p
@@ -10142,7 +10172,7 @@ const SelectMultipleField = props => {
10142
10172
  className: `${CLASSNAME$o}__chips`,
10143
10173
  children: !isEmpty && value.map((val, index) => selectedChipRender?.(val, index, onClear, isDisabled, theme))
10144
10174
  }), isEmpty && placeholder && /*#__PURE__*/jsx("div", {
10145
- className: classNames([`${CLASSNAME$o}__input-native`, `${CLASSNAME$o}__input-native--placeholder`]),
10175
+ className: classNames$1.join([`${CLASSNAME$o}__input-native`, `${CLASSNAME$o}__input-native--placeholder`]),
10146
10176
  children: /*#__PURE__*/jsx("span", {
10147
10177
  children: placeholder
10148
10178
  })
@@ -10196,7 +10226,7 @@ const SelectMultiple = forwardRef((props, ref) => {
10196
10226
  return WithSelectContext(SelectMultipleField, {
10197
10227
  ...DEFAULT_PROPS$o,
10198
10228
  ...props,
10199
- className: classNames(props.className, handleBasicClasses({
10229
+ className: classNames$1.join(props.className, handleBasicClasses({
10200
10230
  hasMultiple: !props.isEmpty,
10201
10231
  prefix: CLASSNAME$o
10202
10232
  })),
@@ -10237,7 +10267,7 @@ const SideNavigation = forwardRef((props, ref) => {
10237
10267
  return /*#__PURE__*/jsx("ul", {
10238
10268
  ref: ref,
10239
10269
  ...forwardedProps,
10240
- className: classNames(className, theme === Theme.dark && 'lumx-color-font-light-N', CLASSNAME$n),
10270
+ className: classNames$1.join(className, theme === Theme.dark && 'lumx-color-font-light-N', CLASSNAME$n),
10241
10271
  children: content
10242
10272
  });
10243
10273
  });
@@ -10300,7 +10330,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
10300
10330
  return /*#__PURE__*/jsxs("li", {
10301
10331
  ref: ref,
10302
10332
  ...forwardedProps,
10303
- className: classNames(className, handleBasicClasses({
10333
+ className: classNames$1.join(className, handleBasicClasses({
10304
10334
  emphasis,
10305
10335
  isOpen: showChildren,
10306
10336
  isSelected,
@@ -10388,7 +10418,7 @@ const SkeletonCircle = forwardRef((props, ref) => {
10388
10418
  return /*#__PURE__*/jsx("div", {
10389
10419
  ref: ref,
10390
10420
  ...forwardedProps,
10391
- className: classNames(className, handleBasicClasses({
10421
+ className: classNames$1.join(className, handleBasicClasses({
10392
10422
  prefix: CLASSNAME$l,
10393
10423
  size,
10394
10424
  color,
@@ -10446,7 +10476,7 @@ const SkeletonRectangle = forwardRef((props, ref) => {
10446
10476
  return /*#__PURE__*/jsx("div", {
10447
10477
  ref: ref,
10448
10478
  ...forwardedProps,
10449
- className: classNames(className, handleBasicClasses({
10479
+ className: classNames$1.join(className, handleBasicClasses({
10450
10480
  prefix: CLASSNAME$k,
10451
10481
  aspectRatio,
10452
10482
  height: aspectRatio ? undefined : height,
@@ -10496,7 +10526,7 @@ const SkeletonTypography = forwardRef((props, ref) => {
10496
10526
  return /*#__PURE__*/jsx("div", {
10497
10527
  ref: ref,
10498
10528
  ...forwardedProps,
10499
- className: classNames(className, handleBasicClasses({
10529
+ className: classNames$1.join(className, handleBasicClasses({
10500
10530
  prefix: CLASSNAME$j,
10501
10531
  theme,
10502
10532
  typography,
@@ -10751,7 +10781,7 @@ const Slider = forwardRef((props, ref) => {
10751
10781
  return /*#__PURE__*/jsxs("div", {
10752
10782
  ref: ref,
10753
10783
  ...forwardedProps,
10754
- className: classNames(className, handleBasicClasses({
10784
+ className: classNames$1.join(className, handleBasicClasses({
10755
10785
  prefix: CLASSNAME$i,
10756
10786
  theme,
10757
10787
  hasLabel: Boolean(label)
@@ -11161,7 +11191,7 @@ const SlideshowItemGroup = forwardRef((props, ref) => {
11161
11191
  return /*#__PURE__*/jsx("div", {
11162
11192
  ref: mergeRefs(groupRef, ref),
11163
11193
  role: role,
11164
- className: classNames(className, CLASSNAME$h),
11194
+ className: classNames$1.join(className, CLASSNAME$h),
11165
11195
  "aria-roledescription": "slide",
11166
11196
  "aria-label": label,
11167
11197
  ...forwardedProps,
@@ -11312,7 +11342,7 @@ const SlideshowItem = forwardRef((props, ref) => {
11312
11342
  } = props;
11313
11343
  return /*#__PURE__*/jsx("div", {
11314
11344
  ref: ref,
11315
- className: classNames(className, CLASSNAME$g),
11345
+ className: classNames$1.join(className, CLASSNAME$g),
11316
11346
  ...forwardedProps,
11317
11347
  children: children
11318
11348
  });
@@ -11456,7 +11486,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
11456
11486
  return /*#__PURE__*/jsxs("div", {
11457
11487
  ref: ref,
11458
11488
  ...forwardedProps,
11459
- className: classNames(className, handleBasicClasses({
11489
+ className: classNames$1.join(className, handleBasicClasses({
11460
11490
  prefix: CLASSNAME$f,
11461
11491
  theme
11462
11492
  }), {
@@ -11488,7 +11518,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
11488
11518
  } = paginationItemProps ? paginationItemProps(index) : {};
11489
11519
  const ariaLabel = label || paginationItemLabel?.(index) || `${index + 1} / ${slidesCount}`;
11490
11520
  return /*#__PURE__*/jsx("button", {
11491
- className: classNames(handleBasicClasses({
11521
+ className: classNames$1.join(handleBasicClasses({
11492
11522
  prefix: `${CLASSNAME$f}__pagination-item`,
11493
11523
  isActive,
11494
11524
  isOnEdge,
@@ -11579,7 +11609,7 @@ const Slides = forwardRef((props, ref) => {
11579
11609
  id: id,
11580
11610
  ref: ref,
11581
11611
  ...forwardedProps,
11582
- className: classNames(className, handleBasicClasses({
11612
+ className: classNames$1.join(className, handleBasicClasses({
11583
11613
  prefix: CLASSNAME$e,
11584
11614
  theme
11585
11615
  }), {
@@ -11667,7 +11697,7 @@ const Switch = forwardRef((props, ref) => {
11667
11697
  return /*#__PURE__*/jsxs("div", {
11668
11698
  ref: ref,
11669
11699
  ...forwardedProps,
11670
- className: classNames(className, handleBasicClasses({
11700
+ className: classNames$1.join(className, handleBasicClasses({
11671
11701
  prefix: CLASSNAME$d,
11672
11702
  isChecked,
11673
11703
  isDisabled: isAnyDisabled,
@@ -11754,7 +11784,7 @@ const Table = forwardRef((props, ref) => {
11754
11784
  return /*#__PURE__*/jsx("table", {
11755
11785
  ref: ref,
11756
11786
  ...forwardedProps,
11757
- className: classNames(className, handleBasicClasses({
11787
+ className: classNames$1.join(className, handleBasicClasses({
11758
11788
  prefix: CLASSNAME$c,
11759
11789
  hasBefore,
11760
11790
  hasDividers,
@@ -11793,7 +11823,7 @@ const TableBody = forwardRef((props, ref) => {
11793
11823
  return /*#__PURE__*/jsx("tbody", {
11794
11824
  ref: ref,
11795
11825
  ...forwardedProps,
11796
- className: classNames(className, CLASSNAME$b),
11826
+ className: classNames$1.join(className, CLASSNAME$b),
11797
11827
  children: children
11798
11828
  });
11799
11829
  });
@@ -11870,7 +11900,7 @@ const TableCell = forwardRef((props, ref) => {
11870
11900
  children: [variant === TableCellVariant.head && /*#__PURE__*/jsx("th", {
11871
11901
  ref: ref,
11872
11902
  ...forwardedProps,
11873
- className: classNames(handleBasicClasses({
11903
+ className: classNames$1.join(handleBasicClasses({
11874
11904
  prefix: CLASSNAME$a,
11875
11905
  isSortable,
11876
11906
  isSorted: isSortable && !!sortOrder
@@ -11898,7 +11928,7 @@ const TableCell = forwardRef((props, ref) => {
11898
11928
  })
11899
11929
  }), variant === TableCellVariant.body && /*#__PURE__*/jsx("td", {
11900
11930
  ...forwardedProps,
11901
- className: classNames(className, CLASSNAME$a, `${CLASSNAME$a}--body`),
11931
+ className: classNames$1.join(className, CLASSNAME$a, `${CLASSNAME$a}--body`),
11902
11932
  children: /*#__PURE__*/jsx("div", {
11903
11933
  className: `${CLASSNAME$a}-content`,
11904
11934
  children: children
@@ -11941,7 +11971,7 @@ const TableHeader = forwardRef((props, ref) => {
11941
11971
  return /*#__PURE__*/jsx("thead", {
11942
11972
  ref: ref,
11943
11973
  ...forwardedProps,
11944
- className: classNames(className, CLASSNAME$9),
11974
+ className: classNames$1.join(className, CLASSNAME$9),
11945
11975
  children: children
11946
11976
  });
11947
11977
  });
@@ -11988,7 +12018,7 @@ const TableRow = forwardRef((props, ref) => {
11988
12018
  ref: ref,
11989
12019
  tabIndex: isClickable && !disabledStateProps.disabled ? 0 : -1,
11990
12020
  ...forwardedProps,
11991
- className: classNames(className, handleBasicClasses({
12021
+ className: classNames$1.join(className, handleBasicClasses({
11992
12022
  isClickable: isClickable && !isAnyDisabled,
11993
12023
  isDisabled: isAnyDisabled,
11994
12024
  isSelected: isSelected && !isAnyDisabled,
@@ -12118,7 +12148,7 @@ const TabList = forwardRef((props, ref) => {
12118
12148
  return /*#__PURE__*/jsx("div", {
12119
12149
  ref: mergeRefs(ref, tabListRef),
12120
12150
  ...forwardedProps,
12121
- className: classNames(className, handleBasicClasses({
12151
+ className: classNames$1.join(className, handleBasicClasses({
12122
12152
  prefix: TABS_CLASSNAME,
12123
12153
  layout,
12124
12154
  position,
@@ -12203,7 +12233,7 @@ const Tab = forwardRef((props, ref) => {
12203
12233
  ...forwardedProps,
12204
12234
  type: "button",
12205
12235
  id: state?.tabId,
12206
- className: classNames(className, handleBasicClasses({
12236
+ className: classNames$1.join(className, handleBasicClasses({
12207
12237
  prefix: CLASSNAME$7,
12208
12238
  isActive,
12209
12239
  isDisabled: isAnyDisabled
@@ -12269,7 +12299,7 @@ const TabPanel = forwardRef((props, ref) => {
12269
12299
  ref: ref,
12270
12300
  ...forwardedProps,
12271
12301
  id: state?.tabPanelId,
12272
- className: classNames(className, handleBasicClasses({
12302
+ className: classNames$1.join(className, handleBasicClasses({
12273
12303
  prefix: CLASSNAME$6,
12274
12304
  isActive
12275
12305
  })),
@@ -12329,7 +12359,7 @@ const RawInputText = forwardRef((props, ref) => {
12329
12359
  name: name,
12330
12360
  type: type,
12331
12361
  ref: useMergeRefs(ref, textareaRef),
12332
- className: classNames(className, handleBasicClasses({
12362
+ className: classNames$1.join(className, handleBasicClasses({
12333
12363
  prefix: INPUT_NATIVE_CLASSNAME,
12334
12364
  theme
12335
12365
  }), `${INPUT_NATIVE_CLASSNAME}--text`),
@@ -12409,7 +12439,7 @@ const RawInputTextarea = forwardRef((props, ref) => {
12409
12439
  return /*#__PURE__*/jsx("textarea", {
12410
12440
  ...forwardedProps,
12411
12441
  name: name,
12412
- className: classNames(className, handleBasicClasses({
12442
+ className: classNames$1.join(className, handleBasicClasses({
12413
12443
  prefix: INPUT_NATIVE_CLASSNAME,
12414
12444
  theme
12415
12445
  }), `${INPUT_NATIVE_CLASSNAME}--textarea`),
@@ -12546,7 +12576,7 @@ const TextField = forwardRef((props, ref) => {
12546
12576
  });
12547
12577
  return /*#__PURE__*/jsxs("div", {
12548
12578
  ref: ref,
12549
- className: classNames(className, handleBasicClasses({
12579
+ className: classNames$1.join(className, handleBasicClasses({
12550
12580
  hasChips: Boolean(chips),
12551
12581
  hasError: !isValid && hasError,
12552
12582
  hasIcon: Boolean(icon),
@@ -12872,7 +12902,7 @@ const Thumbnail = forwardRef((props, ref) => {
12872
12902
  return /*#__PURE__*/jsxs(Wrapper, {
12873
12903
  ...wrapperProps,
12874
12904
  ref: ref,
12875
- className: classNames(linkProps?.className, className, handleBasicClasses({
12905
+ className: classNames$1.join(linkProps?.className, className, handleBasicClasses({
12876
12906
  align,
12877
12907
  aspectRatio,
12878
12908
  prefix: CLASSNAME$4,
@@ -12903,7 +12933,7 @@ const Thumbnail = forwardRef((props, ref) => {
12903
12933
  ...loadingStyle
12904
12934
  },
12905
12935
  ref: useMergeRefs(setImgElement, propImgRef),
12906
- className: classNames(handleBasicClasses({
12936
+ className: classNames$1.join(handleBasicClasses({
12907
12937
  prefix: `${CLASSNAME$4}__image`,
12908
12938
  isLoading,
12909
12939
  hasDefinedSize: Boolean(imgProps?.height && imgProps.width)
@@ -12921,7 +12951,7 @@ const Thumbnail = forwardRef((props, ref) => {
12921
12951
  }) : fallback
12922
12952
  })]
12923
12953
  }), badge && /*#__PURE__*/React__default.cloneElement(badge, {
12924
- className: classNames(`${CLASSNAME$4}__badge`, badge.props.className)
12954
+ className: classNames$1.join(`${CLASSNAME$4}__badge`, badge.props.className)
12925
12955
  })]
12926
12956
  });
12927
12957
  });
@@ -12999,7 +13029,7 @@ const Toolbar = forwardRef((props, ref) => {
12999
13029
  return /*#__PURE__*/jsxs("div", {
13000
13030
  ref: ref,
13001
13031
  ...forwardedProps,
13002
- className: classNames(className, handleBasicClasses({
13032
+ className: classNames$1.join(className, handleBasicClasses({
13003
13033
  hasAfter: Boolean(after),
13004
13034
  hasBefore: Boolean(before),
13005
13035
  hasLabel: Boolean(label),
@@ -13307,11 +13337,11 @@ const Tooltip = forwardRef((props, ref) => {
13307
13337
  ...forwardedProps,
13308
13338
  id: id,
13309
13339
  role: "tooltip",
13310
- className: classNames(className, handleBasicClasses({
13340
+ className: classNames$1.join(className, handleBasicClasses({
13311
13341
  prefix: CLASSNAME$2,
13312
13342
  position,
13313
13343
  isInitializing: !styles.popper?.transform
13314
- }), isHidden && VISUALLY_HIDDEN),
13344
+ }), isHidden && classNames$1.visuallyHidden()),
13315
13345
  style: {
13316
13346
  ...(isHidden ? undefined : styles.popper),
13317
13347
  zIndex
@@ -13433,7 +13463,7 @@ const Uploader = forwardRef((props, ref) => {
13433
13463
  ...wrapper.props,
13434
13464
  ...forwardedProps,
13435
13465
  onClick: handleClick,
13436
- className: classNames(className, handleBasicClasses({
13466
+ className: classNames$1.join(className, handleBasicClasses({
13437
13467
  aspectRatio: adjustedAspectRatio,
13438
13468
  prefix: CLASSNAME$1,
13439
13469
  size,
@@ -13457,7 +13487,7 @@ const Uploader = forwardRef((props, ref) => {
13457
13487
  }), fileInputProps && /*#__PURE__*/jsx("input", {
13458
13488
  type: "file",
13459
13489
  id: inputId,
13460
- className: `${CLASSNAME$1}__input ${VISUALLY_HIDDEN}`,
13490
+ className: `${CLASSNAME$1}__input ${classNames$1.visuallyHidden()}`,
13461
13491
  ...disabledStateProps,
13462
13492
  ...fileInputProps,
13463
13493
  readOnly: isAnyDisabled,
@@ -13536,7 +13566,7 @@ const UserBlock = forwardRef((props, ref) => {
13536
13566
  let NameComponent = 'span';
13537
13567
  const nProps = {
13538
13568
  ...nameProps,
13539
- className: classNames(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className)
13569
+ className: classNames$1.join(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className)
13540
13570
  };
13541
13571
  if (isClickable) {
13542
13572
  NameComponent = Link;
@@ -13567,7 +13597,7 @@ const UserBlock = forwardRef((props, ref) => {
13567
13597
  return /*#__PURE__*/jsxs("div", {
13568
13598
  ref: ref,
13569
13599
  ...forwardedProps,
13570
- className: classNames(className, handleBasicClasses({
13600
+ className: classNames$1.join(className, handleBasicClasses({
13571
13601
  prefix: CLASSNAME,
13572
13602
  orientation,
13573
13603
  size: componentSize,
@@ -13581,7 +13611,7 @@ const UserBlock = forwardRef((props, ref) => {
13581
13611
  linkProps: linkProps,
13582
13612
  alt: "",
13583
13613
  ...avatarProps,
13584
- className: classNames(`${CLASSNAME}__avatar`, avatarProps.className),
13614
+ className: classNames$1.join(`${CLASSNAME}__avatar`, avatarProps.className),
13585
13615
  size: componentSize,
13586
13616
  onClick: onClick,
13587
13617
  theme: theme