@lumx/react 3.21.2-alpha.3 → 4.0.0

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 (9) hide show
  1. package/_internal/{Cd8LPzmx.js → ClSM3-wl.js} +28 -74
  2. package/_internal/ClSM3-wl.js.map +1 -0
  3. package/index.d.ts +3 -0
  4. package/index.js +894 -1043
  5. package/index.js.map +1 -1
  6. package/package.json +3 -3
  7. package/utils/index.d.ts +1 -53
  8. package/utils/index.js +1 -1
  9. package/_internal/Cd8LPzmx.js.map +0 -1
package/index.js CHANGED
@@ -7,9 +7,11 @@ import { mdiAlert } from '@lumx/icons/esm/alert';
7
7
  import { mdiAlertCircle } from '@lumx/icons/esm/alert-circle';
8
8
  import { mdiCheckCircle } from '@lumx/icons/esm/check-circle';
9
9
  import { mdiInformation } from '@lumx/icons/esm/information';
10
+ import isBoolean from 'lodash/isBoolean';
11
+ import isEmpty from 'lodash/isEmpty';
12
+ import kebabCase from 'lodash/kebabCase';
13
+ import { classNames as classNames$1, onEnterPressed, onEscapePressed, onButtonPressed, detectHorizontalSwipe } from '@lumx/core/js/utils';
10
14
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
11
- import { u as useDisabledStateContext, b as useClassnames, P as Portal, C as ClickAwayProvider } from './_internal/Cd8LPzmx.js';
12
- import { classNames, onEnterPressed, onEscapePressed, onButtonPressed, detectHorizontalSwipe } from '@lumx/core/js/utils';
13
15
  import last from 'lodash/last';
14
16
  import pull from 'lodash/pull';
15
17
  import get from 'lodash/get';
@@ -17,6 +19,7 @@ import concat from 'lodash/concat';
17
19
  import dropRight from 'lodash/dropRight';
18
20
  import partition from 'lodash/partition';
19
21
  import reduce from 'lodash/reduce';
22
+ import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider } from './_internal/ClSM3-wl.js';
20
23
  import { mdiCloseCircle } from '@lumx/icons/esm/close-circle';
21
24
  import memoize from 'lodash/memoize';
22
25
  import { mdiClose } from '@lumx/icons/esm/close';
@@ -31,7 +34,6 @@ import { mdiDragVertical } from '@lumx/icons/esm/drag-vertical';
31
34
  import { mdiChevronDown } from '@lumx/icons/esm/chevron-down';
32
35
  import { mdiChevronUp } from '@lumx/icons/esm/chevron-up';
33
36
  import pick from 'lodash/pick';
34
- import isEmpty from 'lodash/isEmpty';
35
37
  import noop from 'lodash/noop';
36
38
  import isInteger from 'lodash/isInteger';
37
39
  import { mdiMagnifyMinusOutline } from '@lumx/icons/esm/magnify-minus-outline';
@@ -51,36 +53,145 @@ import { mdiArrowDown } from '@lumx/icons/esm/arrow-down';
51
53
  import { mdiArrowUp } from '@lumx/icons/esm/arrow-up';
52
54
  import set from 'lodash/set';
53
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
+
54
129
  /**
55
- * Resolve disabled state from props.
56
- * (handles `disabled`, `isDisabled` and `aria-disabled`)
130
+ * Get the basic CSS class for the given type.
57
131
  *
58
- * @params component props
132
+ * @param prefix The class name prefix for the generated CSS class.
133
+ * @param type The type of CSS class we want to generate (e.g.: 'color', 'variant', ...).
134
+ * @param value The value of the type of the CSS class (e.g.: 'primary', 'button', ...).
135
+ * @return The basic CSS class.
59
136
  */
60
- function useDisableStateProps(props) {
61
- const {
62
- disabled,
63
- isDisabled = disabled,
64
- 'aria-disabled': ariaDisabled,
65
- onClick,
66
- onChange,
67
- ...otherProps
68
- } = props;
69
- const disabledStateContext = useDisabledStateContext();
70
- const disabledStateProps = {
71
- disabled: disabledStateContext?.state === 'disabled' || isDisabled,
72
- 'aria-disabled': ariaDisabled === true || ariaDisabled === 'true'
73
- };
74
- const isAnyDisabled = disabledStateProps['aria-disabled'] || disabledStateProps.disabled;
75
- if (!isAnyDisabled) {
76
- otherProps.onClick = onClick;
77
- otherProps.onChange = onChange;
137
+ function getBasicClass({
138
+ prefix,
139
+ type,
140
+ value
141
+ }) {
142
+ if (isBoolean(value)) {
143
+ if (!value) {
144
+ // False value should not return a class.
145
+ return '';
146
+ }
147
+ const booleanPrefixes = ['has', 'is'];
148
+ if (booleanPrefixes.some(booleanPrefix => type.toString().startsWith(booleanPrefix))) {
149
+ return `${prefix}--${kebabCase(type)}`;
150
+ }
151
+ return `${prefix}--is-${kebabCase(type)}`;
78
152
  }
79
- return {
80
- disabledStateProps,
81
- otherProps: otherProps,
82
- isAnyDisabled
83
- };
153
+ return `${prefix}--${kebabCase(type)}-${value}`;
154
+ }
155
+
156
+ /**
157
+ * Enhance isEmpty method to also works with numbers.
158
+ *
159
+ * @param value The value to check.
160
+ * @return Whether the input value is empty or != 0.
161
+ */
162
+ const _isEmpty = value => {
163
+ if (typeof value === 'number') {
164
+ return value === 0;
165
+ }
166
+ return isEmpty(value);
167
+ };
168
+
169
+ /**
170
+ * Return all basic LumX CSS classes which are available for every components.
171
+ *
172
+ * @see {@link /src/components/index.d.ts} for the possible values of each parameter.
173
+ *
174
+ * @param prefix The class name prefix for the generated CSS class.
175
+ * @param props All the other props you want to generate a class.
176
+ * The rule of thumb: the key is the name of the prop in the class, the value a string that will
177
+ * be used in the classname to represent the value of the given prop.
178
+ * @return All LumX basic CSS classes.
179
+ */
180
+ function handleBasicClasses({
181
+ prefix,
182
+ ...props
183
+ }) {
184
+ const otherClasses = {};
185
+ if (!isEmpty(props)) {
186
+ Object.keys(props).forEach(prop => {
187
+ otherClasses[getBasicClass({
188
+ prefix,
189
+ type: prop,
190
+ value: props[prop]
191
+ })] = isBoolean(props[prop]) ? props[prop] : !_isEmpty(props[prop]);
192
+ });
193
+ }
194
+ return classNames(prefix, otherClasses);
84
195
  }
85
196
 
86
197
  let i = 0;
@@ -170,9 +281,6 @@ const AlertDialog = forwardRef((props, ref) => {
170
281
  color,
171
282
  icon
172
283
  } = CONFIG$1[kind] || {};
173
- const {
174
- block
175
- } = useClassnames(CLASSNAME$1i);
176
284
 
177
285
  // Define a unique ID to target title and description for aria attributes.
178
286
  const generatedId = useId();
@@ -203,9 +311,10 @@ const AlertDialog = forwardRef((props, ref) => {
203
311
  'aria-describedby': descriptionId,
204
312
  ...dialogProps
205
313
  },
206
- className: block({
207
- [`kind-${kind}`]: Boolean(kind)
208
- }, className),
314
+ className: classNames$1.join(className, handleBasicClasses({
315
+ kind,
316
+ prefix: CLASSNAME$1i
317
+ })),
209
318
  ...forwardedProps,
210
319
  children: [/*#__PURE__*/jsx("header", {
211
320
  children: /*#__PURE__*/jsx(Toolbar, {
@@ -306,6 +415,38 @@ function useTheme() {
306
415
  return React__default.useContext(ThemeContext);
307
416
  }
308
417
 
418
+ /**
419
+ * Resolve disabled state from props.
420
+ * (handles `disabled`, `isDisabled` and `aria-disabled`)
421
+ *
422
+ * @params component props
423
+ */
424
+ function useDisableStateProps(props) {
425
+ const {
426
+ disabled,
427
+ isDisabled = disabled,
428
+ 'aria-disabled': ariaDisabled,
429
+ onClick,
430
+ onChange,
431
+ ...otherProps
432
+ } = props;
433
+ const disabledStateContext = useDisabledStateContext();
434
+ const disabledStateProps = {
435
+ disabled: disabledStateContext?.state === 'disabled' || isDisabled,
436
+ 'aria-disabled': ariaDisabled === true || ariaDisabled === 'true'
437
+ };
438
+ const isAnyDisabled = disabledStateProps['aria-disabled'] || disabledStateProps.disabled;
439
+ if (!isAnyDisabled) {
440
+ otherProps.onClick = onClick;
441
+ otherProps.onChange = onChange;
442
+ }
443
+ return {
444
+ disabledStateProps,
445
+ otherProps: otherProps,
446
+ isAnyDisabled
447
+ };
448
+ }
449
+
309
450
  /**
310
451
  * Component display name.
311
452
  */
@@ -375,16 +516,13 @@ const Autocomplete = forwardRef((props, ref) => {
375
516
  focusAnchorOnClose,
376
517
  ...forwardedProps
377
518
  } = otherProps;
378
- const {
379
- block
380
- } = useClassnames(CLASSNAME$1h);
381
519
  const inputAnchorRef = useRef(null);
382
520
  const textFieldRef = useRef(null);
383
521
  useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);
384
522
  return /*#__PURE__*/jsxs("div", {
385
523
  ref: ref,
386
524
  ...forwardedProps,
387
- className: block([className]),
525
+ className: classNames$1.join(className, CLASSNAME$1h),
388
526
  children: [/*#__PURE__*/jsx(TextField, {
389
527
  ...textFieldProps,
390
528
  chips: chips,
@@ -512,14 +650,11 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
512
650
  values = DEFAULT_PROPS$13.values,
513
651
  ...forwardedProps
514
652
  } = otherProps;
515
- const {
516
- block
517
- } = useClassnames(CLASSNAME$1g);
518
653
  return /*#__PURE__*/jsx(Autocomplete, {
519
654
  ref: ref,
520
655
  ...forwardedProps,
521
656
  anchorToInput: anchorToInput,
522
- className: block([className]),
657
+ className: classNames$1.join(className, CLASSNAME$1g),
523
658
  name: name,
524
659
  value: value,
525
660
  onChange: onChange,
@@ -597,21 +732,18 @@ const Avatar = forwardRef((props, ref) => {
597
732
  thumbnailProps,
598
733
  ...forwardedProps
599
734
  } = props;
600
- const {
601
- block,
602
- element
603
- } = useClassnames(CLASSNAME$1f);
604
735
  return /*#__PURE__*/jsxs("div", {
605
736
  ref: ref,
606
737
  ...forwardedProps,
607
- className: block({
608
- [`size-${size}`]: Boolean(size),
609
- [`theme-${theme}`]: Boolean(theme)
610
- }, className),
738
+ className: classNames$1.join(className, handleBasicClasses({
739
+ prefix: CLASSNAME$1f,
740
+ size,
741
+ theme
742
+ })),
611
743
  children: [/*#__PURE__*/jsx(Thumbnail, {
612
744
  linkProps: linkProps,
613
745
  linkAs: linkAs,
614
- className: element('thumbnail'),
746
+ className: `${CLASSNAME$1f}__thumbnail`,
615
747
  onClick: onClick,
616
748
  onKeyPress: onKeyPress,
617
749
  ...thumbnailProps,
@@ -621,10 +753,10 @@ const Avatar = forwardRef((props, ref) => {
621
753
  alt: alt,
622
754
  theme: theme
623
755
  }), actions && /*#__PURE__*/jsx("div", {
624
- className: element('actions'),
756
+ className: `${CLASSNAME$1f}__actions`,
625
757
  children: actions
626
758
  }), badge && /*#__PURE__*/jsx("div", {
627
- className: element('badge'),
759
+ className: `${CLASSNAME$1f}__badge`,
628
760
  children: badge
629
761
  })]
630
762
  });
@@ -664,15 +796,13 @@ const Badge = forwardRef((props, ref) => {
664
796
  color = DEFAULT_PROPS$11.color,
665
797
  ...forwardedProps
666
798
  } = props;
667
- const {
668
- block
669
- } = useClassnames(CLASSNAME$1e);
670
799
  return /*#__PURE__*/jsx("div", {
671
800
  ref: ref,
672
801
  ...forwardedProps,
673
- className: block({
674
- [`color-${color}`]: Boolean(color)
675
- }, className),
802
+ className: classNames$1.join(className, handleBasicClasses({
803
+ prefix: CLASSNAME$1e,
804
+ color
805
+ })),
676
806
  children: children
677
807
  });
678
808
  });
@@ -691,16 +821,12 @@ const BadgeWrapper = forwardRef((props, ref) => {
691
821
  className,
692
822
  ...forwardedProps
693
823
  } = props;
694
- const {
695
- block,
696
- element
697
- } = useClassnames(CLASSNAME$1d);
698
824
  return /*#__PURE__*/jsxs("div", {
699
825
  ref: ref,
700
826
  ...forwardedProps,
701
- className: block([className]),
827
+ className: classNames$1.join(className, CLASSNAME$1d),
702
828
  children: [children, badge && /*#__PURE__*/jsx("div", {
703
- className: element('badge'),
829
+ className: `${CLASSNAME$1d}__badge`,
704
830
  children: badge
705
831
  })]
706
832
  });
@@ -782,7 +908,6 @@ const RawClickable = forwardRefPolymorphic((props, ref) => {
782
908
  const COMPONENT_NAME$1f = 'ButtonRoot';
783
909
  const BUTTON_WRAPPER_CLASSNAME = `lumx-button-wrapper`;
784
910
  const BUTTON_CLASSNAME = `lumx-button`;
785
- const wrapperBlock = classNames.bem.block(BUTTON_WRAPPER_CLASSNAME);
786
911
 
787
912
  /**
788
913
  * Render a button wrapper with the ButtonRoot inside.
@@ -798,11 +923,12 @@ const renderButtonWrapper = props => {
798
923
  fullWidth
799
924
  } = props;
800
925
  const adaptedColor = emphasis === Emphasis.low && (color === ColorPalette.light ? ColorPalette.dark : ColorPalette.light);
801
- const wrapperClassName = wrapperBlock({
802
- [`color-${adaptedColor}`]: Boolean(adaptedColor),
803
- [`variant-${variant}`]: Boolean(variant),
804
- 'is-full-width': fullWidth
805
- });
926
+ const wrapperClassName = classNames$1.join(handleBasicClasses({
927
+ color: adaptedColor,
928
+ prefix: BUTTON_WRAPPER_CLASSNAME,
929
+ variant,
930
+ fullWidth
931
+ }));
806
932
  const buttonProps = {
807
933
  ...props,
808
934
  hasBackground: false
@@ -846,9 +972,6 @@ const ButtonRoot = forwardRef((props, ref) => {
846
972
  fullWidth,
847
973
  ...forwardedProps
848
974
  } = otherProps;
849
- const {
850
- block
851
- } = useClassnames(BUTTON_CLASSNAME);
852
975
  const adaptedColor = color || emphasis !== Emphasis.high && theme === Theme.dark && ColorPalette.light || emphasis === Emphasis.high && ColorPalette.primary || ColorPalette.dark;
853
976
  if (hasBackground) {
854
977
  return renderButtonWrapper({
@@ -858,19 +981,20 @@ const ButtonRoot = forwardRef((props, ref) => {
858
981
  color: adaptedColor
859
982
  });
860
983
  }
861
- const buttonClassName = block({
862
- [`color-${adaptedColor}`]: Boolean(adaptedColor),
863
- [`emphasis-${emphasis}`]: Boolean(emphasis),
864
- 'is-selected': Boolean(isSelected),
865
- 'is-disabled': Boolean(props.isDisabled || props['aria-disabled']),
866
- 'is-active': Boolean(isActive),
867
- 'is-focused': Boolean(isFocused),
868
- 'is-hovered': Boolean(isHovered),
869
- [`size-${size}`]: Boolean(size),
870
- [`theme-${theme}`]: Boolean(emphasis === Emphasis.high && theme),
871
- [`variant-${variant}`]: Boolean(variant),
872
- 'is-full-width': Boolean(fullWidth)
873
- }, className);
984
+ const buttonClassName = classNames$1.join(className, handleBasicClasses({
985
+ color: adaptedColor,
986
+ emphasis,
987
+ isSelected,
988
+ isDisabled: props.isDisabled || props['aria-disabled'],
989
+ isActive,
990
+ isFocused,
991
+ isHovered,
992
+ prefix: BUTTON_CLASSNAME,
993
+ size,
994
+ theme: emphasis === Emphasis.high && theme,
995
+ variant,
996
+ fullWidth
997
+ }));
874
998
  return /*#__PURE__*/jsx(RawClickable, {
875
999
  as: linkAs || (forwardedProps.href ? 'a' : 'button'),
876
1000
  ...forwardedProps,
@@ -928,13 +1052,15 @@ const Button = forwardRef((props, ref) => {
928
1052
  theme = defaultTheme,
929
1053
  ...forwardedProps
930
1054
  } = props;
931
- const {
932
- block
933
- } = useClassnames(CLASSNAME$1c);
934
- const buttonClassName = block({
935
- 'has-left-icon': Boolean(leftIcon),
936
- 'has-right-icon': Boolean(rightIcon)
937
- }, className);
1055
+ const buttonClassName = classNames$1.join(className, getBasicClass({
1056
+ prefix: CLASSNAME$1c,
1057
+ type: 'hasLeftIcon',
1058
+ value: !isEmpty(leftIcon)
1059
+ }), getBasicClass({
1060
+ prefix: CLASSNAME$1c,
1061
+ type: 'hasRightIcon',
1062
+ value: !isEmpty(rightIcon)
1063
+ }));
938
1064
  return /*#__PURE__*/jsxs(ButtonRoot, {
939
1065
  ref: ref,
940
1066
  emphasis,
@@ -943,7 +1069,7 @@ const Button = forwardRef((props, ref) => {
943
1069
  ...forwardedProps,
944
1070
  className: buttonClassName,
945
1071
  variant: "button",
946
- children: [leftIcon &&
1072
+ children: [leftIcon && !isEmpty(leftIcon) &&
947
1073
  /*#__PURE__*/
948
1074
  // Theme is handled in the button scss
949
1075
  jsx(ThemeProvider, {
@@ -953,7 +1079,7 @@ const Button = forwardRef((props, ref) => {
953
1079
  })
954
1080
  }), children && (isComponent(Text)(children) ? children : /*#__PURE__*/jsx("span", {
955
1081
  children: children
956
- })), rightIcon &&
1082
+ })), rightIcon && !isEmpty(rightIcon) &&
957
1083
  /*#__PURE__*/
958
1084
  // Theme is handled in the button scss
959
1085
  jsx(ThemeProvider, {
@@ -1062,13 +1188,10 @@ const ButtonGroup = forwardRef((props, ref) => {
1062
1188
  className,
1063
1189
  ...forwardedProps
1064
1190
  } = props;
1065
- const {
1066
- block
1067
- } = useClassnames(CLASSNAME$1a);
1068
1191
  return /*#__PURE__*/jsx("div", {
1069
1192
  ref: ref,
1070
1193
  ...forwardedProps,
1071
- className: block([className]),
1194
+ className: classNames$1.join(className, CLASSNAME$1a),
1072
1195
  children: children
1073
1196
  });
1074
1197
  });
@@ -1076,6 +1199,9 @@ ButtonGroup.displayName = COMPONENT_NAME$1c;
1076
1199
  ButtonGroup.className = CLASSNAME$1a;
1077
1200
  ButtonGroup.defaultProps = DEFAULT_PROPS$_;
1078
1201
 
1202
+ /**
1203
+ * Intermediate state of checkbox.
1204
+ */
1079
1205
  const INTERMEDIATE_STATE = 'intermediate';
1080
1206
 
1081
1207
  /**
@@ -1126,10 +1252,6 @@ const Checkbox = forwardRef((props, ref) => {
1126
1252
  inputProps = {},
1127
1253
  ...forwardedProps
1128
1254
  } = otherProps;
1129
- const {
1130
- block,
1131
- element
1132
- } = useClassnames(CLASSNAME$19);
1133
1255
  const localInputRef = React__default.useRef(null);
1134
1256
  const generatedInputId = useId();
1135
1257
  const inputId = id || generatedInputId;
@@ -1146,20 +1268,21 @@ const Checkbox = forwardRef((props, ref) => {
1146
1268
  return /*#__PURE__*/jsxs("div", {
1147
1269
  ref: ref,
1148
1270
  ...forwardedProps,
1149
- className: block({
1271
+ className: classNames$1.join(className, handleBasicClasses({
1150
1272
  // Whether state is intermediate class name will "-checked"
1151
- 'is-checked': Boolean(intermediateState ? true : isChecked),
1152
- 'is-disabled': Boolean(isAnyDisabled),
1153
- 'is-unchecked': Boolean(!isChecked),
1154
- [`theme-${theme}`]: Boolean(theme)
1155
- }, className),
1273
+ isChecked: intermediateState ? true : isChecked,
1274
+ isDisabled: isAnyDisabled,
1275
+ isUnchecked: !isChecked,
1276
+ prefix: CLASSNAME$19,
1277
+ theme
1278
+ })),
1156
1279
  children: [/*#__PURE__*/jsxs("div", {
1157
- className: element('input-wrapper'),
1280
+ className: `${CLASSNAME$19}__input-wrapper`,
1158
1281
  children: [/*#__PURE__*/jsx("input", {
1159
1282
  ref: useMergeRefs(inputRef, localInputRef),
1160
1283
  type: "checkbox",
1161
1284
  id: inputId,
1162
- className: element('input-native'),
1285
+ className: `${CLASSNAME$19}__input-native`,
1163
1286
  ...disabledStateProps,
1164
1287
  name: name,
1165
1288
  value: value,
@@ -1170,26 +1293,26 @@ const Checkbox = forwardRef((props, ref) => {
1170
1293
  readOnly: inputProps.readOnly || disabledStateProps['aria-disabled'],
1171
1294
  ...inputProps
1172
1295
  }), /*#__PURE__*/jsxs("div", {
1173
- className: element('input-placeholder'),
1296
+ className: `${CLASSNAME$19}__input-placeholder`,
1174
1297
  children: [/*#__PURE__*/jsx("div", {
1175
- className: element('input-background')
1298
+ className: `${CLASSNAME$19}__input-background`
1176
1299
  }), /*#__PURE__*/jsx("div", {
1177
- className: element('input-indicator'),
1300
+ className: `${CLASSNAME$19}__input-indicator`,
1178
1301
  children: /*#__PURE__*/jsx(Icon, {
1179
1302
  icon: intermediateState ? mdiMinus : mdiCheck
1180
1303
  })
1181
1304
  })]
1182
1305
  })]
1183
1306
  }), /*#__PURE__*/jsxs("div", {
1184
- className: element('content'),
1307
+ className: `${CLASSNAME$19}__content`,
1185
1308
  children: [label && /*#__PURE__*/jsx(InputLabel, {
1186
1309
  htmlFor: inputId,
1187
- className: element('label'),
1310
+ className: `${CLASSNAME$19}__label`,
1188
1311
  theme: theme,
1189
1312
  children: label
1190
1313
  }), helper && /*#__PURE__*/jsx(InputHelper, {
1191
1314
  id: `${inputId}-helper`,
1192
- className: element('helper'),
1315
+ className: `${CLASSNAME$19}__helper`,
1193
1316
  theme: theme,
1194
1317
  children: helper
1195
1318
  })]
@@ -1265,10 +1388,6 @@ const Chip = forwardRef((props, ref) => {
1265
1388
  onKeyDown,
1266
1389
  ...forwardedProps
1267
1390
  } = otherProps;
1268
- const {
1269
- block,
1270
- element
1271
- } = useClassnames(CLASSNAME$18);
1272
1391
  const hasAfterClick = isFunction(onAfterClick);
1273
1392
  const hasBeforeClick = isFunction(onBeforeClick);
1274
1393
  const hasOnClick = isFunction(props.onClick);
@@ -1294,17 +1413,18 @@ const Chip = forwardRef((props, ref) => {
1294
1413
  ...forwardedProps,
1295
1414
  href: !disabledStateProps.disabled ? href : undefined,
1296
1415
  ref: ref,
1297
- className: block({
1298
- 'is-clickable': Boolean(isClickable),
1299
- 'is-disabled': Boolean(isAnyDisabled),
1300
- 'is-highlighted': Boolean(isHighlighted),
1301
- 'is-selected': Boolean(isSelected),
1302
- 'is-unselected': Boolean(!isSelected),
1303
- 'has-after': Boolean(after),
1304
- 'has-before': Boolean(before),
1305
- [`color-${chipColor}`]: Boolean(chipColor),
1306
- [`size-${size}`]: Boolean(size)
1307
- }, className),
1416
+ className: classNames$1.join(className, handleBasicClasses({
1417
+ clickable: isClickable,
1418
+ color: chipColor,
1419
+ isDisabled: isAnyDisabled,
1420
+ hasAfter: Boolean(after),
1421
+ hasBefore: Boolean(before),
1422
+ highlighted: Boolean(isHighlighted),
1423
+ prefix: CLASSNAME$18,
1424
+ selected: Boolean(isSelected),
1425
+ size,
1426
+ unselected: Boolean(!isSelected)
1427
+ })),
1308
1428
  "aria-disabled": isClickable && isAnyDisabled || undefined,
1309
1429
  onClick: hasOnClick ? onClick : undefined,
1310
1430
  onKeyDown: handleKeyDown,
@@ -1312,20 +1432,20 @@ const Chip = forwardRef((props, ref) => {
1312
1432
  /*#__PURE__*/
1313
1433
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
1314
1434
  jsx("div", {
1315
- className: element('before', {
1316
- 'is-clickable': Boolean(hasBeforeClick)
1435
+ className: classNames$1.join(`${CLASSNAME$18}__before`, {
1436
+ [`${CLASSNAME$18}__before--is-clickable`]: hasBeforeClick
1317
1437
  }),
1318
1438
  onClick: handleOnBeforeClick,
1319
1439
  children: before
1320
1440
  }), /*#__PURE__*/jsx("div", {
1321
- className: element('label'),
1441
+ className: `${CLASSNAME$18}__label`,
1322
1442
  children: children
1323
1443
  }), after &&
1324
1444
  /*#__PURE__*/
1325
1445
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
1326
1446
  jsx("div", {
1327
- className: element('after', {
1328
- 'is-clickable': Boolean(hasAfterClick)
1447
+ className: classNames$1.join(`${CLASSNAME$18}__after`, {
1448
+ [`${CLASSNAME$18}__after--is-clickable`]: hasAfterClick
1329
1449
  }),
1330
1450
  onClick: handleOnAfterClick,
1331
1451
  children: after
@@ -1417,13 +1537,10 @@ const InternalChipGroup = forwardRef((props, ref) => {
1417
1537
  className,
1418
1538
  ...forwardedProps
1419
1539
  } = props;
1420
- const {
1421
- block
1422
- } = useClassnames(CLASSNAME$17);
1423
1540
  return /*#__PURE__*/jsx("div", {
1424
1541
  ref: ref,
1425
1542
  ...forwardedProps,
1426
- className: block([className]),
1543
+ className: classNames$1.join(className, CLASSNAME$17),
1427
1544
  children: children
1428
1545
  });
1429
1546
  });
@@ -1493,69 +1610,66 @@ const CommentBlock = forwardRef((props, ref) => {
1493
1610
  ...forwardedProps
1494
1611
  } = props;
1495
1612
  const hasChildren = Children.count(children) > 0;
1496
- const {
1497
- block,
1498
- element
1499
- } = useClassnames(CLASSNAME$16);
1500
1613
  return /*#__PURE__*/jsxs("div", {
1501
1614
  ref: ref,
1502
- className: block({
1503
- 'has-children': hasChildren && isOpen,
1504
- 'has-indented-children': hasChildren && variant === CommentBlockVariant.indented,
1505
- 'has-linear-children': hasChildren && variant === CommentBlockVariant.linear,
1506
- 'is-relevant': isRelevant,
1507
- [`theme-${theme}`]: Boolean(theme)
1508
- }, className),
1615
+ className: classNames$1.join(className, handleBasicClasses({
1616
+ hasChildren: hasChildren && isOpen,
1617
+ hasIndentedChildren: hasChildren && variant === CommentBlockVariant.indented,
1618
+ hasLinearChildren: hasChildren && variant === CommentBlockVariant.linear,
1619
+ isRelevant,
1620
+ prefix: CLASSNAME$16,
1621
+ theme
1622
+ })),
1509
1623
  ...forwardedProps,
1510
1624
  children: [/*#__PURE__*/jsxs("div", {
1511
- className: element('wrapper'),
1625
+ className: `${CLASSNAME$16}__wrapper`,
1512
1626
  children: [/*#__PURE__*/jsx("div", {
1513
- className: element('avatar'),
1627
+ className: `${CLASSNAME$16}__avatar`,
1514
1628
  children: /*#__PURE__*/jsx(Avatar, {
1515
1629
  ...avatarProps,
1516
1630
  size: Size.m,
1517
1631
  onClick: onClick
1518
1632
  })
1519
1633
  }), /*#__PURE__*/jsxs("div", {
1520
- className: element('container'),
1634
+ className: `${CLASSNAME$16}__container`,
1521
1635
  children: [/*#__PURE__*/jsxs("div", {
1522
- className: element('content'),
1636
+ className: `${CLASSNAME$16}__content`,
1523
1637
  children: [/*#__PURE__*/jsxs("div", {
1524
- className: element('meta'),
1638
+ className: `${CLASSNAME$16}__meta`,
1525
1639
  children: [name &&
1526
1640
  /*#__PURE__*/
1527
1641
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
1528
1642
  jsx("span", {
1529
- className: element('name'),
1643
+ className: `${CLASSNAME$16}__name`,
1530
1644
  onClick: onClick,
1531
1645
  onMouseEnter: onMouseEnter,
1532
1646
  onMouseLeave: onMouseLeave,
1533
1647
  children: name
1534
1648
  }), headerActions && /*#__PURE__*/jsx("span", {
1535
- className: element('header-actions'),
1649
+ className: `${CLASSNAME$16}__header-actions`,
1536
1650
  children: headerActions
1537
1651
  })]
1538
1652
  }), /*#__PURE__*/jsx("div", {
1539
- className: element('text'),
1653
+ className: `${CLASSNAME$16}__text`,
1540
1654
  children: text
1541
1655
  }), date && (fullDate ? /*#__PURE__*/jsx(Tooltip, {
1542
1656
  label: fullDate,
1543
1657
  placement: "top",
1544
1658
  children: /*#__PURE__*/jsx("span", {
1545
- className: element('date'),
1659
+ className: `${CLASSNAME$16}__date`,
1546
1660
  children: date
1547
1661
  })
1548
1662
  }) : /*#__PURE__*/jsx("span", {
1549
- className: element('date'),
1663
+ className: `${CLASSNAME$16}__date`,
1550
1664
  children: date
1551
1665
  }))]
1552
1666
  }), hasActions && /*#__PURE__*/jsx("div", {
1553
- className: element('actions'),
1667
+ className: `${CLASSNAME$16}__actions`,
1554
1668
  children: actions
1555
1669
  })]
1556
1670
  })]
1557
1671
  }), hasChildren && isOpen && /*#__PURE__*/jsx("div", {
1558
- className: element('children'),
1672
+ className: `${CLASSNAME$16}__children`,
1559
1673
  children: children
1560
1674
  })]
1561
1675
  });
@@ -1840,10 +1954,6 @@ const DatePickerControlled = forwardRef((props, ref) => {
1840
1954
  const localeObj = parseLocale(locale);
1841
1955
  return getMonthCalendar(localeObj, selectedMonth, minDate, maxDate);
1842
1956
  }, [locale, minDate, maxDate, selectedMonth]);
1843
- const {
1844
- block,
1845
- element
1846
- } = useClassnames(CLASSNAME$15);
1847
1957
  const selectedYear = selectedMonth.getFullYear();
1848
1958
  const formattedYear = selectedMonth.toLocaleDateString(locale, {
1849
1959
  year: 'numeric'
@@ -1897,10 +2007,10 @@ const DatePickerControlled = forwardRef((props, ref) => {
1897
2007
  const yearLabel = getYearDisplayName(locale);
1898
2008
  return /*#__PURE__*/jsxs("div", {
1899
2009
  ref: ref,
1900
- className: block(),
2010
+ className: `${CLASSNAME$15}`,
1901
2011
  style: style,
1902
2012
  children: [/*#__PURE__*/jsx(Toolbar, {
1903
- className: element('toolbar'),
2013
+ className: `${CLASSNAME$15}__toolbar`,
1904
2014
  after: /*#__PURE__*/jsx(IconButton, {
1905
2015
  ...nextButtonProps,
1906
2016
  emphasis: Emphasis.low,
@@ -1916,11 +2026,11 @@ const DatePickerControlled = forwardRef((props, ref) => {
1916
2026
  label: /*#__PURE__*/jsxs(Fragment, {
1917
2027
  children: [/*#__PURE__*/jsx("span", {
1918
2028
  "aria-live": labelAriaLive,
1919
- className: onMonthChange ? classNames.visuallyHidden() : undefined,
2029
+ className: onMonthChange ? classNames$1.visuallyHidden() : undefined,
1920
2030
  dir: "auto",
1921
2031
  children: monthYear
1922
2032
  }), onMonthChange && /*#__PURE__*/jsx(FlexBox, {
1923
- className: element(`month`),
2033
+ className: `${CLASSNAME$15}__month`,
1924
2034
  orientation: "horizontal",
1925
2035
  hAlign: "center",
1926
2036
  gap: "regular",
@@ -1935,7 +2045,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
1935
2045
  min: 0,
1936
2046
  onBlur: updateYear,
1937
2047
  onKeyPress: updateYearOnEnterPressed,
1938
- className: element(`year`)
2048
+ className: `${CLASSNAME$15}__year`
1939
2049
  }, "year") : /*#__PURE__*/jsx(Text, {
1940
2050
  as: "p",
1941
2051
  children: part
@@ -1943,17 +2053,17 @@ const DatePickerControlled = forwardRef((props, ref) => {
1943
2053
  })]
1944
2054
  })
1945
2055
  }), /*#__PURE__*/jsxs("div", {
1946
- className: element(`calendar`),
2056
+ className: `${CLASSNAME$15}__calendar`,
1947
2057
  children: [/*#__PURE__*/jsx("div", {
1948
- className: element(`week-days`, [element(`days-wrapper`)]),
2058
+ className: `${CLASSNAME$15}__week-days ${CLASSNAME$15}__days-wrapper`,
1949
2059
  children: weekDays.map(({
1950
2060
  letter,
1951
2061
  number,
1952
2062
  long
1953
2063
  }) => /*#__PURE__*/jsxs("div", {
1954
- className: element(`day-wrapper`),
2064
+ className: `${CLASSNAME$15}__day-wrapper`,
1955
2065
  children: [/*#__PURE__*/jsx("span", {
1956
- className: element(`week-day`),
2066
+ className: `${CLASSNAME$15}__week-day`,
1957
2067
  "aria-hidden": true,
1958
2068
  children: letter.toLocaleUpperCase()
1959
2069
  }), /*#__PURE__*/jsx("span", {
@@ -1962,7 +2072,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
1962
2072
  })]
1963
2073
  }, number))
1964
2074
  }), /*#__PURE__*/jsx("div", {
1965
- className: element(`month-days`, [element(`days-wrapper`)]),
2075
+ className: `${CLASSNAME$15}__month-days ${CLASSNAME$15}__days-wrapper`,
1966
2076
  children: weeks.flatMap((week, weekIndex) => {
1967
2077
  return weekDays.map((weekDay, dayIndex) => {
1968
2078
  const {
@@ -1973,11 +2083,11 @@ const DatePickerControlled = forwardRef((props, ref) => {
1973
2083
  const isToday = !isOutOfRange && date && isSameDay(date, new Date());
1974
2084
  const isSelected = date && value && isSameDay(value, date);
1975
2085
  return /*#__PURE__*/jsx("div", {
1976
- className: element(`day-wrapper`),
2086
+ className: `${CLASSNAME$15}__day-wrapper`,
1977
2087
  children: date && /*#__PURE__*/jsxs(Button, {
1978
2088
  ref: isSelected || !value && isToday ? todayOrSelectedDateRef : null,
1979
- className: element(`month-day`, {
1980
- 'is-today': isToday
2089
+ className: classNames$1.join(`${CLASSNAME$15}__month-day`, {
2090
+ [`${CLASSNAME$15}__month-day--is-today`]: isToday
1981
2091
  }),
1982
2092
  disabled: isOutOfRange,
1983
2093
  isSelected: isSelected,
@@ -1987,7 +2097,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
1987
2097
  "aria-hidden": true,
1988
2098
  children: formatDayNumber(locale, date)
1989
2099
  }), /*#__PURE__*/jsx("span", {
1990
- className: classNames.visuallyHidden(),
2100
+ className: classNames$1.visuallyHidden(),
1991
2101
  children: date.toLocaleDateString(locale, {
1992
2102
  day: 'numeric',
1993
2103
  month: 'long',
@@ -2699,11 +2809,6 @@ const Dialog = forwardRef((props, ref) => {
2699
2809
  preventCloseOnEscape,
2700
2810
  ...forwardedProps
2701
2811
  } = props;
2702
- // eslint-disable-next-line react-hooks/rules-of-hooks
2703
- const {
2704
- block,
2705
- element
2706
- } = useClassnames(CLASSNAME$14);
2707
2812
 
2708
2813
  // eslint-disable-next-line react-hooks/rules-of-hooks
2709
2814
  const previousOpen = React__default.useRef(isOpen);
@@ -2770,23 +2875,24 @@ const Dialog = forwardRef((props, ref) => {
2770
2875
  children: /*#__PURE__*/jsxs("div", {
2771
2876
  ref: mergeRefs(rootRef, ref),
2772
2877
  ...forwardedProps,
2773
- className: block({
2774
- 'is-hidden': Boolean(!isOpen),
2775
- 'is-loading': Boolean(isLoading),
2776
- 'is-shown': Boolean(isOpen || isVisible),
2777
- [`size-${size}`]: Boolean(size)
2778
- }, className),
2878
+ className: classNames$1.join(className, handleBasicClasses({
2879
+ isHidden: !isOpen,
2880
+ isLoading,
2881
+ isShown: isOpen || isVisible,
2882
+ prefix: CLASSNAME$14,
2883
+ size
2884
+ })),
2779
2885
  style: {
2780
2886
  zIndex
2781
2887
  },
2782
2888
  children: [/*#__PURE__*/jsx("div", {
2783
- className: element('overlay')
2889
+ className: `${CLASSNAME$14}__overlay`
2784
2890
  }), /*#__PURE__*/jsx(HeadingLevelProvider, {
2785
2891
  level: 2,
2786
2892
  children: /*#__PURE__*/jsx(ThemeProvider, {
2787
2893
  value: undefined,
2788
2894
  children: /*#__PURE__*/jsx("div", {
2789
- className: element('container'),
2895
+ className: `${CLASSNAME$14}__container`,
2790
2896
  role: "dialog",
2791
2897
  "aria-modal": "true",
2792
2898
  ...dialogProps,
@@ -2795,32 +2901,28 @@ const Dialog = forwardRef((props, ref) => {
2795
2901
  childrenRefs: clickAwayRefs,
2796
2902
  parentRef: rootRef,
2797
2903
  children: /*#__PURE__*/jsxs("section", {
2798
- className: element('wrapper'),
2904
+ className: `${CLASSNAME$14}__wrapper`,
2799
2905
  ref: wrapperRef,
2800
2906
  children: [(header || headerChildContent) && /*#__PURE__*/jsxs("header", {
2801
2907
  ...headerChildProps,
2802
- className: element('header', {
2803
- 'has-divider': Boolean(forceHeaderDivider || hasTopIntersection)
2804
- }, [headerChildProps?.className]),
2908
+ className: classNames$1.join(`${CLASSNAME$14}__header`, (forceHeaderDivider || hasTopIntersection) && `${CLASSNAME$14}__header--has-divider`, headerChildProps?.className),
2805
2909
  children: [header, headerChildContent]
2806
2910
  }), /*#__PURE__*/jsxs("div", {
2807
2911
  ref: mergeRefs(contentRef, localContentRef),
2808
- className: element('content'),
2912
+ className: `${CLASSNAME$14}__content`,
2809
2913
  children: [/*#__PURE__*/jsx("div", {
2810
- className: element('sentinel', 'top'),
2914
+ className: `${CLASSNAME$14}__sentinel ${CLASSNAME$14}__sentinel--top`,
2811
2915
  ref: setSentinelTop
2812
2916
  }), content, /*#__PURE__*/jsx("div", {
2813
- className: element('sentinel', 'bottom'),
2917
+ className: `${CLASSNAME$14}__sentinel ${CLASSNAME$14}__sentinel--bottom`,
2814
2918
  ref: setSentinelBottom
2815
2919
  })]
2816
2920
  }), (footer || footerChildContent) && /*#__PURE__*/jsxs("footer", {
2817
2921
  ...footerChildProps,
2818
- className: element('footer', {
2819
- 'has-divider': Boolean(forceFooterDivider || hasBottomIntersection)
2820
- }, [footerChildProps?.className]),
2922
+ className: classNames$1.join(`${CLASSNAME$14}__footer`, (forceFooterDivider || hasBottomIntersection) && `${CLASSNAME$14}__footer--has-divider`, footerChildProps?.className),
2821
2923
  children: [footer, footerChildContent]
2822
2924
  }), isLoading && /*#__PURE__*/jsx("div", {
2823
- className: element('progress-overlay'),
2925
+ className: `${CLASSNAME$14}__progress-overlay`,
2824
2926
  children: /*#__PURE__*/jsx(Progress, {
2825
2927
  variant: ProgressVariant.circular
2826
2928
  })
@@ -2866,15 +2968,13 @@ const Divider = forwardRef((props, ref) => {
2866
2968
  theme = defaultTheme,
2867
2969
  ...forwardedProps
2868
2970
  } = props;
2869
- const {
2870
- block
2871
- } = useClassnames(CLASSNAME$13);
2872
2971
  return /*#__PURE__*/jsx("hr", {
2873
2972
  ref: ref,
2874
2973
  ...forwardedProps,
2875
- className: block({
2876
- [`theme-${theme}`]: Boolean(theme)
2877
- }, className)
2974
+ className: classNames$1.join(className, handleBasicClasses({
2975
+ prefix: CLASSNAME$13,
2976
+ theme
2977
+ }))
2878
2978
  });
2879
2979
  });
2880
2980
  Divider.displayName = COMPONENT_NAME$13;
@@ -2905,15 +3005,13 @@ const DragHandle = forwardRef((props, ref) => {
2905
3005
  theme = defaultTheme,
2906
3006
  ...forwardedProps
2907
3007
  } = props;
2908
- const {
2909
- block
2910
- } = useClassnames(CLASSNAME$12);
2911
3008
  return /*#__PURE__*/jsx("div", {
2912
3009
  ref: ref,
2913
3010
  ...forwardedProps,
2914
- className: block({
2915
- [`theme-${theme}`]: Boolean(theme)
2916
- }, className),
3011
+ className: classNames$1.join(className, handleBasicClasses({
3012
+ prefix: CLASSNAME$12,
3013
+ theme
3014
+ })),
2917
3015
  children: /*#__PURE__*/jsx(Icon, {
2918
3016
  icon: mdiDragVertical,
2919
3017
  color: theme === Theme.dark ? ColorPalette.light : ColorPalette.dark,
@@ -3123,15 +3221,12 @@ const InternalList = forwardRef((props, ref) => {
3123
3221
  tabIndex = DEFAULT_PROPS$T.tabIndex,
3124
3222
  ...forwardedProps
3125
3223
  } = props;
3126
- const {
3127
- block
3128
- } = useClassnames(CLASSNAME$11);
3129
- const padding = itemPadding ?? (isClickable ? Size.big : undefined);
3130
3224
  return /*#__PURE__*/jsx("ul", {
3131
3225
  ...forwardedProps,
3132
- className: block({
3133
- [`item-padding-${padding}`]: Boolean(padding)
3134
- }, className),
3226
+ className: classNames$1.join(className, handleBasicClasses({
3227
+ prefix: CLASSNAME$11,
3228
+ itemPadding: itemPadding ?? (isClickable ? Size.big : undefined)
3229
+ })),
3135
3230
  tabIndex: tabIndex,
3136
3231
  ref: ref,
3137
3232
  children: children
@@ -5076,10 +5171,6 @@ var fromEntries = function fromEntries(entries) {
5076
5171
 
5077
5172
  var useIsomorphicLayoutEffect = typeof window !== 'undefined' && window.document && window.document.createElement ? React.useLayoutEffect : React.useEffect;
5078
5173
 
5079
- function getDefaultExportFromCjs (x) {
5080
- return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
5081
- }
5082
-
5083
5174
  /* global Map:readonly, Set:readonly, ArrayBuffer:readonly */
5084
5175
 
5085
5176
  var reactFastCompare;
@@ -5594,10 +5685,6 @@ const DEFAULT_PROPS$S = {
5594
5685
 
5595
5686
  // Inner component (must be wrapped before export)
5596
5687
  const _InnerPopover = forwardRef((props, ref) => {
5597
- const {
5598
- block,
5599
- element
5600
- } = useClassnames(CLASSNAME$10);
5601
5688
  const {
5602
5689
  anchorRef,
5603
5690
  as: Component = 'div',
@@ -5663,12 +5750,13 @@ const _InnerPopover = forwardRef((props, ref) => {
5663
5750
  children: /*#__PURE__*/jsxs(Component, {
5664
5751
  ...forwardedProps,
5665
5752
  ref: mergedRefs,
5666
- className: block({
5667
- [`theme-${theme}`]: Boolean(theme),
5668
- [`elevation-${Math.min(elevation || 0, 5)}`]: true,
5669
- [`position-${position}`]: Boolean(position),
5670
- 'is-initializing': !styles.popover?.transform
5671
- }, className),
5753
+ className: classNames$1.join(className, handleBasicClasses({
5754
+ prefix: CLASSNAME$10,
5755
+ theme,
5756
+ elevation: Math.min(elevation || 0, 5),
5757
+ position,
5758
+ isInitializing: !styles.popover?.transform
5759
+ })),
5672
5760
  style: styles.popover,
5673
5761
  ...attributes.popper,
5674
5762
  children: [unmountSentinel, /*#__PURE__*/jsxs(ClickAwayProvider, {
@@ -5676,7 +5764,7 @@ const _InnerPopover = forwardRef((props, ref) => {
5676
5764
  childrenRefs: clickAwayRefs,
5677
5765
  children: [hasArrow && /*#__PURE__*/jsx("div", {
5678
5766
  ref: setArrowElement,
5679
- className: element('arrow'),
5767
+ className: `${CLASSNAME$10}__arrow`,
5680
5768
  style: styles.arrow,
5681
5769
  children: /*#__PURE__*/jsx("svg", {
5682
5770
  viewBox: "0 0 14 14",
@@ -5803,10 +5891,6 @@ const Dropdown = forwardRef((props, ref) => {
5803
5891
  } = props;
5804
5892
  const innerRef = useRef(null);
5805
5893
  const listElement = useRef(null);
5806
- const {
5807
- block,
5808
- element
5809
- } = useClassnames(CLASSNAME$$);
5810
5894
  useInfiniteScroll(innerRef, onInfiniteScroll);
5811
5895
  const popperElement = useMemo(() => {
5812
5896
  return !Array.isArray(children) && isComponent(List)(children) ? /*#__PURE__*/cloneElement(children, {
@@ -5826,7 +5910,7 @@ const Dropdown = forwardRef((props, ref) => {
5826
5910
  ...forwardedProps,
5827
5911
  focusAnchorOnClose: focusAnchorOnClose,
5828
5912
  anchorRef: anchorRef,
5829
- className: block([className]),
5913
+ className: classNames$1.join(className, CLASSNAME$$),
5830
5914
  elevation: 0,
5831
5915
  closeOnClickAway: closeOnClickAway,
5832
5916
  closeOnEscape: closeOnEscape,
@@ -5839,7 +5923,7 @@ const Dropdown = forwardRef((props, ref) => {
5839
5923
  placement: placement,
5840
5924
  zIndex: zIndex,
5841
5925
  children: /*#__PURE__*/jsx("div", {
5842
- className: element('menu'),
5926
+ className: `${CLASSNAME$$}__menu`,
5843
5927
  ref: innerRef,
5844
5928
  children: popperElement
5845
5929
  })
@@ -5893,10 +5977,6 @@ const ExpansionPanel = forwardRef((props, ref) => {
5893
5977
  toggleButtonProps,
5894
5978
  ...forwardedProps
5895
5979
  } = props;
5896
- const {
5897
- block,
5898
- element
5899
- } = useClassnames(CLASSNAME$_);
5900
5980
  const children = Children.toArray(anyChildren);
5901
5981
 
5902
5982
  // Partition children by types.
@@ -5904,9 +5984,8 @@ const ExpansionPanel = forwardRef((props, ref) => {
5904
5984
 
5905
5985
  // Either take the header in children or create one with the label.
5906
5986
  const headerProps = /*#__PURE__*/React__default.isValidElement(header) ? header.props : {};
5907
- const hasHeaderChildren = React__default.Children.count(headerProps.children) > 0;
5908
- const headerContent = hasHeaderChildren ? headerProps.children : /*#__PURE__*/jsx("span", {
5909
- className: element('label'),
5987
+ const headerContent = !isEmpty(headerProps.children) ? headerProps.children : /*#__PURE__*/jsx("span", {
5988
+ className: `${CLASSNAME$_}__label`,
5910
5989
  children: label
5911
5990
  });
5912
5991
  const toggleOpen = event => {
@@ -5922,15 +6001,16 @@ const ExpansionPanel = forwardRef((props, ref) => {
5922
6001
  }
5923
6002
  };
5924
6003
  const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
5925
- const rootClassName = block({
5926
- 'has-background': Boolean(hasBackground),
5927
- 'has-header': Boolean(hasHeaderChildren),
5928
- 'has-header-divider': Boolean(hasHeaderDivider),
5929
- 'is-close': Boolean(!isOpen),
5930
- 'is-draggable': Boolean(dragHandle),
5931
- 'is-open': Boolean(isOpen),
5932
- [`theme-${theme}`]: Boolean(theme)
5933
- }, className);
6004
+ const rootClassName = classNames$1.join(className, handleBasicClasses({
6005
+ hasBackground,
6006
+ hasHeader: Boolean(!isEmpty(headerProps.children)),
6007
+ hasHeaderDivider,
6008
+ isClose: !isOpen,
6009
+ isDraggable: Boolean(dragHandle),
6010
+ isOpen,
6011
+ prefix: CLASSNAME$_,
6012
+ theme
6013
+ }));
5934
6014
  const wrapperRef = useRef(null);
5935
6015
 
5936
6016
  // Children stay visible while the open/close transition is running
@@ -5965,17 +6045,17 @@ const ExpansionPanel = forwardRef((props, ref) => {
5965
6045
  ...forwardedProps,
5966
6046
  className: rootClassName,
5967
6047
  children: [/*#__PURE__*/jsxs("header", {
5968
- className: element('header'),
6048
+ className: `${CLASSNAME$_}__header`,
5969
6049
  onClick: toggleOpen,
5970
6050
  children: [dragHandle && /*#__PURE__*/jsx("div", {
5971
- className: element('header-drag'),
6051
+ className: `${CLASSNAME$_}__header-drag`,
5972
6052
  children: dragHandle
5973
6053
  }), /*#__PURE__*/jsx("div", {
5974
6054
  ...headerProps,
5975
- className: element('header-content'),
6055
+ className: `${CLASSNAME$_}__header-content`,
5976
6056
  children: headerContent
5977
6057
  }), /*#__PURE__*/jsx("div", {
5978
- className: element('header-toggle'),
6058
+ className: `${CLASSNAME$_}__header-toggle`,
5979
6059
  children: /*#__PURE__*/jsx(IconButton, {
5980
6060
  ...toggleButtonProps,
5981
6061
  color: color,
@@ -5985,15 +6065,15 @@ const ExpansionPanel = forwardRef((props, ref) => {
5985
6065
  })
5986
6066
  })]
5987
6067
  }), /*#__PURE__*/jsx("div", {
5988
- className: element('wrapper'),
6068
+ className: `${CLASSNAME$_}__wrapper`,
5989
6069
  ref: wrapperRef,
5990
6070
  children: (isOpen || isChildrenVisible) && /*#__PURE__*/jsxs("div", {
5991
- className: element('container'),
6071
+ className: `${CLASSNAME$_}__container`,
5992
6072
  children: [/*#__PURE__*/jsx("div", {
5993
- className: element('content'),
6073
+ className: `${CLASSNAME$_}__content`,
5994
6074
  children: content
5995
6075
  }), footer && /*#__PURE__*/jsx("div", {
5996
- className: element('footer'),
6076
+ className: `${CLASSNAME$_}__footer`,
5997
6077
  children: footer
5998
6078
  })]
5999
6079
  })
@@ -6028,26 +6108,23 @@ const Flag = forwardRef((props, ref) => {
6028
6108
  } = props;
6029
6109
  const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
6030
6110
  const isTruncated = !!truncate;
6031
- const {
6032
- block,
6033
- element
6034
- } = useClassnames(CLASSNAME$Z);
6035
6111
  return /*#__PURE__*/jsxs("div", {
6036
6112
  ...forwardedProps,
6037
- className: block({
6038
- [`color-${flagColor}`]: Boolean(flagColor),
6039
- 'is-truncated': isTruncated
6040
- }, className),
6113
+ className: classNames$1.join(className, handleBasicClasses({
6114
+ prefix: CLASSNAME$Z,
6115
+ color: flagColor,
6116
+ isTruncated
6117
+ })),
6041
6118
  ref: ref,
6042
6119
  children: [icon && /*#__PURE__*/jsx(Icon, {
6043
6120
  icon: icon,
6044
6121
  size: Size.xxs,
6045
- className: element('icon')
6122
+ className: `${CLASSNAME$Z}__icon`
6046
6123
  }), /*#__PURE__*/jsx(Text, {
6047
6124
  as: "span",
6048
6125
  truncate: isTruncated,
6049
6126
  typography: "overline",
6050
- className: element('label'),
6127
+ className: `${CLASSNAME$Z}__label`,
6051
6128
  children: label
6052
6129
  })]
6053
6130
  });
@@ -6088,27 +6165,16 @@ const FlexBox = forwardRef((props, ref) => {
6088
6165
  wrap,
6089
6166
  ...forwardedProps
6090
6167
  } = props;
6091
- const {
6092
- block
6093
- } = useClassnames(CLASSNAME$Y);
6094
- const computedOrientation = orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null);
6095
- const marginAutoModifiers = marginAuto && castArray(marginAuto).reduce((acc, align) => ({
6096
- ...acc,
6097
- [`margin-auto-${align}`]: true
6098
- }), {});
6099
6168
  return /*#__PURE__*/jsx(Component, {
6100
6169
  ref: ref,
6101
6170
  ...forwardedProps,
6102
- className: block({
6103
- [`orientation-${computedOrientation}`]: Boolean(computedOrientation),
6104
- [`v-align-${vAlign}`]: Boolean(vAlign),
6105
- [`h-align-${hAlign}`]: Boolean(hAlign),
6106
- [`gap-${gap}`]: Boolean(gap),
6107
- wrap: Boolean(wrap),
6108
- 'fill-space': fillSpace,
6109
- 'no-shrink': noShrink,
6110
- ...marginAutoModifiers
6111
- }, className),
6171
+ className: classNames$1.join(className, handleBasicClasses({
6172
+ prefix: CLASSNAME$Y,
6173
+ orientation: orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null),
6174
+ vAlign,
6175
+ hAlign,
6176
+ gap
6177
+ }), wrap && `${CLASSNAME$Y}--wrap`, fillSpace && `${CLASSNAME$Y}--fill-space`, noShrink && `${CLASSNAME$Y}--no-shrink`, marginAuto && castArray(marginAuto).map(align => `${CLASSNAME$Y}--margin-auto-${align}`)),
6112
6178
  children: children
6113
6179
  });
6114
6180
  });
@@ -6163,10 +6229,6 @@ const BaseGenericBlock = forwardRef((props, ref) => {
6163
6229
  contentProps,
6164
6230
  ...forwardedProps
6165
6231
  } = props;
6166
- const {
6167
- block,
6168
- element
6169
- } = useClassnames(CLASSNAME$X);
6170
6232
  const sections = React__default.useMemo(() => {
6171
6233
  // Split children by section type
6172
6234
  const [[figureChild], [contentChild], [actionsChild], ...otherChildren] = partitionMulti(Children.toArray(children), [isFigure, isContent, isActions]);
@@ -6182,7 +6244,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
6182
6244
  }, [children]);
6183
6245
  return /*#__PURE__*/jsxs(FlexBox, {
6184
6246
  ref: ref,
6185
- className: block([className]),
6247
+ className: classNames$1.join(className, CLASSNAME$X),
6186
6248
  gap: gap,
6187
6249
  orientation: orientation,
6188
6250
  ...forwardedProps,
@@ -6192,7 +6254,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
6192
6254
  hAlign: forwardedProps.hAlign,
6193
6255
  ...figureProps,
6194
6256
  ...sections.figureChildProps,
6195
- className: element('figure', [figureProps?.className, sections.figureChildProps?.className]),
6257
+ className: classNames$1.join(figureProps?.className, sections.figureChildProps?.className, `${CLASSNAME$X}__figure`),
6196
6258
  children: [figure, sections.figureChildProps?.children]
6197
6259
  }), (sections.contentChildProps?.children || sections.otherChildren.length > 0) && /*#__PURE__*/jsxs(FlexBox, {
6198
6260
  ref: sections.contentChild?.ref,
@@ -6202,7 +6264,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
6202
6264
  hAlign: forwardedProps.hAlign,
6203
6265
  ...contentProps,
6204
6266
  ...sections.contentChildProps,
6205
- className: element('content', [contentProps?.className, sections.contentChildProps?.className]),
6267
+ className: classNames$1.join(contentProps?.className, sections.contentChildProps?.className, `${CLASSNAME$X}__content`),
6206
6268
  children: [sections.contentChildProps?.children, sections.otherChildren]
6207
6269
  }), (actions || sections.actionsChildProps?.children) && /*#__PURE__*/jsxs(FlexBox, {
6208
6270
  ref: sections.actionsChild?.ref,
@@ -6210,7 +6272,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
6210
6272
  hAlign: forwardedProps.hAlign,
6211
6273
  ...actionsProps,
6212
6274
  ...sections.actionsChildProps,
6213
- className: element('actions', [actionsProps?.className, sections.actionsChildProps?.className]),
6275
+ className: classNames$1.join(actionsProps?.className, sections.actionsChildProps?.className, `${CLASSNAME$X}__actions`),
6214
6276
  children: [actions, sections.actionsChildProps?.children]
6215
6277
  })]
6216
6278
  });
@@ -6256,7 +6318,7 @@ const useOverflowTooltipLabel = content => {
6256
6318
  // Not inside a tooltip
6257
6319
  !parentTooltip && labelElement &&
6258
6320
  // Not inside a visually hidden
6259
- !labelElement?.closest(`.${classNames.visuallyHidden()}`) &&
6321
+ !labelElement?.closest(`.${classNames$1.visuallyHidden()}`) &&
6260
6322
  // Text overflows
6261
6323
  labelElement.offsetWidth < labelElement.scrollWidth) {
6262
6324
  // Set tooltip label
@@ -6321,9 +6383,6 @@ const Text = forwardRef((props, ref) => {
6321
6383
  style,
6322
6384
  ...forwardedProps
6323
6385
  } = props;
6324
- const {
6325
- block
6326
- } = useClassnames(CLASSNAME$W);
6327
6386
 
6328
6387
  // Truncate mode
6329
6388
  const truncateLinesStyle = typeof truncate === 'object' && truncate.lines > 1 && {
@@ -6346,11 +6405,11 @@ const Text = forwardRef((props, ref) => {
6346
6405
  } = useOverflowTooltipLabel(children);
6347
6406
  return /*#__PURE__*/jsx(Component, {
6348
6407
  ref: useMergeRefs(ref, labelRef),
6349
- className: block({
6350
- 'is-truncated': isTruncated && !isTruncatedMultiline,
6351
- 'is-truncated-multiline': isTruncatedMultiline,
6352
- 'no-wrap': noWrap
6353
- }, [typography && classNames.typography(typography), color && classNames.font(color, colorVariant), className]),
6408
+ className: classNames$1.join(className, handleBasicClasses({
6409
+ prefix: CLASSNAME$W,
6410
+ isTruncated: isTruncated && !isTruncatedMultiline,
6411
+ isTruncatedMultiline
6412
+ }), typography && classNames$1.typography(typography), color && classNames$1.font(color, colorVariant), noWrap && `${CLASSNAME$W}--no-wrap`),
6354
6413
  title: tooltipLabel,
6355
6414
  style: {
6356
6415
  ...truncateLinesStyle,
@@ -6427,13 +6486,10 @@ const Heading = forwardRef((props, ref) => {
6427
6486
  const {
6428
6487
  headingElement
6429
6488
  } = useHeadingLevel();
6430
- const {
6431
- block
6432
- } = useClassnames(CLASSNAME$V);
6433
6489
  const computedHeadingElement = as || headingElement;
6434
6490
  return /*#__PURE__*/jsx(Text, {
6435
6491
  ref: ref,
6436
- className: block([className]),
6492
+ className: classNames$1.join(className, CLASSNAME$V),
6437
6493
  as: computedHeadingElement,
6438
6494
  typography: DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement],
6439
6495
  ...forwardedProps,
@@ -6503,20 +6559,19 @@ const Grid = forwardRef((props, ref) => {
6503
6559
  wrap = DEFAULT_PROPS$L.wrap,
6504
6560
  ...forwardedProps
6505
6561
  } = props;
6506
- const {
6507
- block
6508
- } = useClassnames(CLASSNAME$U);
6509
6562
  return /*#__PURE__*/jsx("div", {
6510
6563
  ref: ref,
6511
6564
  ...forwardedProps,
6512
- className: block({
6513
- [`orientation-${orientation}`]: Boolean(orientation),
6514
- [`wrap-${wrap}`]: Boolean(wrap),
6515
- [`gutter-${gutter}`]: Boolean(gutter),
6516
- [`h-align-${hAlign}`]: Boolean(hAlign),
6517
- [`v-align-${vAlign}`]: Boolean(vAlign),
6518
- container: true
6519
- }, className),
6565
+ className: classNames$1.join(className, `${CLASSNAME$U}-container`, {
6566
+ [`${CLASSNAME$U}--h-align-${hAlign}`]: hAlign
6567
+ }, {
6568
+ [`${CLASSNAME$U}--v-align-${vAlign}`]: vAlign
6569
+ }, handleBasicClasses({
6570
+ prefix: CLASSNAME$U,
6571
+ orientation,
6572
+ wrap,
6573
+ gutter
6574
+ })),
6520
6575
  children: children
6521
6576
  });
6522
6577
  });
@@ -6550,17 +6605,15 @@ const GridItem = forwardRef((props, ref) => {
6550
6605
  order,
6551
6606
  ...forwardedProps
6552
6607
  } = props;
6553
- const {
6554
- block
6555
- } = useClassnames(CLASSNAME$T);
6556
6608
  return /*#__PURE__*/jsx("div", {
6557
6609
  ref: ref,
6558
6610
  ...forwardedProps,
6559
- className: block({
6560
- [`width-${width}`]: Boolean(width),
6561
- [`order-${order}`]: Boolean(order),
6562
- [`align-${align}`]: Boolean(align)
6563
- }, className),
6611
+ className: classNames$1.join(className, handleBasicClasses({
6612
+ prefix: CLASSNAME$T,
6613
+ width,
6614
+ order,
6615
+ align
6616
+ })),
6564
6617
  children: children
6565
6618
  });
6566
6619
  });
@@ -6602,13 +6655,10 @@ const GridColumn = forwardRef((props, ref) => {
6602
6655
  style = {},
6603
6656
  ...forwardedProps
6604
6657
  } = props;
6605
- const {
6606
- block
6607
- } = useClassnames(CLASSNAME$S);
6608
6658
  return /*#__PURE__*/jsx(Component, {
6609
6659
  ...forwardedProps,
6610
6660
  ref: ref,
6611
- className: block([className]),
6661
+ className: classNames$1.join(className, CLASSNAME$S),
6612
6662
  style: {
6613
6663
  ...style,
6614
6664
  ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
@@ -6664,9 +6714,6 @@ const Icon = forwardRef((props, ref) => {
6664
6714
  alt,
6665
6715
  ...forwardedProps
6666
6716
  } = props;
6667
- const {
6668
- block
6669
- } = useClassnames(CLASSNAME$R);
6670
6717
  const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
6671
6718
 
6672
6719
  // Color
@@ -6695,16 +6742,14 @@ const Icon = forwardRef((props, ref) => {
6695
6742
  return /*#__PURE__*/jsx("i", {
6696
6743
  ref: ref,
6697
6744
  ...forwardedProps,
6698
- className: block({
6699
- [`color-${iconColor}`]: Boolean(iconColor),
6700
- [`color-variant-${iconColorVariant}`]: Boolean(iconColorVariant),
6701
- [`size-${iconSize}`]: Boolean(iconSize),
6702
- [`theme-${theme}`]: Boolean(theme),
6703
- 'has-shape': Boolean(hasShape),
6704
- 'no-shape': Boolean(!hasShape),
6705
- 'has-dark-layer': Boolean(!hasShape && iconColor === ColorPalette.yellow && icon === mdiAlertCircle),
6706
- path: true
6707
- }, className),
6745
+ className: classNames$1.join(className, handleBasicClasses({
6746
+ color: iconColor,
6747
+ colorVariant: iconColorVariant,
6748
+ hasShape,
6749
+ prefix: CLASSNAME$R,
6750
+ theme,
6751
+ size: iconSize
6752
+ }), !hasShape && `${CLASSNAME$R}--no-shape`, !hasShape && iconColor === ColorPalette.yellow && icon === mdiAlertCircle && `${CLASSNAME$R}--has-dark-layer`, `${CLASSNAME$R}--path`),
6708
6753
  children: /*#__PURE__*/jsx("svg", {
6709
6754
  "aria-hidden": alt ? undefined : 'true',
6710
6755
  role: alt ? 'img' : undefined,
@@ -6731,7 +6776,7 @@ Icon.defaultProps = DEFAULT_PROPS$J;
6731
6776
  const ImageCaption = props => {
6732
6777
  const defaultTheme = useTheme();
6733
6778
  const {
6734
- className,
6779
+ baseClassName,
6735
6780
  theme = defaultTheme,
6736
6781
  as = 'figcaption',
6737
6782
  title,
@@ -6739,9 +6784,7 @@ const ImageCaption = props => {
6739
6784
  description,
6740
6785
  descriptionProps,
6741
6786
  tags,
6742
- tagsProps,
6743
6787
  captionStyle,
6744
- captionProps,
6745
6788
  align,
6746
6789
  truncate
6747
6790
  } = props;
@@ -6762,7 +6805,7 @@ const ImageCaption = props => {
6762
6805
  };
6763
6806
  return /*#__PURE__*/jsxs(FlexBox, {
6764
6807
  as: as,
6765
- className: className,
6808
+ className: classNames$1.join(baseClassName && `${baseClassName}__wrapper`),
6766
6809
  style: captionStyle,
6767
6810
  orientation: "vertical",
6768
6811
  vAlign: align,
@@ -6770,23 +6813,25 @@ const ImageCaption = props => {
6770
6813
  gap: "regular",
6771
6814
  children: [(title || description) && /*#__PURE__*/jsxs(Text, {
6772
6815
  as: "p",
6773
- ...captionProps,
6816
+ className: classNames$1.join(baseClassName && `${baseClassName}__caption`),
6774
6817
  truncate: truncate,
6775
6818
  ...baseColor,
6776
6819
  children: [title && /*#__PURE__*/jsx(Text, {
6777
6820
  ...titleProps,
6778
6821
  as: "span",
6822
+ className: classNames$1.join(titleProps?.className, baseClassName && `${baseClassName}__title`),
6779
6823
  typography: "subtitle1",
6780
6824
  ...titleColor,
6781
6825
  children: title
6782
6826
  }), ' ', description && /*#__PURE__*/jsx(Text, {
6783
6827
  ...descriptionProps,
6784
6828
  as: "span",
6829
+ className: classNames$1.join(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
6785
6830
  typography: "body1",
6786
6831
  ...descriptionContent
6787
6832
  })]
6788
6833
  }), tags && /*#__PURE__*/jsx(FlexBox, {
6789
- ...tagsProps,
6834
+ className: classNames$1.join(baseClassName && `${baseClassName}__tags`),
6790
6835
  orientation: "horizontal",
6791
6836
  vAlign: align,
6792
6837
  children: tags
@@ -6853,23 +6898,19 @@ const ImageBlock = forwardRef((props, ref) => {
6853
6898
  titleProps,
6854
6899
  ...forwardedProps
6855
6900
  } = props;
6856
- const {
6857
- block,
6858
- element
6859
- } = useClassnames(CLASSNAME$Q);
6860
6901
  return /*#__PURE__*/jsxs("figure", {
6861
6902
  ref: ref,
6862
6903
  ...forwardedProps,
6863
- className: block({
6864
- [`caption-position-${captionPosition}`]: Boolean(captionPosition),
6865
- [`align-${align}`]: Boolean(align),
6866
- [`size-${size}`]: Boolean(size),
6867
- [`theme-${theme}`]: Boolean(theme),
6868
- 'fill-height': Boolean(fillHeight)
6869
- }, className),
6904
+ className: classNames$1.join(className, handleBasicClasses({
6905
+ prefix: CLASSNAME$Q,
6906
+ captionPosition,
6907
+ align,
6908
+ size,
6909
+ theme
6910
+ }), fillHeight && `${CLASSNAME$Q}--fill-height`),
6870
6911
  children: [/*#__PURE__*/jsx(Thumbnail, {
6871
6912
  ...thumbnailProps,
6872
- className: element('image', [thumbnailProps?.className]),
6913
+ className: classNames$1.join(`${CLASSNAME$Q}__image`, thumbnailProps?.className),
6873
6914
  fillHeight: fillHeight,
6874
6915
  align: align,
6875
6916
  image: image,
@@ -6878,30 +6919,18 @@ const ImageBlock = forwardRef((props, ref) => {
6878
6919
  alt: alt || title
6879
6920
  }), /*#__PURE__*/jsx(ImageCaption, {
6880
6921
  as: "figcaption",
6881
- className: element('wrapper'),
6922
+ baseClassName: CLASSNAME$Q,
6882
6923
  theme: theme,
6883
6924
  title: title,
6884
- titleProps: {
6885
- ...titleProps,
6886
- className: element('title', [titleProps?.className])
6887
- },
6925
+ titleProps: titleProps,
6888
6926
  description: description,
6889
- descriptionProps: {
6890
- ...descriptionProps,
6891
- className: element('description', [descriptionProps?.className])
6892
- },
6927
+ descriptionProps: descriptionProps,
6893
6928
  tags: tags,
6894
- tagsProps: {
6895
- className: element('tags')
6896
- },
6897
6929
  captionStyle: captionStyle,
6898
- captionProps: {
6899
- className: element('caption')
6900
- },
6901
6930
  align: align,
6902
6931
  truncate: captionPosition === 'over'
6903
6932
  }), actions && /*#__PURE__*/jsx("div", {
6904
- className: element('actions'),
6933
+ className: `${CLASSNAME$Q}__actions`,
6905
6934
  children: actions
6906
6935
  })]
6907
6936
  });
@@ -7176,9 +7205,6 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
7176
7205
  loadingPlaceholderImageRef
7177
7206
  }
7178
7207
  } = props;
7179
- const {
7180
- element
7181
- } = useClassnames(CLASSNAME$P);
7182
7208
 
7183
7209
  // Get scroll area size
7184
7210
  const scrollAreaRef = React__default.useRef(null);
@@ -7231,12 +7257,12 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
7231
7257
  // Make it accessible to keyboard nav when the zone is scrollable
7232
7258
  ,
7233
7259
  tabIndex: isScrollable ? 0 : undefined,
7234
- className: element(`image-slide`),
7260
+ className: `${CLASSNAME$P}__image-slide`,
7235
7261
  children: /*#__PURE__*/jsx(Thumbnail, {
7236
7262
  imgRef: useMergeRefs(imgRef, propImgRef),
7237
7263
  image: image,
7238
7264
  alt: alt,
7239
- className: element(`thumbnail`),
7265
+ className: `${CLASSNAME$P}__thumbnail`,
7240
7266
  imgProps: {
7241
7267
  ...imgProps,
7242
7268
  style: {
@@ -7280,9 +7306,6 @@ const ImageSlideshow = ({
7280
7306
  itemsCount: images.length,
7281
7307
  activeIndex: activeImageIndex
7282
7308
  });
7283
- const {
7284
- element
7285
- } = useClassnames(CLASSNAME$P);
7286
7309
 
7287
7310
  // Image metadata (caption)
7288
7311
  const title = images[activeIndex]?.title;
@@ -7377,12 +7400,12 @@ const ImageSlideshow = ({
7377
7400
  })
7378
7401
  }), (metadata || slideShowControls || zoomControls) && /*#__PURE__*/jsxs(FlexBox, {
7379
7402
  ref: footerRef,
7380
- className: element(`footer`),
7403
+ className: `${CLASSNAME$P}__footer`,
7381
7404
  orientation: "vertical",
7382
7405
  vAlign: "center",
7383
7406
  gap: "big",
7384
7407
  children: [metadata, /*#__PURE__*/jsxs(FlexBox, {
7385
- className: element(`footer-actions`),
7408
+ className: `${CLASSNAME$P}__footer-actions`,
7386
7409
  orientation: "horizontal",
7387
7410
  gap: "regular",
7388
7411
  children: [slideShowControls, zoomControls]
@@ -7594,9 +7617,6 @@ const Inner = forwardRef((props, ref) => {
7594
7617
  activeImageRef: propImageRef,
7595
7618
  ...forwardedProps
7596
7619
  } = props;
7597
- const {
7598
- block
7599
- } = useClassnames(CLASSNAME$P);
7600
7620
  const currentPaginationItemRef = React__default.useRef(null);
7601
7621
  const footerRef = React__default.useRef(null);
7602
7622
  const imageRef = React__default.useRef(null);
@@ -7611,7 +7631,7 @@ const Inner = forwardRef((props, ref) => {
7611
7631
  }, [onClose]);
7612
7632
  return /*#__PURE__*/jsx(Lightbox, {
7613
7633
  ref: ref,
7614
- className: block([className]),
7634
+ className: classNames$1.join(className, CLASSNAME$P),
7615
7635
  parentElement: parentElement,
7616
7636
  isOpen: isOpen,
7617
7637
  onClose: onClose,
@@ -7686,19 +7706,13 @@ const InlineList = forwardRef((props, ref) => {
7686
7706
  wrap,
7687
7707
  ...forwardedProps
7688
7708
  } = props;
7689
- const {
7690
- block,
7691
- element
7692
- } = useClassnames(CLASSNAME$O);
7693
7709
  return (
7694
7710
  /*#__PURE__*/
7695
7711
  // eslint-disable-next-line jsx-a11y/no-redundant-roles
7696
7712
  jsx("ul", {
7697
7713
  ...forwardedProps,
7698
7714
  ref: ref,
7699
- className: block({
7700
- wrap: Boolean(wrap)
7701
- }, [className, color && classNames.font(color, colorVariant), typography && classNames.typography(typography)])
7715
+ className: classNames$1.join(className, CLASSNAME$O, wrap && `${CLASSNAME$O}--wrap`, color && classNames$1.font(color, colorVariant), typography && classNames$1.typography(typography))
7702
7716
  // Lists with removed bullet style can lose their a11y list role on some browsers
7703
7717
  ,
7704
7718
  role: "list",
@@ -7710,9 +7724,9 @@ const InlineList = forwardRef((props, ref) => {
7710
7724
  // eslint-disable-next-line jsx-a11y/no-redundant-roles
7711
7725
  jsxs("li", {
7712
7726
  role: "listitem",
7713
- className: element('item'),
7727
+ className: `${CLASSNAME$O}__item`,
7714
7728
  children: [index !== 0 && /*#__PURE__*/jsx("span", {
7715
- className: element('item-separator'),
7729
+ className: `${CLASSNAME$O}__item-separator`,
7716
7730
  "aria-hidden": "true",
7717
7731
  children: '\u00A0•\u00A0'
7718
7732
  }), child]
@@ -7774,16 +7788,14 @@ const InputHelper = forwardRef((props, ref) => {
7774
7788
  const {
7775
7789
  color
7776
7790
  } = INPUT_HELPER_CONFIGURATION[kind] || {};
7777
- const {
7778
- block
7779
- } = useClassnames(CLASSNAME$N);
7780
7791
  return /*#__PURE__*/jsx("p", {
7781
7792
  ref: ref,
7782
7793
  ...forwardedProps,
7783
- className: block({
7784
- [`color-${color}`]: Boolean(color),
7785
- [`theme-${theme}`]: Boolean(theme)
7786
- }, className),
7794
+ className: classNames$1.join(className, handleBasicClasses({
7795
+ prefix: CLASSNAME$N,
7796
+ color,
7797
+ theme
7798
+ })),
7787
7799
  children: children
7788
7800
  });
7789
7801
  });
@@ -7824,18 +7836,16 @@ const InputLabel = forwardRef((props, ref) => {
7824
7836
  typography,
7825
7837
  ...forwardedProps
7826
7838
  } = props;
7827
- const {
7828
- block
7829
- } = useClassnames(CLASSNAME$M);
7830
7839
  return /*#__PURE__*/jsx("label", {
7831
7840
  ref: ref,
7832
7841
  ...forwardedProps,
7833
7842
  htmlFor: htmlFor,
7834
- className: block({
7835
- 'is-required': isRequired,
7836
- [`theme-${theme}`]: Boolean(theme),
7837
- 'has-custom-typography': Boolean(typography)
7838
- }, [className, typography && classNames.typography(typography)]),
7843
+ className: classNames$1.join(className, handleBasicClasses({
7844
+ prefix: CLASSNAME$M,
7845
+ isRequired,
7846
+ theme,
7847
+ hasCustomTypography: Boolean(typography)
7848
+ }), typography && classNames$1.typography(typography)),
7839
7849
  children: children
7840
7850
  });
7841
7851
  });
@@ -7883,12 +7893,6 @@ const Lightbox = forwardRef((props, ref) => {
7883
7893
  return null;
7884
7894
  }
7885
7895
 
7886
- // eslint-disable-next-line react-hooks/rules-of-hooks
7887
- const {
7888
- block,
7889
- element
7890
- } = useClassnames(CLASSNAME$L);
7891
-
7892
7896
  // eslint-disable-next-line react-hooks/rules-of-hooks
7893
7897
  const childrenRef = useRef(null);
7894
7898
  // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -7941,16 +7945,17 @@ const Lightbox = forwardRef((props, ref) => {
7941
7945
  "aria-modal": "true",
7942
7946
  role: "dialog",
7943
7947
  tabIndex: -1,
7944
- className: block({
7945
- 'is-hidden': !isOpen,
7946
- 'is-shown': isOpen || isVisible,
7947
- [`theme-${theme}`]: Boolean(theme)
7948
- }, className),
7948
+ className: classNames$1.join(className, handleBasicClasses({
7949
+ prefix: CLASSNAME$L,
7950
+ isHidden: !isOpen,
7951
+ isShown: isOpen || isVisible,
7952
+ theme
7953
+ })),
7949
7954
  style: {
7950
7955
  zIndex
7951
7956
  },
7952
7957
  children: [closeButtonProps && /*#__PURE__*/jsx("div", {
7953
- className: element('close'),
7958
+ className: `${CLASSNAME$L}__close`,
7954
7959
  children: /*#__PURE__*/jsx(IconButton, {
7955
7960
  ...closeButtonProps,
7956
7961
  ref: closeButtonRef,
@@ -7970,7 +7975,7 @@ const Lightbox = forwardRef((props, ref) => {
7970
7975
  childrenRefs: clickAwayRefs,
7971
7976
  children: /*#__PURE__*/jsx("div", {
7972
7977
  ref: childrenRef,
7973
- className: element('wrapper'),
7978
+ className: `${CLASSNAME$L}__wrapper`,
7974
7979
  role: "presentation",
7975
7980
  children: children
7976
7981
  })
@@ -8017,30 +8022,27 @@ const Link = forwardRef((props, ref) => {
8017
8022
  ...forwardedProps
8018
8023
  } = otherProps;
8019
8024
  const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
8020
- const {
8021
- block,
8022
- element
8023
- } = useClassnames(CLASSNAME$K);
8024
8025
  return /*#__PURE__*/jsx(RawClickable, {
8025
8026
  ref: ref,
8026
8027
  as: linkAs || (forwardedProps.href ? 'a' : 'button'),
8027
8028
  ...forwardedProps,
8028
8029
  ...disabledStateProps,
8029
- className: block({
8030
- [`color-${color}`]: Boolean(color),
8031
- [`color-variant-${colorVariant}`]: Boolean(colorVariant),
8032
- 'has-typography': Boolean(typography)
8033
- }, [className, typography && classNames.typography(typography)]),
8030
+ className: classNames$1.join(className, handleBasicClasses({
8031
+ prefix: CLASSNAME$K,
8032
+ color,
8033
+ colorVariant,
8034
+ hasTypography: !!typography
8035
+ }), typography && classNames$1.typography(typography)),
8034
8036
  children: wrapChildrenIconWithSpaces(/*#__PURE__*/jsxs(Fragment, {
8035
8037
  children: [leftIcon && /*#__PURE__*/jsx(Icon, {
8036
8038
  icon: leftIcon,
8037
- className: element('left-icon')
8039
+ className: `${CLASSNAME$K}__left-icon`
8038
8040
  }), children && /*#__PURE__*/jsx("span", {
8039
- className: element('content'),
8041
+ className: `${CLASSNAME$K}__content`,
8040
8042
  children: children
8041
8043
  }), rightIcon && /*#__PURE__*/jsx(Icon, {
8042
8044
  icon: rightIcon,
8043
- className: element('right-icon')
8045
+ className: `${CLASSNAME$K}__right-icon`
8044
8046
  })]
8045
8047
  }))
8046
8048
  });
@@ -8090,21 +8092,18 @@ const LinkPreview = forwardRef((props, ref) => {
8090
8092
  } = props;
8091
8093
  // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
8092
8094
  const TitleHeading = titleHeading;
8093
- const {
8094
- block,
8095
- element
8096
- } = useClassnames(CLASSNAME$J);
8097
8095
  return /*#__PURE__*/jsx("article", {
8098
8096
  ref: ref,
8099
8097
  ...forwardedProps,
8100
- className: block({
8101
- [`size-${size === Size.big && thumbnailProps ? Size.big : Size.regular}`]: true,
8102
- [`theme-${theme}`]: Boolean(theme)
8103
- }, className),
8098
+ className: classNames$1.join(className, handleBasicClasses({
8099
+ prefix: CLASSNAME$J,
8100
+ size: size === Size.big && thumbnailProps ? Size.big : Size.regular,
8101
+ theme
8102
+ })),
8104
8103
  children: /*#__PURE__*/jsxs("div", {
8105
- className: element('wrapper'),
8104
+ className: `${CLASSNAME$J}__wrapper`,
8106
8105
  children: [thumbnailProps && /*#__PURE__*/jsx("div", {
8107
- className: element('thumbnail'),
8106
+ className: `${CLASSNAME$J}__thumbnail`,
8108
8107
  children: /*#__PURE__*/jsx(Thumbnail, {
8109
8108
  ...thumbnailProps,
8110
8109
  linkAs: linkAs,
@@ -8119,9 +8118,9 @@ const LinkPreview = forwardRef((props, ref) => {
8119
8118
  fillHeight: true
8120
8119
  })
8121
8120
  }), /*#__PURE__*/jsxs("div", {
8122
- className: element('container'),
8121
+ className: `${CLASSNAME$J}__container`,
8123
8122
  children: [title && /*#__PURE__*/jsx(TitleHeading, {
8124
- className: element('title'),
8123
+ className: `${CLASSNAME$J}__title`,
8125
8124
  children: /*#__PURE__*/jsx(Link, {
8126
8125
  ...linkProps,
8127
8126
  linkAs: linkAs,
@@ -8132,14 +8131,14 @@ const LinkPreview = forwardRef((props, ref) => {
8132
8131
  children: title
8133
8132
  })
8134
8133
  }), description && /*#__PURE__*/jsx("p", {
8135
- className: element('description'),
8134
+ className: `${CLASSNAME$J}__description`,
8136
8135
  children: description
8137
8136
  }), /*#__PURE__*/jsx("div", {
8138
- className: element('link'),
8137
+ className: `${CLASSNAME$J}__link`,
8139
8138
  children: /*#__PURE__*/jsx(Link, {
8140
8139
  ...linkProps,
8141
8140
  linkAs: linkAs,
8142
- className: element('link', linkProps?.className),
8141
+ className: classNames$1.join(`${CLASSNAME$J}__link`, linkProps?.className),
8143
8142
  target: "_blank",
8144
8143
  href: link,
8145
8144
  color: theme === Theme.light ? ColorPalette.primary : ColorPalette.light,
@@ -8197,7 +8196,7 @@ function isClickable({
8197
8196
  linkProps,
8198
8197
  onItemSelected
8199
8198
  }) {
8200
- return Boolean(linkProps?.href) || Boolean(onItemSelected);
8199
+ return !isEmpty(linkProps?.href) || !!onItemSelected;
8201
8200
  }
8202
8201
 
8203
8202
  /**
@@ -8227,10 +8226,6 @@ const ListItem = forwardRef((props, ref) => {
8227
8226
  size = DEFAULT_PROPS$D.size,
8228
8227
  ...forwardedProps
8229
8228
  } = otherProps;
8230
- const {
8231
- block,
8232
- element
8233
- } = useClassnames(CLASSNAME$I);
8234
8229
  const role = linkAs || linkProps.href ? 'link' : 'button';
8235
8230
  const onKeyDown = useMemo(() => {
8236
8231
  if (onItemSelected && role === 'link') return onEnterPressed(onItemSelected);
@@ -8239,22 +8234,23 @@ const ListItem = forwardRef((props, ref) => {
8239
8234
  }, [role, onItemSelected]);
8240
8235
  const content = /*#__PURE__*/jsxs(Fragment, {
8241
8236
  children: [before && /*#__PURE__*/jsx("div", {
8242
- className: element('before'),
8237
+ className: `${CLASSNAME$I}__before`,
8243
8238
  children: before
8244
8239
  }), /*#__PURE__*/jsx("div", {
8245
- className: element('content'),
8240
+ className: `${CLASSNAME$I}__content`,
8246
8241
  children: children
8247
8242
  }), after && /*#__PURE__*/jsx("div", {
8248
- className: element('after'),
8243
+ className: `${CLASSNAME$I}__after`,
8249
8244
  children: after
8250
8245
  })]
8251
8246
  });
8252
8247
  return /*#__PURE__*/jsx("li", {
8253
8248
  ref: ref,
8254
8249
  ...forwardedProps,
8255
- className: block({
8256
- [`size-${size}`]: Boolean(size)
8257
- }, className),
8250
+ className: classNames$1.join(className, handleBasicClasses({
8251
+ prefix: CLASSNAME$I,
8252
+ size
8253
+ })),
8258
8254
  children: isClickable({
8259
8255
  linkProps,
8260
8256
  onItemSelected
@@ -8266,11 +8262,12 @@ const ListItem = forwardRef((props, ref) => {
8266
8262
  'aria-disabled': isAnyDisabled,
8267
8263
  ...linkProps,
8268
8264
  href: isAnyDisabled ? undefined : linkProps.href,
8269
- className: element('link', {
8270
- 'is-highlighted': Boolean(isHighlighted),
8271
- 'is-selected': Boolean(isSelected),
8272
- 'is-disabled': Boolean(isAnyDisabled)
8273
- }),
8265
+ className: classNames$1.join(handleBasicClasses({
8266
+ prefix: `${CLASSNAME$I}__link`,
8267
+ isHighlighted,
8268
+ isSelected,
8269
+ isDisabled: isAnyDisabled
8270
+ })),
8274
8271
  onClick: isAnyDisabled ? undefined : onItemSelected,
8275
8272
  onKeyDown: isAnyDisabled ? undefined : onKeyDown,
8276
8273
  ref: linkRef
@@ -8278,7 +8275,7 @@ const ListItem = forwardRef((props, ref) => {
8278
8275
  /*#__PURE__*/
8279
8276
  /* Non clickable list item */
8280
8277
  jsx("div", {
8281
- className: element('wrapper'),
8278
+ className: `${CLASSNAME$I}__wrapper`,
8282
8279
  children: content
8283
8280
  })
8284
8281
  });
@@ -8309,13 +8306,10 @@ const ListDivider = forwardRef((props, ref) => {
8309
8306
  className,
8310
8307
  ...forwardedProps
8311
8308
  } = props;
8312
- const {
8313
- block
8314
- } = useClassnames(CLASSNAME$H);
8315
8309
  return /*#__PURE__*/jsx("li", {
8316
8310
  ref: ref,
8317
8311
  ...forwardedProps,
8318
- className: block([className])
8312
+ className: classNames$1.join(className, CLASSNAME$H)
8319
8313
  });
8320
8314
  });
8321
8315
  ListDivider.displayName = COMPONENT_NAME$H;
@@ -8344,13 +8338,10 @@ const ListSubheader = forwardRef((props, ref) => {
8344
8338
  className,
8345
8339
  ...forwardedProps
8346
8340
  } = props;
8347
- const {
8348
- block
8349
- } = useClassnames(CLASSNAME$G);
8350
8341
  return /*#__PURE__*/jsx("li", {
8351
8342
  ref: ref,
8352
8343
  ...forwardedProps,
8353
- className: block([className]),
8344
+ className: classNames$1.join(className, CLASSNAME$G),
8354
8345
  children: children
8355
8346
  });
8356
8347
  });
@@ -8397,10 +8388,6 @@ const CONFIG = {
8397
8388
  * @return React element.
8398
8389
  */
8399
8390
  const Message = forwardRef((props, ref) => {
8400
- const {
8401
- block,
8402
- element
8403
- } = useClassnames(CLASSNAME$F);
8404
8391
  const {
8405
8392
  children,
8406
8393
  className,
@@ -8421,21 +8408,22 @@ const Message = forwardRef((props, ref) => {
8421
8408
  const isCloseButtonDisplayed = hasBackground && kind === 'info' && onClick && closeButtonLabel;
8422
8409
  return /*#__PURE__*/jsxs("div", {
8423
8410
  ref: ref,
8424
- className: block({
8425
- [`color-${color}`]: Boolean(color),
8426
- 'has-background': hasBackground
8427
- }, className),
8411
+ className: classNames$1.join(className, handleBasicClasses({
8412
+ color,
8413
+ hasBackground,
8414
+ prefix: CLASSNAME$F
8415
+ })),
8428
8416
  ...forwardedProps,
8429
8417
  children: [(customIcon || icon) && /*#__PURE__*/jsx(Icon, {
8430
- className: element('icon'),
8418
+ className: `${CLASSNAME$F}__icon`,
8431
8419
  icon: customIcon || icon,
8432
8420
  size: Size.xs,
8433
8421
  color: color
8434
8422
  }), /*#__PURE__*/jsx("div", {
8435
- className: element('text'),
8423
+ className: `${CLASSNAME$F}__text`,
8436
8424
  children: children
8437
8425
  }), isCloseButtonDisplayed && /*#__PURE__*/jsx(IconButton, {
8438
- className: element('close-button'),
8426
+ className: `${CLASSNAME$F}__close-button`,
8439
8427
  icon: mdiClose,
8440
8428
  onClick: onClick,
8441
8429
  label: closeButtonLabel,
@@ -8477,10 +8465,6 @@ const Mosaic = forwardRef((props, ref) => {
8477
8465
  onImageClick,
8478
8466
  ...forwardedProps
8479
8467
  } = props;
8480
- const {
8481
- block,
8482
- element
8483
- } = useClassnames(CLASSNAME$E);
8484
8468
  const handleImageClick = useMemo(() => {
8485
8469
  if (!onImageClick) return undefined;
8486
8470
  return (index, onClick) => event => {
@@ -8491,15 +8475,17 @@ const Mosaic = forwardRef((props, ref) => {
8491
8475
  return /*#__PURE__*/jsx("div", {
8492
8476
  ref: ref,
8493
8477
  ...forwardedProps,
8494
- className: block({
8495
- [`theme-${theme}`]: Boolean(theme),
8496
- 'has-1-thumbnail': thumbnails?.length === 1,
8497
- 'has-2-thumbnails': thumbnails?.length === 2,
8498
- 'has-3-thumbnails': thumbnails?.length === 3,
8499
- 'has-4-thumbnails': thumbnails?.length >= 4
8500
- }, className),
8478
+ className: classNames$1.join(className, handleBasicClasses({
8479
+ prefix: CLASSNAME$E,
8480
+ theme
8481
+ }), {
8482
+ [`${CLASSNAME$E}--has-1-thumbnail`]: thumbnails?.length === 1,
8483
+ [`${CLASSNAME$E}--has-2-thumbnails`]: thumbnails?.length === 2,
8484
+ [`${CLASSNAME$E}--has-3-thumbnails`]: thumbnails?.length === 3,
8485
+ [`${CLASSNAME$E}--has-4-thumbnails`]: thumbnails?.length >= 4
8486
+ }),
8501
8487
  children: /*#__PURE__*/jsx("div", {
8502
- className: element('wrapper'),
8488
+ className: `${CLASSNAME$E}__wrapper`,
8503
8489
  children: take(thumbnails, 4).map((thumbnail, index) => {
8504
8490
  const {
8505
8491
  image,
@@ -8508,7 +8494,7 @@ const Mosaic = forwardRef((props, ref) => {
8508
8494
  ...thumbnailProps
8509
8495
  } = thumbnail;
8510
8496
  return /*#__PURE__*/jsxs("div", {
8511
- className: element('thumbnail'),
8497
+ className: `${CLASSNAME$E}__thumbnail`,
8512
8498
  children: [/*#__PURE__*/jsx(Thumbnail, {
8513
8499
  ...thumbnailProps,
8514
8500
  align: align || Alignment.left,
@@ -8518,7 +8504,7 @@ const Mosaic = forwardRef((props, ref) => {
8518
8504
  fillHeight: true,
8519
8505
  onClick: handleImageClick?.(index, onClick) || onClick
8520
8506
  }), thumbnails.length > 4 && index === 3 && /*#__PURE__*/jsx("div", {
8521
- className: element('overlay'),
8507
+ className: `${CLASSNAME$E}__overlay`,
8522
8508
  children: /*#__PURE__*/jsxs("span", {
8523
8509
  children: ["+", thumbnails.length - 4]
8524
8510
  })
@@ -8571,39 +8557,35 @@ const NavigationSection = forwardRef((props, ref) => {
8571
8557
  } = useContext(NavigationContext) || {};
8572
8558
  const theme = useTheme();
8573
8559
  const isDropdown = orientation === Orientation.horizontal;
8574
- const item = useClassnames(ITEM_CLASSNAME);
8575
- const {
8576
- block,
8577
- element
8578
- } = useClassnames(CLASSNAME$D);
8579
8560
  return /*#__PURE__*/jsxs("li", {
8580
- className: block([className, item.block({
8581
- [`theme-${theme}`]: Boolean(theme)
8582
- })]),
8561
+ className: classNames$1.join(className, CLASSNAME$D, ITEM_CLASSNAME, handleBasicClasses({
8562
+ prefix: ITEM_CLASSNAME,
8563
+ theme
8564
+ })),
8583
8565
  ref: ref,
8584
8566
  children: [/*#__PURE__*/jsxs(RawClickable, {
8585
8567
  as: "button",
8586
8568
  ...forwardedProps,
8587
8569
  "aria-controls": sectionId,
8588
8570
  "aria-expanded": isOpen,
8589
- className: item.element('link'),
8571
+ className: classNames$1.join(`${ITEM_CLASSNAME}__link`),
8590
8572
  ref: buttonRef,
8591
8573
  onClick: event => {
8592
8574
  setIsOpen(!isOpen);
8593
8575
  event.stopPropagation();
8594
8576
  },
8595
8577
  children: [icon ? /*#__PURE__*/jsx(Icon, {
8596
- className: item.element('icon'),
8578
+ className: `${ITEM_CLASSNAME}__icon`,
8597
8579
  icon: icon,
8598
8580
  size: Size.xs
8599
8581
  }) : null, /*#__PURE__*/jsx(Text, {
8600
8582
  as: "span",
8601
8583
  truncate: true,
8602
- className: item.element('label'),
8584
+ className: `${ITEM_CLASSNAME}__label`,
8603
8585
  ref: ref,
8604
8586
  children: label
8605
8587
  }), /*#__PURE__*/jsx(Icon, {
8606
- className: element('chevron', [item.element('icon')]),
8588
+ className: classNames$1.join(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME$D}__chevron`),
8607
8589
  icon: isOpen ? mdiChevronUp : mdiChevronDown
8608
8590
  })]
8609
8591
  }), isOpen && (isDropdown ? /*#__PURE__*/jsx(Popover, {
@@ -8619,9 +8601,7 @@ const NavigationSection = forwardRef((props, ref) => {
8619
8601
  children: /*#__PURE__*/jsx(ThemeProvider, {
8620
8602
  value: Theme.light,
8621
8603
  children: /*#__PURE__*/jsx("ul", {
8622
- className: element('drawer', {
8623
- popover: true
8624
- }),
8604
+ className: `${CLASSNAME$D}__drawer--popover`,
8625
8605
  id: sectionId,
8626
8606
  children: /*#__PURE__*/jsx(NavigationContext.Provider, {
8627
8607
  value: {
@@ -8632,7 +8612,7 @@ const NavigationSection = forwardRef((props, ref) => {
8632
8612
  })
8633
8613
  })
8634
8614
  }) : /*#__PURE__*/jsx("ul", {
8635
- className: element('drawer'),
8615
+ className: `${CLASSNAME$D}__drawer`,
8636
8616
  id: sectionId,
8637
8617
  children: children
8638
8618
  }))]
@@ -8655,34 +8635,32 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
8655
8635
  tooltipLabel,
8656
8636
  labelRef
8657
8637
  } = useOverflowTooltipLabel(label);
8658
- const {
8659
- block,
8660
- element
8661
- } = useClassnames(ITEM_CLASSNAME);
8662
8638
  return /*#__PURE__*/jsx("li", {
8663
- className: block({
8664
- [`theme-${theme}`]: Boolean(theme)
8665
- }, className),
8639
+ className: classNames$1.join(className, handleBasicClasses({
8640
+ prefix: ITEM_CLASSNAME,
8641
+ theme
8642
+ })),
8666
8643
  children: /*#__PURE__*/jsx(Tooltip, {
8667
8644
  label: tooltipLabel,
8668
8645
  placement: Placement.TOP,
8669
8646
  children: /*#__PURE__*/jsxs(RawClickable, {
8670
8647
  as: Element,
8671
- className: element('link', {
8672
- 'is-selected': isCurrentPage
8648
+ className: handleBasicClasses({
8649
+ prefix: `${ITEM_CLASSNAME}__link`,
8650
+ isSelected: isCurrentPage
8673
8651
  }),
8674
8652
  ref: ref,
8675
8653
  "aria-current": isCurrentPage ? 'page' : undefined,
8676
8654
  ...forwardedProps,
8677
8655
  children: [icon ? /*#__PURE__*/jsx(Icon, {
8678
- className: element('icon'),
8656
+ className: `${ITEM_CLASSNAME}__icon`,
8679
8657
  icon: icon,
8680
8658
  size: Size.xs,
8681
8659
  theme: theme
8682
8660
  }) : null, /*#__PURE__*/jsx(Text, {
8683
8661
  as: "span",
8684
8662
  truncate: true,
8685
- className: element('label'),
8663
+ className: `${ITEM_CLASSNAME}__label`,
8686
8664
  ref: labelRef,
8687
8665
  children: label
8688
8666
  })]
@@ -8719,17 +8697,14 @@ const Navigation = forwardRef((props, ref) => {
8719
8697
  orientation = DEFAULT_PROPS$B.orientation,
8720
8698
  ...forwardedProps
8721
8699
  } = props;
8722
- const {
8723
- block,
8724
- element
8725
- } = useClassnames(CLASSNAME$C);
8726
8700
  return /*#__PURE__*/jsx(ThemeProvider, {
8727
8701
  value: theme,
8728
8702
  children: /*#__PURE__*/jsx("nav", {
8729
- className: block({
8730
- [`theme-${theme}`]: Boolean(theme),
8731
- [`orientation-${orientation}`]: Boolean(orientation)
8732
- }, className),
8703
+ className: classNames$1.join(className, handleBasicClasses({
8704
+ prefix: CLASSNAME$C,
8705
+ theme,
8706
+ orientation
8707
+ })),
8733
8708
  ref: ref,
8734
8709
  ...forwardedProps,
8735
8710
  children: /*#__PURE__*/jsx(NavigationContext.Provider, {
@@ -8737,7 +8712,7 @@ const Navigation = forwardRef((props, ref) => {
8737
8712
  orientation
8738
8713
  },
8739
8714
  children: /*#__PURE__*/jsx("ul", {
8740
- className: element('list'),
8715
+ className: `${CLASSNAME$C}__list`,
8741
8716
  children: children
8742
8717
  })
8743
8718
  })
@@ -8827,10 +8802,6 @@ const Notification = forwardRef((props, ref) => {
8827
8802
  const rootRef = useRef(null);
8828
8803
  const isVisible = useTransitionVisibility(rootRef, !!isOpen, NOTIFICATION_TRANSITION_DURATION);
8829
8804
  const hasAction = Boolean(onActionClick) && Boolean(actionLabel);
8830
- const {
8831
- block,
8832
- element
8833
- } = useClassnames(CLASSNAME$B);
8834
8805
  const handleCallback = evt => {
8835
8806
  if (isFunction(onActionClick)) {
8836
8807
  onActionClick();
@@ -8846,27 +8817,28 @@ const Notification = forwardRef((props, ref) => {
8846
8817
  ref: mergeRefs(ref, rootRef),
8847
8818
  role: "alert",
8848
8819
  ...forwardedProps,
8849
- className: block({
8850
- [`color-${color}`]: Boolean(color),
8851
- 'has-action': hasAction,
8852
- 'is-hidden': !isOpen
8853
- }, className),
8820
+ className: classNames$1.join(className, handleBasicClasses({
8821
+ color,
8822
+ hasAction,
8823
+ isHidden: !isOpen,
8824
+ prefix: CLASSNAME$B
8825
+ })),
8854
8826
  onClick: onClick,
8855
8827
  style: {
8856
8828
  ...style,
8857
8829
  zIndex
8858
8830
  },
8859
8831
  children: [/*#__PURE__*/jsx("div", {
8860
- className: element('icon'),
8832
+ className: `${CLASSNAME$B}__icon`,
8861
8833
  children: /*#__PURE__*/jsx(Icon, {
8862
8834
  icon: icon,
8863
8835
  size: Size.s
8864
8836
  })
8865
8837
  }), /*#__PURE__*/jsx("div", {
8866
- className: element('content'),
8838
+ className: `${CLASSNAME$B}__content`,
8867
8839
  children: content
8868
8840
  }), hasAction && /*#__PURE__*/jsx("div", {
8869
- className: element('action'),
8841
+ className: `${CLASSNAME$B}__action`,
8870
8842
  children: /*#__PURE__*/jsx(Button, {
8871
8843
  emphasis: Emphasis.medium,
8872
8844
  theme: theme,
@@ -8915,13 +8887,10 @@ const PopoverDialog = forwardRef((props, ref) => {
8915
8887
  className,
8916
8888
  ...forwardedProps
8917
8889
  } = props;
8918
- const {
8919
- block
8920
- } = useClassnames(CLASSNAME$A);
8921
8890
  return /*#__PURE__*/jsx(Popover, {
8922
8891
  ...forwardedProps,
8923
8892
  ref: ref,
8924
- className: block([className]),
8893
+ className: classNames$1.join(className, CLASSNAME$A),
8925
8894
  role: "dialog",
8926
8895
  "aria-modal": "true"
8927
8896
  /**
@@ -8985,56 +8954,53 @@ const PostBlock = forwardRef((props, ref) => {
8985
8954
  title,
8986
8955
  ...forwardedProps
8987
8956
  } = props;
8988
- const {
8989
- block,
8990
- element
8991
- } = useClassnames(CLASSNAME$z);
8992
8957
  return /*#__PURE__*/jsxs("div", {
8993
8958
  ref: ref,
8994
- className: block({
8995
- [`orientation-${orientation}`]: Boolean(orientation),
8996
- [`theme-${theme}`]: Boolean(theme)
8997
- }, className),
8959
+ className: classNames$1.join(className, handleBasicClasses({
8960
+ prefix: CLASSNAME$z,
8961
+ orientation,
8962
+ theme
8963
+ })),
8998
8964
  ...forwardedProps,
8999
8965
  children: [thumbnailProps && /*#__PURE__*/jsx("div", {
9000
- className: element('thumbnail'),
8966
+ className: `${CLASSNAME$z}__thumbnail`,
9001
8967
  children: /*#__PURE__*/jsx(Thumbnail, {
9002
8968
  ...thumbnailProps,
9003
8969
  theme: theme,
9004
8970
  variant: ThumbnailVariant.rounded
9005
8971
  })
9006
8972
  }), /*#__PURE__*/jsxs("div", {
9007
- className: element('wrapper'),
8973
+ className: `${CLASSNAME$z}__wrapper`,
9008
8974
  children: [author && /*#__PURE__*/jsx("div", {
9009
- className: element('author'),
8975
+ className: `${CLASSNAME$z}__author`,
9010
8976
  children: author
9011
8977
  }), title && /*#__PURE__*/jsx("button", {
9012
8978
  type: "button",
9013
- className: element('title'),
8979
+ className: `${CLASSNAME$z}__title`,
9014
8980
  onClick: onClick,
9015
8981
  children: title
9016
8982
  }), meta && /*#__PURE__*/jsx("span", {
9017
- className: element('meta'),
8983
+ className: `${CLASSNAME$z}__meta`,
9018
8984
  children: meta
9019
8985
  }), isObject(text) && text.__html ?
9020
8986
  /*#__PURE__*/
9021
8987
  // eslint-disable-next-line react/no-danger
9022
8988
  jsx("p", {
9023
8989
  dangerouslySetInnerHTML: text,
9024
- className: element('text')
8990
+ className: `${CLASSNAME$z}__text`
9025
8991
  }) : /*#__PURE__*/jsx("p", {
9026
- className: element('text'),
8992
+ className: `${CLASSNAME$z}__text`,
9027
8993
  children: text
9028
8994
  }), attachments && /*#__PURE__*/jsx("div", {
9029
- className: element('attachments'),
8995
+ className: `${CLASSNAME$z}__attachments`,
9030
8996
  children: attachments
9031
8997
  }), (tags || actions) && /*#__PURE__*/jsxs("div", {
9032
- className: element('toolbar'),
8998
+ className: `${CLASSNAME$z}__toolbar`,
9033
8999
  children: [tags && /*#__PURE__*/jsx("div", {
9034
- className: element('tags'),
9000
+ className: `${CLASSNAME$z}__tags`,
9035
9001
  children: tags
9036
9002
  }), actions && /*#__PURE__*/jsx("div", {
9037
- className: element('actions'),
9003
+ className: `${CLASSNAME$z}__actions`,
9038
9004
  children: actions
9039
9005
  })]
9040
9006
  })]
@@ -9074,20 +9040,17 @@ const ProgressLinear = forwardRef((props, ref) => {
9074
9040
  theme = defaultTheme,
9075
9041
  ...forwardedProps
9076
9042
  } = props;
9077
- const {
9078
- block,
9079
- element
9080
- } = useClassnames(CLASSNAME$y);
9081
9043
  return /*#__PURE__*/jsxs("div", {
9082
9044
  ref: ref,
9083
9045
  ...forwardedProps,
9084
- className: block({
9085
- [`theme-${theme}`]: Boolean(theme)
9086
- }, className),
9046
+ className: classNames$1.join(className, handleBasicClasses({
9047
+ prefix: CLASSNAME$y,
9048
+ theme
9049
+ })),
9087
9050
  children: [/*#__PURE__*/jsx("div", {
9088
- className: element('line1')
9051
+ className: "lumx-progress-linear__line1"
9089
9052
  }), /*#__PURE__*/jsx("div", {
9090
- className: element('line2')
9053
+ className: "lumx-progress-linear__line2"
9091
9054
  })]
9092
9055
  });
9093
9056
  });
@@ -9130,27 +9093,24 @@ const ProgressCircular = forwardRef((props, ref) => {
9130
9093
  ...forwardedProps
9131
9094
  } = props;
9132
9095
  const Element = display === 'block' ? 'div' : 'span';
9133
- const {
9134
- block,
9135
- element
9136
- } = useClassnames(CLASSNAME$x);
9137
9096
  return /*#__PURE__*/jsxs(Element, {
9138
9097
  ref: ref,
9139
9098
  ...forwardedProps,
9140
- className: block({
9141
- [`theme-${theme}`]: Boolean(theme),
9142
- [`size-${size}`]: Boolean(size),
9143
- [`display-${display}`]: Boolean(display)
9144
- }, className),
9099
+ className: classNames$1.join(className, handleBasicClasses({
9100
+ prefix: CLASSNAME$x,
9101
+ theme,
9102
+ size,
9103
+ display
9104
+ })),
9145
9105
  children: [/*#__PURE__*/jsx(Element, {
9146
- className: element('double-bounce1')
9106
+ className: "lumx-progress-circular__double-bounce1"
9147
9107
  }), /*#__PURE__*/jsx(Element, {
9148
- className: element('double-bounce2')
9108
+ className: "lumx-progress-circular__double-bounce2"
9149
9109
  }), /*#__PURE__*/jsx("svg", {
9150
- className: element('svg'),
9110
+ className: "lumx-progress-circular__svg",
9151
9111
  viewBox: "25 25 50 50",
9152
9112
  children: /*#__PURE__*/jsx("circle", {
9153
- className: element('path'),
9113
+ className: "lumx-progress-circular__path",
9154
9114
  cx: "50",
9155
9115
  cy: "50",
9156
9116
  r: "20",
@@ -9206,16 +9166,14 @@ const Progress = forwardRef((props, ref) => {
9206
9166
  variant = DEFAULT_PROPS$v.variant,
9207
9167
  ...forwardedProps
9208
9168
  } = props;
9209
- const {
9210
- block
9211
- } = useClassnames(CLASSNAME$w);
9212
9169
  return /*#__PURE__*/jsxs("div", {
9213
9170
  ref: ref,
9214
9171
  ...forwardedProps,
9215
- className: block({
9216
- [`theme-${theme}`]: Boolean(theme),
9217
- [`variant-${variant}`]: Boolean(variant)
9218
- }, className),
9172
+ className: classNames$1.join(className, handleBasicClasses({
9173
+ prefix: CLASSNAME$w,
9174
+ theme,
9175
+ variant
9176
+ })),
9219
9177
  children: [variant === ProgressVariant.circular && /*#__PURE__*/jsx(ProgressCircular, {
9220
9178
  theme: theme
9221
9179
  }), variant === ProgressVariant.linear && /*#__PURE__*/jsx(ProgressLinear, {
@@ -9510,10 +9468,6 @@ const ProgressTracker = forwardRef((props, ref) => {
9510
9468
  className,
9511
9469
  ...forwardedProps
9512
9470
  } = props;
9513
- const {
9514
- block,
9515
- element
9516
- } = useClassnames(CLASSNAME$v);
9517
9471
  const stepListRef = React__default.useRef(null);
9518
9472
  useRovingTabIndex({
9519
9473
  parentRef: stepListRef,
@@ -9528,20 +9482,20 @@ const ProgressTracker = forwardRef((props, ref) => {
9528
9482
  return /*#__PURE__*/jsxs("div", {
9529
9483
  ref: mergeRefs(ref, stepListRef),
9530
9484
  ...forwardedProps,
9531
- className: block([className]),
9485
+ className: classNames$1.join(className, CLASSNAME$v),
9532
9486
  children: [/*#__PURE__*/jsx("div", {
9533
- className: element('steps'),
9487
+ className: `${CLASSNAME$v}__steps`,
9534
9488
  role: "tablist",
9535
9489
  "aria-label": ariaLabel,
9536
9490
  children: children
9537
9491
  }), /*#__PURE__*/jsx("div", {
9538
- className: element('background-bar'),
9492
+ className: `${CLASSNAME$v}__background-bar`,
9539
9493
  style: {
9540
9494
  left: `${backgroundPosition}%`,
9541
9495
  right: `${backgroundPosition}%`
9542
9496
  }
9543
9497
  }), /*#__PURE__*/jsx("div", {
9544
- className: element('foreground-bar'),
9498
+ className: `${CLASSNAME$v}__foreground-bar`,
9545
9499
  style: {
9546
9500
  left: `${backgroundPosition}%`,
9547
9501
  right: `${backgroundPosition}%`,
@@ -9598,10 +9552,6 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
9598
9552
  } = otherProps;
9599
9553
  const state = useTabProviderContext('tab', id);
9600
9554
  const isActive = propIsActive || state?.isActive;
9601
- const {
9602
- block,
9603
- element
9604
- } = useClassnames(CLASSNAME$u);
9605
9555
  const changeToCurrentTab = useCallback(() => {
9606
9556
  if (isAnyDisabled) {
9607
9557
  return;
@@ -9635,12 +9585,13 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
9635
9585
  ...forwardedProps,
9636
9586
  type: "button",
9637
9587
  id: state?.tabId,
9638
- className: block({
9639
- 'has-error': hasError,
9640
- 'is-active': isActive,
9641
- 'is-clickable': Boolean(state && !isAnyDisabled),
9642
- 'is-complete': isComplete
9643
- }, className),
9588
+ className: classNames$1.join(className, handleBasicClasses({
9589
+ prefix: CLASSNAME$u,
9590
+ hasError,
9591
+ isActive,
9592
+ isClickable: state && !isAnyDisabled,
9593
+ isComplete
9594
+ })),
9644
9595
  onClick: changeToCurrentTab,
9645
9596
  onKeyPress: handleKeyPress,
9646
9597
  onFocus: handleFocus,
@@ -9650,16 +9601,16 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
9650
9601
  "aria-selected": isActive,
9651
9602
  "aria-controls": state?.tabPanelId,
9652
9603
  children: [/*#__PURE__*/jsx(Icon, {
9653
- className: element('state'),
9604
+ className: `${CLASSNAME$u}__state`,
9654
9605
  icon: getIcon(),
9655
9606
  size: Size.s
9656
9607
  }), /*#__PURE__*/jsx(InputLabel, {
9657
9608
  htmlFor: state?.tabId || '',
9658
- className: element('label'),
9609
+ className: `${CLASSNAME$u}__label`,
9659
9610
  children: label
9660
9611
  }), helper && /*#__PURE__*/jsx(InputHelper, {
9661
9612
  kind: hasError ? Kind.error : Kind.info,
9662
- className: element('helper'),
9613
+ className: `${CLASSNAME$u}__helper`,
9663
9614
  children: helper
9664
9615
  })]
9665
9616
  });
@@ -9702,16 +9653,14 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
9702
9653
  } = props;
9703
9654
  const state = useTabProviderContext('tabPanel', id);
9704
9655
  const isActive = propIsActive || state?.isActive;
9705
- const {
9706
- block
9707
- } = useClassnames(CLASSNAME$t);
9708
9656
  return /*#__PURE__*/jsx("div", {
9709
9657
  ref: ref,
9710
9658
  ...forwardedProps,
9711
9659
  id: state?.tabPanelId,
9712
- className: block({
9713
- 'is-active': isActive
9714
- }, className),
9660
+ className: classNames$1.join(className, handleBasicClasses({
9661
+ prefix: CLASSNAME$t,
9662
+ isActive
9663
+ })),
9715
9664
  role: "tabpanel",
9716
9665
  tabIndex: isActive ? 0 : -1,
9717
9666
  "aria-labelledby": state?.tabId,
@@ -9766,10 +9715,6 @@ const RadioButton = forwardRef((props, ref) => {
9766
9715
  inputProps,
9767
9716
  ...forwardedProps
9768
9717
  } = otherProps;
9769
- const {
9770
- block,
9771
- element
9772
- } = useClassnames(CLASSNAME$s);
9773
9718
  const generatedInputId = useId();
9774
9719
  const inputId = id || generatedInputId;
9775
9720
  const handleChange = event => {
@@ -9780,17 +9725,18 @@ const RadioButton = forwardRef((props, ref) => {
9780
9725
  return /*#__PURE__*/jsxs("div", {
9781
9726
  ref: ref,
9782
9727
  ...forwardedProps,
9783
- className: block({
9784
- 'is-checked': Boolean(isChecked),
9785
- 'is-disabled': Boolean(isAnyDisabled),
9786
- 'is-unchecked': Boolean(!isChecked),
9787
- [`theme-${theme}`]: Boolean(theme)
9788
- }, className),
9728
+ className: classNames$1.join(className, handleBasicClasses({
9729
+ isChecked,
9730
+ isDisabled: isAnyDisabled,
9731
+ isUnchecked: !isChecked,
9732
+ prefix: CLASSNAME$s,
9733
+ theme
9734
+ })),
9789
9735
  children: [/*#__PURE__*/jsxs("div", {
9790
- className: element('input-wrapper'),
9736
+ className: `${CLASSNAME$s}__input-wrapper`,
9791
9737
  children: [/*#__PURE__*/jsx("input", {
9792
9738
  ref: inputRef,
9793
- className: element('input-native'),
9739
+ className: `${CLASSNAME$s}__input-native`,
9794
9740
  ...disabledStateProps,
9795
9741
  id: inputId,
9796
9742
  type: "radio",
@@ -9802,24 +9748,24 @@ const RadioButton = forwardRef((props, ref) => {
9802
9748
  "aria-describedby": helper ? `${inputId}-helper` : undefined,
9803
9749
  ...inputProps
9804
9750
  }), /*#__PURE__*/jsxs("div", {
9805
- className: element('input-placeholder'),
9751
+ className: `${CLASSNAME$s}__input-placeholder`,
9806
9752
  children: [/*#__PURE__*/jsx("div", {
9807
- className: element('input-background')
9753
+ className: `${CLASSNAME$s}__input-background`
9808
9754
  }), /*#__PURE__*/jsx("div", {
9809
- className: element('input-indicator')
9755
+ className: `${CLASSNAME$s}__input-indicator`
9810
9756
  })]
9811
9757
  })]
9812
9758
  }), /*#__PURE__*/jsxs("div", {
9813
- className: element('content'),
9759
+ className: `${CLASSNAME$s}__content`,
9814
9760
  children: [label && /*#__PURE__*/jsx(InputLabel, {
9815
9761
  htmlFor: inputId,
9816
9762
  theme: theme,
9817
- className: element('label'),
9763
+ className: `${CLASSNAME$s}__label`,
9818
9764
  children: label
9819
9765
  }), helper && /*#__PURE__*/jsx(InputHelper, {
9820
9766
  id: `${inputId}-helper`,
9821
9767
  theme: theme,
9822
- className: element('helper'),
9768
+ className: `${CLASSNAME$s}__helper`,
9823
9769
  children: helper
9824
9770
  })]
9825
9771
  })]
@@ -9852,13 +9798,10 @@ const RadioGroup = forwardRef((props, ref) => {
9852
9798
  className,
9853
9799
  ...forwardedProps
9854
9800
  } = props;
9855
- const {
9856
- block
9857
- } = useClassnames(CLASSNAME$r);
9858
9801
  return /*#__PURE__*/jsx("div", {
9859
9802
  ref: ref,
9860
9803
  ...forwardedProps,
9861
- className: block([className]),
9804
+ className: classNames$1.join(className, CLASSNAME$r),
9862
9805
  children: children
9863
9806
  });
9864
9807
  });
@@ -9893,10 +9836,6 @@ function useListenFocus(ref) {
9893
9836
  const CLASSNAME$q = 'lumx-select';
9894
9837
  const WithSelectContext = (SelectElement, props, ref) => {
9895
9838
  const defaultTheme = useTheme() || Theme.light;
9896
- const {
9897
- block,
9898
- element
9899
- } = useClassnames(CLASSNAME$q);
9900
9839
  const {
9901
9840
  children,
9902
9841
  className,
@@ -9947,18 +9886,19 @@ const WithSelectContext = (SelectElement, props, ref) => {
9947
9886
  useFocusTrap(isOpen && dropdownRef.current, focusElement?.current);
9948
9887
  return /*#__PURE__*/jsxs("div", {
9949
9888
  ref: mergeRefs(ref, selectRef),
9950
- className: block({
9951
- 'has-error': hasError,
9952
- 'has-label': Boolean(label),
9953
- 'has-placeholder': Boolean(placeholder),
9954
- 'has-value': !isEmpty,
9955
- 'is-disabled': isDisabled,
9956
- 'is-empty': isEmpty,
9957
- 'is-focus': isFocus,
9958
- 'is-open': isOpen,
9959
- 'is-valid': isValid,
9960
- [`theme-${theme || Theme.light}`]: true
9961
- }, className),
9889
+ className: classNames$1.join(className, handleBasicClasses({
9890
+ hasError,
9891
+ hasLabel: Boolean(label),
9892
+ hasPlaceholder: Boolean(placeholder),
9893
+ hasValue: !isEmpty,
9894
+ isDisabled,
9895
+ isEmpty,
9896
+ isFocus,
9897
+ isOpen,
9898
+ isValid,
9899
+ prefix: CLASSNAME$q,
9900
+ theme: theme === Theme.light ? Theme.light : Theme.dark
9901
+ })),
9962
9902
  children: [/*#__PURE__*/jsx(SelectElement, {
9963
9903
  ...forwardedProps,
9964
9904
  anchorRef: anchorRef,
@@ -9989,12 +9929,12 @@ const WithSelectContext = (SelectElement, props, ref) => {
9989
9929
  ref: dropdownRef,
9990
9930
  children: children
9991
9931
  }), hasError && error && /*#__PURE__*/jsx(InputHelper, {
9992
- className: element('helper'),
9932
+ className: `${CLASSNAME$q}__helper`,
9993
9933
  kind: Kind.error,
9994
9934
  theme: theme,
9995
9935
  children: error
9996
9936
  }), helper && /*#__PURE__*/jsx(InputHelper, {
9997
- className: element('helper'),
9937
+ className: `${CLASSNAME$q}__helper`,
9998
9938
  theme: theme,
9999
9939
  children: helper
10000
9940
  })]
@@ -10050,16 +9990,13 @@ const SelectField = props => {
10050
9990
  selectElementRef,
10051
9991
  ...forwardedProps
10052
9992
  } = props;
10053
- const {
10054
- element
10055
- } = useClassnames(CLASSNAME$p);
10056
9993
  return /*#__PURE__*/jsxs(Fragment, {
10057
9994
  children: [variant === SelectVariant.input && /*#__PURE__*/jsxs(Fragment, {
10058
9995
  children: [label && /*#__PURE__*/jsx("div", {
10059
- className: element('header'),
9996
+ className: `${CLASSNAME$p}__header`,
10060
9997
  children: /*#__PURE__*/jsx(InputLabel, {
10061
9998
  htmlFor: id,
10062
- className: element('label'),
9999
+ className: `${CLASSNAME$p}__label`,
10063
10000
  isRequired: isRequired,
10064
10001
  theme: theme,
10065
10002
  children: label
@@ -10067,35 +10004,33 @@ const SelectField = props => {
10067
10004
  }), /*#__PURE__*/jsxs("div", {
10068
10005
  ref: mergeRefs(anchorRef, selectElementRef),
10069
10006
  id: id,
10070
- className: element('wrapper'),
10007
+ className: `${CLASSNAME$p}__wrapper`,
10071
10008
  onClick: onInputClick,
10072
10009
  onKeyDown: handleKeyboardNav,
10073
10010
  tabIndex: isDisabled ? undefined : 0,
10074
10011
  "aria-disabled": isDisabled || undefined,
10075
10012
  ...forwardedProps,
10076
10013
  children: [icon && /*#__PURE__*/jsx(Icon, {
10077
- className: element('input-icon'),
10014
+ className: `${CLASSNAME$p}__input-icon`,
10078
10015
  color: theme === Theme.dark ? 'light' : undefined,
10079
10016
  icon: icon,
10080
10017
  size: Size.xs
10081
10018
  }), /*#__PURE__*/jsxs("div", {
10082
- className: element('input-native', {
10083
- placeholder: isEmpty && placeholder
10084
- }),
10019
+ className: classNames$1.join([`${CLASSNAME$p}__input-native`, isEmpty && placeholder && `${CLASSNAME$p}__input-native--placeholder`]),
10085
10020
  children: [!isEmpty && /*#__PURE__*/jsx("span", {
10086
10021
  children: selectedValueRender?.(value)
10087
10022
  }), isEmpty && placeholder && /*#__PURE__*/jsx("span", {
10088
10023
  children: placeholder
10089
10024
  })]
10090
10025
  }), (isValid || hasError) && /*#__PURE__*/jsx("div", {
10091
- className: element('input-validity'),
10026
+ className: `${CLASSNAME$p}__input-validity`,
10092
10027
  children: /*#__PURE__*/jsx(Icon, {
10093
10028
  icon: isValid ? mdiCheckCircle : mdiAlertCircle,
10094
10029
  size: Size.xxs
10095
10030
  })
10096
10031
  }), hasInputClear && clearButtonProps && /*#__PURE__*/jsx(IconButton, {
10097
10032
  ...clearButtonProps,
10098
- className: element('input-clear'),
10033
+ className: `${CLASSNAME$p}__input-clear`,
10099
10034
  icon: mdiCloseCircle,
10100
10035
  emphasis: Emphasis.low,
10101
10036
  size: Size.s,
@@ -10103,7 +10038,7 @@ const SelectField = props => {
10103
10038
  onClick: onClear,
10104
10039
  onKeyDown: stopPropagation
10105
10040
  }), /*#__PURE__*/jsx("div", {
10106
- className: element('input-indicator'),
10041
+ className: `${CLASSNAME$p}__input-indicator`,
10107
10042
  children: /*#__PURE__*/jsx(Icon, {
10108
10043
  icon: mdiMenuDown,
10109
10044
  size: Size.s
@@ -10141,16 +10076,14 @@ const SelectField = props => {
10141
10076
  const Select = forwardRef((props, ref) => {
10142
10077
  const isEmpty$1 = isEmpty(props.value);
10143
10078
  const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty$1;
10144
- const {
10145
- block
10146
- } = useClassnames(CLASSNAME$p);
10147
10079
  return WithSelectContext(SelectField, {
10148
10080
  ...DEFAULT_PROPS$p,
10149
10081
  ...props,
10150
- className: block({
10151
- 'has-input-clear': hasInputClear,
10152
- 'has-unique': !props.isEmpty
10153
- }, props.className),
10082
+ className: classNames$1.join(props.className, handleBasicClasses({
10083
+ hasInputClear,
10084
+ hasUnique: !props.isEmpty,
10085
+ prefix: CLASSNAME$p
10086
+ })),
10154
10087
  hasInputClear,
10155
10088
  isEmpty: isEmpty$1
10156
10089
  }, ref);
@@ -10188,9 +10121,6 @@ const DEFAULT_PROPS$o = {
10188
10121
  };
10189
10122
  const SelectMultipleField = props => {
10190
10123
  const defaultTheme = useTheme();
10191
- const {
10192
- element
10193
- } = useClassnames(CLASSNAME$o);
10194
10124
  const {
10195
10125
  anchorRef,
10196
10126
  handleKeyboardNav,
@@ -10216,10 +10146,10 @@ const SelectMultipleField = props => {
10216
10146
  return /*#__PURE__*/jsxs(Fragment, {
10217
10147
  children: [variant === SelectVariant.input && /*#__PURE__*/jsxs(Fragment, {
10218
10148
  children: [label && /*#__PURE__*/jsx("div", {
10219
- className: element('header'),
10149
+ className: `${CLASSNAME$o}__header`,
10220
10150
  children: /*#__PURE__*/jsx(InputLabel, {
10221
10151
  htmlFor: id,
10222
- className: element('label'),
10152
+ className: `${CLASSNAME$o}__label`,
10223
10153
  isRequired: isRequired,
10224
10154
  theme: theme,
10225
10155
  children: label
@@ -10227,35 +10157,33 @@ const SelectMultipleField = props => {
10227
10157
  }), /*#__PURE__*/jsxs("div", {
10228
10158
  ref: mergeRefs(anchorRef, selectElementRef),
10229
10159
  id: id,
10230
- className: element('wrapper'),
10160
+ className: `${CLASSNAME$o}__wrapper`,
10231
10161
  onClick: onInputClick,
10232
10162
  onKeyDown: handleKeyboardNav,
10233
10163
  tabIndex: isDisabled ? undefined : 0,
10234
10164
  "aria-disabled": isDisabled || undefined,
10235
10165
  ...forwardedProps,
10236
10166
  children: [icon && /*#__PURE__*/jsx(Icon, {
10237
- className: element('input-icon'),
10167
+ className: `${CLASSNAME$o}__input-icon`,
10238
10168
  color: theme === Theme.dark ? 'light' : undefined,
10239
10169
  icon: icon,
10240
10170
  size: Size.xs
10241
10171
  }), /*#__PURE__*/jsx("div", {
10242
- className: element('chips'),
10172
+ className: `${CLASSNAME$o}__chips`,
10243
10173
  children: !isEmpty && value.map((val, index) => selectedChipRender?.(val, index, onClear, isDisabled, theme))
10244
10174
  }), isEmpty && placeholder && /*#__PURE__*/jsx("div", {
10245
- className: element('input-native', {
10246
- placeholder: true
10247
- }),
10175
+ className: classNames$1.join([`${CLASSNAME$o}__input-native`, `${CLASSNAME$o}__input-native--placeholder`]),
10248
10176
  children: /*#__PURE__*/jsx("span", {
10249
10177
  children: placeholder
10250
10178
  })
10251
10179
  }), (isValid || hasError) && /*#__PURE__*/jsx("div", {
10252
- className: element('input-validity'),
10180
+ className: `${CLASSNAME$o}__input-validity`,
10253
10181
  children: /*#__PURE__*/jsx(Icon, {
10254
10182
  icon: isValid ? mdiCheckCircle : mdiAlertCircle,
10255
10183
  size: Size.xxs
10256
10184
  })
10257
10185
  }), /*#__PURE__*/jsx("div", {
10258
- className: element('input-indicator'),
10186
+ className: `${CLASSNAME$o}__input-indicator`,
10259
10187
  children: /*#__PURE__*/jsx(Icon, {
10260
10188
  icon: mdiMenuDown,
10261
10189
  size: Size.s
@@ -10295,15 +10223,13 @@ const SelectMultipleField = props => {
10295
10223
  * @return React element.
10296
10224
  */
10297
10225
  const SelectMultiple = forwardRef((props, ref) => {
10298
- const {
10299
- block
10300
- } = useClassnames(CLASSNAME$o);
10301
10226
  return WithSelectContext(SelectMultipleField, {
10302
10227
  ...DEFAULT_PROPS$o,
10303
10228
  ...props,
10304
- className: block({
10305
- 'has-multiple': !props.isEmpty
10306
- }, props.className),
10229
+ className: classNames$1.join(props.className, handleBasicClasses({
10230
+ hasMultiple: !props.isEmpty,
10231
+ prefix: CLASSNAME$o
10232
+ })),
10307
10233
  isEmpty: props.value.length === 0,
10308
10234
  isMultiple: true
10309
10235
  }, ref);
@@ -10337,14 +10263,11 @@ const SideNavigation = forwardRef((props, ref) => {
10337
10263
  theme = defaultTheme,
10338
10264
  ...forwardedProps
10339
10265
  } = props;
10340
- const {
10341
- block
10342
- } = useClassnames(CLASSNAME$n);
10343
10266
  const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
10344
10267
  return /*#__PURE__*/jsx("ul", {
10345
10268
  ref: ref,
10346
10269
  ...forwardedProps,
10347
- className: block([className, theme === Theme.dark && classNames.font('light')]),
10270
+ className: classNames$1.join(className, theme === Theme.dark && 'lumx-color-font-light-N', CLASSNAME$n),
10348
10271
  children: content
10349
10272
  });
10350
10273
  });
@@ -10397,10 +10320,6 @@ const SideNavigationItem = forwardRef((props, ref) => {
10397
10320
  const hasContent = !isEmpty(content);
10398
10321
  const shouldSplitActions = Boolean(onActionClick);
10399
10322
  const showChildren = hasContent && isOpen;
10400
- const {
10401
- block,
10402
- element
10403
- } = useClassnames(CLASSNAME$m);
10404
10323
  const contentId = useId();
10405
10324
  const ariaProps = {};
10406
10325
  if (hasContent) {
@@ -10411,20 +10330,21 @@ const SideNavigationItem = forwardRef((props, ref) => {
10411
10330
  return /*#__PURE__*/jsxs("li", {
10412
10331
  ref: ref,
10413
10332
  ...forwardedProps,
10414
- className: block({
10415
- [`emphasis-${emphasis}`]: Boolean(emphasis),
10416
- 'is-open': showChildren,
10417
- 'is-selected': isSelected
10418
- }, className),
10333
+ className: classNames$1.join(className, handleBasicClasses({
10334
+ emphasis,
10335
+ isOpen: showChildren,
10336
+ isSelected,
10337
+ prefix: CLASSNAME$m
10338
+ })),
10419
10339
  children: [shouldSplitActions ? /*#__PURE__*/jsxs("div", {
10420
- className: element('wrapper'),
10340
+ className: `${CLASSNAME$m}__wrapper`,
10421
10341
  children: [/*#__PURE__*/jsxs(RawClickable, {
10422
10342
  as: linkAs || (linkProps?.href ? 'a' : 'button'),
10423
10343
  ...linkProps,
10424
- className: element('link'),
10344
+ className: `${CLASSNAME$m}__link`,
10425
10345
  onClick: onClick,
10426
10346
  children: [icon && /*#__PURE__*/jsx(Icon, {
10427
- className: element('icon'),
10347
+ className: `${CLASSNAME$m}__icon`,
10428
10348
  icon: icon,
10429
10349
  size: Size.xs
10430
10350
  }), /*#__PURE__*/jsx("span", {
@@ -10432,7 +10352,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
10432
10352
  })]
10433
10353
  }), /*#__PURE__*/jsx(IconButton, {
10434
10354
  ...toggleButtonProps,
10435
- className: element('toggle'),
10355
+ className: `${CLASSNAME$m}__toggle`,
10436
10356
  icon: isOpen ? mdiChevronUp : mdiChevronDown,
10437
10357
  size: Size.m,
10438
10358
  emphasis: Emphasis.low,
@@ -10442,22 +10362,22 @@ const SideNavigationItem = forwardRef((props, ref) => {
10442
10362
  }) : /*#__PURE__*/jsxs(RawClickable, {
10443
10363
  as: linkAs || (linkProps?.href ? 'a' : 'button'),
10444
10364
  ...linkProps,
10445
- className: element('link'),
10365
+ className: `${CLASSNAME$m}__link`,
10446
10366
  onClick: onClick,
10447
10367
  ...ariaProps,
10448
10368
  children: [icon && /*#__PURE__*/jsx(Icon, {
10449
- className: element('icon'),
10369
+ className: `${CLASSNAME$m}__icon`,
10450
10370
  icon: icon,
10451
10371
  size: Size.xs
10452
10372
  }), /*#__PURE__*/jsx("span", {
10453
10373
  children: label
10454
10374
  }), hasContent && /*#__PURE__*/jsx(Icon, {
10455
- className: element('chevron'),
10375
+ className: `${CLASSNAME$m}__chevron`,
10456
10376
  icon: isOpen ? mdiChevronUp : mdiChevronDown,
10457
10377
  size: Size.xs
10458
10378
  })]
10459
10379
  }), (closeMode === 'hide' || showChildren) && /*#__PURE__*/jsx("ul", {
10460
- className: element('children'),
10380
+ className: `${CLASSNAME$m}__children`,
10461
10381
  id: contentId,
10462
10382
  children: content
10463
10383
  })]
@@ -10495,17 +10415,15 @@ const SkeletonCircle = forwardRef((props, ref) => {
10495
10415
  theme = defaultTheme,
10496
10416
  ...forwardedProps
10497
10417
  } = props;
10498
- const {
10499
- block
10500
- } = useClassnames(CLASSNAME$l);
10501
10418
  return /*#__PURE__*/jsx("div", {
10502
10419
  ref: ref,
10503
10420
  ...forwardedProps,
10504
- className: block({
10505
- [`size-${size}`]: Boolean(size),
10506
- [`color-${color}`]: Boolean(color),
10507
- [`theme-${theme}`]: Boolean(theme)
10508
- }, className)
10421
+ className: classNames$1.join(className, handleBasicClasses({
10422
+ prefix: CLASSNAME$l,
10423
+ size,
10424
+ color,
10425
+ theme
10426
+ }))
10509
10427
  });
10510
10428
  });
10511
10429
  SkeletonCircle.displayName = COMPONENT_NAME$m;
@@ -10555,23 +10473,20 @@ const SkeletonRectangle = forwardRef((props, ref) => {
10555
10473
  color,
10556
10474
  ...forwardedProps
10557
10475
  } = props;
10558
- const {
10559
- block,
10560
- element
10561
- } = useClassnames(CLASSNAME$k);
10562
10476
  return /*#__PURE__*/jsx("div", {
10563
10477
  ref: ref,
10564
10478
  ...forwardedProps,
10565
- className: block({
10566
- [`aspect-ratio-${aspectRatio}`]: Boolean(aspectRatio),
10567
- [`height-${height}`]: Boolean(!aspectRatio && height),
10568
- [`theme-${theme}`]: Boolean(theme),
10569
- [`variant-${variant}`]: Boolean(variant),
10570
- [`width-${width}`]: Boolean(width),
10571
- [`color-${color}`]: Boolean(color)
10572
- }, className),
10479
+ className: classNames$1.join(className, handleBasicClasses({
10480
+ prefix: CLASSNAME$k,
10481
+ aspectRatio,
10482
+ height: aspectRatio ? undefined : height,
10483
+ theme,
10484
+ variant,
10485
+ width,
10486
+ color
10487
+ })),
10573
10488
  children: /*#__PURE__*/jsx("div", {
10574
- className: element('inner')
10489
+ className: `${CLASSNAME$k}__inner`
10575
10490
  })
10576
10491
  });
10577
10492
  });
@@ -10608,24 +10523,21 @@ const SkeletonTypography = forwardRef((props, ref) => {
10608
10523
  color,
10609
10524
  ...forwardedProps
10610
10525
  } = props;
10611
- const {
10612
- block,
10613
- element
10614
- } = useClassnames(CLASSNAME$j);
10615
10526
  return /*#__PURE__*/jsx("div", {
10616
10527
  ref: ref,
10617
10528
  ...forwardedProps,
10618
- className: block({
10619
- [`theme-${theme}`]: Boolean(theme),
10620
- [`typography-${typography}`]: Boolean(typography),
10621
- [`color-${color}`]: Boolean(color)
10622
- }, className),
10529
+ className: classNames$1.join(className, handleBasicClasses({
10530
+ prefix: CLASSNAME$j,
10531
+ theme,
10532
+ typography,
10533
+ color
10534
+ })),
10623
10535
  style: {
10624
10536
  ...forwardedProps.style,
10625
10537
  width
10626
10538
  },
10627
10539
  children: /*#__PURE__*/jsx("div", {
10628
- className: element('inner')
10540
+ className: `${CLASSNAME$j}__inner`
10629
10541
  })
10630
10542
  });
10631
10543
  });
@@ -10738,10 +10650,6 @@ const Slider = forwardRef((props, ref) => {
10738
10650
  value,
10739
10651
  ...forwardedProps
10740
10652
  } = otherProps;
10741
- const {
10742
- block,
10743
- element
10744
- } = useClassnames(CLASSNAME$i);
10745
10653
  const generatedId = useId();
10746
10654
  const sliderId = id || generatedId;
10747
10655
  const sliderLabelId = useMemo(() => `label-${sliderId}`, [sliderId]);
@@ -10873,40 +10781,41 @@ const Slider = forwardRef((props, ref) => {
10873
10781
  return /*#__PURE__*/jsxs("div", {
10874
10782
  ref: ref,
10875
10783
  ...forwardedProps,
10876
- className: block({
10877
- 'has-label': Boolean(label),
10878
- [`theme-${theme}`]: Boolean(theme)
10879
- }, className),
10784
+ className: classNames$1.join(className, handleBasicClasses({
10785
+ prefix: CLASSNAME$i,
10786
+ theme,
10787
+ hasLabel: Boolean(label)
10788
+ })),
10880
10789
  onMouseDown: handleMouseDown,
10881
10790
  children: [label && /*#__PURE__*/jsx(InputLabel, {
10882
10791
  id: sliderLabelId,
10883
10792
  htmlFor: sliderId,
10884
- className: element('label'),
10793
+ className: `${CLASSNAME$i}__label`,
10885
10794
  theme: theme,
10886
10795
  children: label
10887
10796
  }), helper && /*#__PURE__*/jsx(InputHelper, {
10888
- className: element('helper'),
10797
+ className: `${CLASSNAME$i}__helper`,
10889
10798
  theme: theme,
10890
10799
  children: helper
10891
10800
  }), /*#__PURE__*/jsxs("div", {
10892
- className: element('ui-wrapper'),
10801
+ className: `${CLASSNAME$i}__ui-wrapper`,
10893
10802
  children: [!hideMinMaxLabel && /*#__PURE__*/jsx("span", {
10894
- className: element('value-label', 'min'),
10803
+ className: `${CLASSNAME$i}__value-label ${CLASSNAME$i}__value-label--min`,
10895
10804
  children: min
10896
10805
  }), /*#__PURE__*/jsxs("div", {
10897
- className: element('wrapper'),
10806
+ className: `${CLASSNAME$i}__wrapper`,
10898
10807
  ref: sliderRef,
10899
10808
  children: [/*#__PURE__*/jsx("div", {
10900
- className: element('track', 'background')
10809
+ className: `${CLASSNAME$i}__track ${CLASSNAME$i}__track--background`
10901
10810
  }), /*#__PURE__*/jsx("div", {
10902
- className: element('track', 'active'),
10811
+ className: `${CLASSNAME$i}__track ${CLASSNAME$i}__track--active`,
10903
10812
  style: {
10904
10813
  width: percentString
10905
10814
  }
10906
10815
  }), steps ? /*#__PURE__*/jsx("div", {
10907
- className: element('ticks'),
10816
+ className: `${CLASSNAME$i}__ticks`,
10908
10817
  children: availableSteps.map((step, idx) => /*#__PURE__*/jsx("div", {
10909
- className: element('tick'),
10818
+ className: `${CLASSNAME$i}__tick`,
10910
10819
  style: {
10911
10820
  left: `${step * 100}%`
10912
10821
  }
@@ -10916,7 +10825,7 @@ const Slider = forwardRef((props, ref) => {
10916
10825
  "aria-labelledby": sliderLabelId,
10917
10826
  name: name,
10918
10827
  id: sliderId,
10919
- className: element('handle'),
10828
+ className: `${CLASSNAME$i}__handle`,
10920
10829
  style: {
10921
10830
  left: percentString
10922
10831
  },
@@ -10924,7 +10833,7 @@ const Slider = forwardRef((props, ref) => {
10924
10833
  ...disabledStateProps
10925
10834
  })]
10926
10835
  }), !hideMinMaxLabel && /*#__PURE__*/jsx("span", {
10927
- className: element('value-label', 'max'),
10836
+ className: `${CLASSNAME$i}__value-label ${CLASSNAME$i}__value-label--max`,
10928
10837
  children: max
10929
10838
  })]
10930
10839
  })]
@@ -11274,9 +11183,6 @@ const SlideshowItemGroup = forwardRef((props, ref) => {
11274
11183
  isDisplayed,
11275
11184
  ...forwardedProps
11276
11185
  } = props;
11277
- const {
11278
- block
11279
- } = useClassnames(CLASSNAME$h);
11280
11186
  const groupRef = React__default.useRef(null);
11281
11187
  useSlideFocusManagement({
11282
11188
  isSlideDisplayed: isDisplayed,
@@ -11285,7 +11191,7 @@ const SlideshowItemGroup = forwardRef((props, ref) => {
11285
11191
  return /*#__PURE__*/jsx("div", {
11286
11192
  ref: mergeRefs(groupRef, ref),
11287
11193
  role: role,
11288
- className: block([className]),
11194
+ className: classNames$1.join(className, CLASSNAME$h),
11289
11195
  "aria-roledescription": "slide",
11290
11196
  "aria-label": label,
11291
11197
  ...forwardedProps,
@@ -11434,12 +11340,9 @@ const SlideshowItem = forwardRef((props, ref) => {
11434
11340
  children,
11435
11341
  ...forwardedProps
11436
11342
  } = props;
11437
- const {
11438
- block
11439
- } = useClassnames(CLASSNAME$g);
11440
11343
  return /*#__PURE__*/jsx("div", {
11441
11344
  ref: ref,
11442
- className: block([className]),
11345
+ className: classNames$1.join(className, CLASSNAME$g),
11443
11346
  ...forwardedProps,
11444
11347
  children: children
11445
11348
  });
@@ -11554,10 +11457,6 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
11554
11457
  parent = parentRef instanceof HTMLElement ? parentRef : parentRef?.current;
11555
11458
  }
11556
11459
  const paginationRef = React__default.useRef(null);
11557
- const {
11558
- block,
11559
- element
11560
- } = useClassnames(CLASSNAME$f);
11561
11460
  // Listen to touch swipe navigate left & right.
11562
11461
  useSwipeNavigate(parent,
11563
11462
  // Go next without loopback.
@@ -11572,8 +11471,8 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
11572
11471
  parentRef: paginationRef,
11573
11472
  elementSelector: 'button',
11574
11473
  keepTabIndex: true,
11575
- onElementFocus: el => {
11576
- el.click();
11474
+ onElementFocus: element => {
11475
+ element.click();
11577
11476
  }
11578
11477
  });
11579
11478
 
@@ -11587,22 +11486,24 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
11587
11486
  return /*#__PURE__*/jsxs("div", {
11588
11487
  ref: ref,
11589
11488
  ...forwardedProps,
11590
- className: block({
11591
- [`theme-${theme}`]: Boolean(theme),
11592
- 'has-infinite-pagination': slidesCount > PAGINATION_ITEMS_MAX
11593
- }, className),
11489
+ className: classNames$1.join(className, handleBasicClasses({
11490
+ prefix: CLASSNAME$f,
11491
+ theme
11492
+ }), {
11493
+ [`${CLASSNAME$f}--has-infinite-pagination`]: slidesCount > PAGINATION_ITEMS_MAX
11494
+ }),
11594
11495
  children: [/*#__PURE__*/jsx(IconButton, {
11595
11496
  ...previousButtonProps,
11596
11497
  icon: mdiChevronLeft,
11597
- className: element('navigation'),
11498
+ className: `${CLASSNAME$f}__navigation`,
11598
11499
  color: theme === Theme.dark ? 'light' : 'dark',
11599
11500
  emphasis: Emphasis.low,
11600
11501
  onClick: onPreviousClick
11601
11502
  }), /*#__PURE__*/jsx("div", {
11602
11503
  ref: paginationRef,
11603
- className: element('pagination'),
11504
+ className: `${CLASSNAME$f}__pagination`,
11604
11505
  children: /*#__PURE__*/jsx("div", {
11605
- className: element('pagination-items'),
11506
+ className: `${CLASSNAME$f}__pagination-items`,
11606
11507
  style: wrapperStyle,
11607
11508
  role: "tablist",
11608
11509
  ...paginationProps,
@@ -11617,11 +11518,12 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
11617
11518
  } = paginationItemProps ? paginationItemProps(index) : {};
11618
11519
  const ariaLabel = label || paginationItemLabel?.(index) || `${index + 1} / ${slidesCount}`;
11619
11520
  return /*#__PURE__*/jsx("button", {
11620
- className: element('pagination-item', {
11621
- 'is-active': isActive,
11622
- 'is-on-edge': isOnEdge,
11623
- 'is-out-range': isOutRange
11624
- }, itemClassName),
11521
+ className: classNames$1.join(handleBasicClasses({
11522
+ prefix: `${CLASSNAME$f}__pagination-item`,
11523
+ isActive,
11524
+ isOnEdge,
11525
+ isOutRange
11526
+ }), itemClassName),
11625
11527
  type: "button",
11626
11528
  tabIndex: isActive ? undefined : -1,
11627
11529
  role: "tab",
@@ -11630,18 +11532,18 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
11630
11532
  "aria-label": ariaLabel,
11631
11533
  ...itemProps
11632
11534
  }, index);
11633
- }), [element, slidesCount, visibleRange.min, visibleRange.max, activeIndex, paginationItemProps, paginationItemLabel, onPaginationClick])
11535
+ }), [slidesCount, visibleRange.min, visibleRange.max, activeIndex, paginationItemProps, paginationItemLabel, onPaginationClick])
11634
11536
  })
11635
11537
  }), playButtonProps ? /*#__PURE__*/jsx(IconButton, {
11636
11538
  ...playButtonProps,
11637
11539
  icon: isAutoPlaying ? mdiPauseCircleOutline : mdiPlayCircleOutline,
11638
- className: element('play'),
11540
+ className: `${CLASSNAME$f}__play`,
11639
11541
  color: theme === Theme.dark ? 'light' : 'dark',
11640
11542
  emphasis: Emphasis.low
11641
11543
  }) : null, /*#__PURE__*/jsx(IconButton, {
11642
11544
  ...nextButtonProps,
11643
11545
  icon: mdiChevronRight,
11644
- className: element('navigation'),
11546
+ className: `${CLASSNAME$f}__navigation`,
11645
11547
  color: theme === Theme.dark ? 'light' : 'dark',
11646
11548
  emphasis: Emphasis.low,
11647
11549
  onClick: onNextClick
@@ -11694,10 +11596,6 @@ const Slides = forwardRef((props, ref) => {
11694
11596
  const wrapperRef = React__default.useRef(null);
11695
11597
  const startIndexVisible = activeIndex;
11696
11598
  const endIndexVisible = startIndexVisible + 1;
11697
- const {
11698
- block,
11699
- element
11700
- } = useClassnames(CLASSNAME$e);
11701
11599
 
11702
11600
  // Inline style of wrapper element.
11703
11601
  const wrapperStyle = {
@@ -11711,21 +11609,23 @@ const Slides = forwardRef((props, ref) => {
11711
11609
  id: id,
11712
11610
  ref: ref,
11713
11611
  ...forwardedProps,
11714
- className: block({
11715
- [`theme-${theme}`]: Boolean(theme),
11716
- 'fill-height': fillHeight,
11717
- [`group-by-${groupBy}`]: Boolean(groupBy)
11718
- }, className),
11612
+ className: classNames$1.join(className, handleBasicClasses({
11613
+ prefix: CLASSNAME$e,
11614
+ theme
11615
+ }), {
11616
+ [`${CLASSNAME$e}--fill-height`]: fillHeight,
11617
+ [`${CLASSNAME$e}--group-by-${groupBy}`]: Boolean(groupBy)
11618
+ }),
11719
11619
  "aria-roledescription": "carousel",
11720
11620
  children: [/*#__PURE__*/jsx("div", {
11721
11621
  id: slidesId,
11722
- className: element('slides'),
11622
+ className: `${CLASSNAME$e}__slides`,
11723
11623
  onMouseEnter: toggleAutoPlay,
11724
11624
  onMouseLeave: toggleAutoPlay,
11725
11625
  "aria-live": isAutoPlaying ? 'off' : 'polite',
11726
11626
  children: /*#__PURE__*/jsx("div", {
11727
11627
  ref: wrapperRef,
11728
- className: element('wrapper'),
11628
+ className: `${CLASSNAME$e}__wrapper`,
11729
11629
  style: wrapperStyle,
11730
11630
  children: groups.map((group, index) => /*#__PURE__*/jsx(SlideshowItemGroup, {
11731
11631
  id: slidesId && buildSlideShowGroupId(slidesId, index),
@@ -11787,10 +11687,6 @@ const Switch = forwardRef((props, ref) => {
11787
11687
  inputProps = {},
11788
11688
  ...forwardedProps
11789
11689
  } = otherProps;
11790
- const {
11791
- block,
11792
- element
11793
- } = useClassnames(CLASSNAME$d);
11794
11690
  const generatedInputId = useId();
11795
11691
  const inputId = id || generatedInputId;
11796
11692
  const handleChange = event => {
@@ -11801,20 +11697,21 @@ const Switch = forwardRef((props, ref) => {
11801
11697
  return /*#__PURE__*/jsxs("div", {
11802
11698
  ref: ref,
11803
11699
  ...forwardedProps,
11804
- className: block({
11805
- 'is-checked': Boolean(isChecked),
11806
- 'is-disabled': Boolean(isAnyDisabled),
11807
- 'is-unchecked': Boolean(!isChecked),
11808
- [`position-${position}`]: Boolean(position),
11809
- [`theme-${theme}`]: Boolean(theme)
11810
- }, className),
11700
+ className: classNames$1.join(className, handleBasicClasses({
11701
+ prefix: CLASSNAME$d,
11702
+ isChecked,
11703
+ isDisabled: isAnyDisabled,
11704
+ position,
11705
+ theme,
11706
+ isUnchecked: !isChecked
11707
+ })),
11811
11708
  children: [/*#__PURE__*/jsxs("div", {
11812
- className: element('input-wrapper'),
11709
+ className: `${CLASSNAME$d}__input-wrapper`,
11813
11710
  children: [/*#__PURE__*/jsx("input", {
11814
11711
  type: "checkbox",
11815
11712
  role: "switch",
11816
11713
  id: inputId,
11817
- className: element('input-native'),
11714
+ className: `${CLASSNAME$d}__input-native`,
11818
11715
  name: name,
11819
11716
  value: value,
11820
11717
  ...disabledStateProps,
@@ -11825,24 +11722,24 @@ const Switch = forwardRef((props, ref) => {
11825
11722
  "aria-describedby": helper ? `${inputId}-helper` : undefined,
11826
11723
  ...inputProps
11827
11724
  }), /*#__PURE__*/jsxs("div", {
11828
- className: element('input-placeholder'),
11725
+ className: `${CLASSNAME$d}__input-placeholder`,
11829
11726
  children: [/*#__PURE__*/jsx("div", {
11830
- className: element('input-background')
11727
+ className: `${CLASSNAME$d}__input-background`
11831
11728
  }), /*#__PURE__*/jsx("div", {
11832
- className: element('input-indicator')
11729
+ className: `${CLASSNAME$d}__input-indicator`
11833
11730
  })]
11834
11731
  })]
11835
11732
  }), Children.count(children) > 0 && /*#__PURE__*/jsxs("div", {
11836
- className: element('content'),
11733
+ className: `${CLASSNAME$d}__content`,
11837
11734
  children: [/*#__PURE__*/jsx(InputLabel, {
11838
11735
  htmlFor: inputId,
11839
11736
  theme: theme,
11840
- className: element('label'),
11737
+ className: `${CLASSNAME$d}__label`,
11841
11738
  children: children
11842
- }), helper && /*#__PURE__*/jsx(InputHelper, {
11739
+ }), !isEmpty(helper) && /*#__PURE__*/jsx(InputHelper, {
11843
11740
  id: `${inputId}-helper`,
11844
11741
  theme: theme,
11845
- className: element('helper'),
11742
+ className: `${CLASSNAME$d}__helper`,
11846
11743
  children: helper
11847
11744
  })]
11848
11745
  })]
@@ -11884,17 +11781,15 @@ const Table = forwardRef((props, ref) => {
11884
11781
  theme = defaultTheme,
11885
11782
  ...forwardedProps
11886
11783
  } = props;
11887
- const {
11888
- block
11889
- } = useClassnames(CLASSNAME$c);
11890
11784
  return /*#__PURE__*/jsx("table", {
11891
11785
  ref: ref,
11892
11786
  ...forwardedProps,
11893
- className: block({
11894
- 'has-before': hasBefore,
11895
- 'has-dividers': hasDividers,
11896
- [`theme-${theme}`]: Boolean(theme)
11897
- }, className),
11787
+ className: classNames$1.join(className, handleBasicClasses({
11788
+ prefix: CLASSNAME$c,
11789
+ hasBefore,
11790
+ hasDividers,
11791
+ theme
11792
+ })),
11898
11793
  children: children
11899
11794
  });
11900
11795
  });
@@ -11925,13 +11820,10 @@ const TableBody = forwardRef((props, ref) => {
11925
11820
  className,
11926
11821
  ...forwardedProps
11927
11822
  } = props;
11928
- const {
11929
- block
11930
- } = useClassnames(CLASSNAME$b);
11931
11823
  return /*#__PURE__*/jsx("tbody", {
11932
11824
  ref: ref,
11933
11825
  ...forwardedProps,
11934
- className: block([className]),
11826
+ className: classNames$1.join(className, CLASSNAME$b),
11935
11827
  children: children
11936
11828
  });
11937
11829
  });
@@ -11989,9 +11881,6 @@ const TableCell = forwardRef((props, ref) => {
11989
11881
  variant = DEFAULT_PROPS$e.variant,
11990
11882
  ...forwardedProps
11991
11883
  } = props;
11992
- const {
11993
- block
11994
- } = useClassnames(CLASSNAME$a);
11995
11884
 
11996
11885
  // Use button if clickable
11997
11886
  const Wrapper = onHeaderClick ? 'button' : 'div';
@@ -12011,11 +11900,11 @@ const TableCell = forwardRef((props, ref) => {
12011
11900
  children: [variant === TableCellVariant.head && /*#__PURE__*/jsx("th", {
12012
11901
  ref: ref,
12013
11902
  ...forwardedProps,
12014
- className: block({
12015
- head: true,
12016
- 'is-sortable': isSortable,
12017
- 'is-sorted': Boolean(isSortable && sortOrder)
12018
- }, [className]),
11903
+ className: classNames$1.join(handleBasicClasses({
11904
+ prefix: CLASSNAME$a,
11905
+ isSortable,
11906
+ isSorted: isSortable && !!sortOrder
11907
+ }), className, `${CLASSNAME$a}--head`),
12019
11908
  "aria-sort": ariaSort,
12020
11909
  children: /*#__PURE__*/jsxs(Wrapper, {
12021
11910
  className: `${CLASSNAME$a}-wrapper`,
@@ -12039,9 +11928,7 @@ const TableCell = forwardRef((props, ref) => {
12039
11928
  })
12040
11929
  }), variant === TableCellVariant.body && /*#__PURE__*/jsx("td", {
12041
11930
  ...forwardedProps,
12042
- className: block({
12043
- body: true
12044
- }, [className]),
11931
+ className: classNames$1.join(className, CLASSNAME$a, `${CLASSNAME$a}--body`),
12045
11932
  children: /*#__PURE__*/jsx("div", {
12046
11933
  className: `${CLASSNAME$a}-content`,
12047
11934
  children: children
@@ -12081,13 +11968,10 @@ const TableHeader = forwardRef((props, ref) => {
12081
11968
  className,
12082
11969
  ...forwardedProps
12083
11970
  } = props;
12084
- const {
12085
- block
12086
- } = useClassnames(CLASSNAME$9);
12087
11971
  return /*#__PURE__*/jsx("thead", {
12088
11972
  ref: ref,
12089
11973
  ...forwardedProps,
12090
- className: block([className]),
11974
+ className: classNames$1.join(className, CLASSNAME$9),
12091
11975
  children: children
12092
11976
  });
12093
11977
  });
@@ -12130,18 +12014,16 @@ const TableRow = forwardRef((props, ref) => {
12130
12014
  isSelected,
12131
12015
  ...forwardedProps
12132
12016
  } = otherProps;
12133
- const {
12134
- element
12135
- } = useClassnames(CLASSNAME$c);
12136
12017
  return /*#__PURE__*/jsx("tr", {
12137
12018
  ref: ref,
12138
12019
  tabIndex: isClickable && !disabledStateProps.disabled ? 0 : -1,
12139
12020
  ...forwardedProps,
12140
- className: element('row', {
12141
- 'is-clickable': Boolean(isClickable && !isAnyDisabled),
12142
- 'is-disabled': isAnyDisabled,
12143
- 'is-selected': Boolean(isSelected && !isAnyDisabled)
12144
- }, className),
12021
+ className: classNames$1.join(className, handleBasicClasses({
12022
+ isClickable: isClickable && !isAnyDisabled,
12023
+ isDisabled: isAnyDisabled,
12024
+ isSelected: isSelected && !isAnyDisabled,
12025
+ prefix: CLASSNAME$8
12026
+ })),
12145
12027
  "aria-disabled": isAnyDisabled,
12146
12028
  children: children
12147
12029
  });
@@ -12257,10 +12139,6 @@ const TabList = forwardRef((props, ref) => {
12257
12139
  ...forwardedProps
12258
12140
  } = props;
12259
12141
  const tabListRef = React__default.useRef(null);
12260
- const {
12261
- block,
12262
- element
12263
- } = useClassnames(TABS_CLASSNAME);
12264
12142
  useRovingTabIndex({
12265
12143
  parentRef: tabListRef,
12266
12144
  elementSelector: '[role="tab"]',
@@ -12270,13 +12148,14 @@ const TabList = forwardRef((props, ref) => {
12270
12148
  return /*#__PURE__*/jsx("div", {
12271
12149
  ref: mergeRefs(ref, tabListRef),
12272
12150
  ...forwardedProps,
12273
- className: block({
12274
- [`layout-${layout}`]: Boolean(layout),
12275
- [`position-${position}`]: Boolean(position),
12276
- [`theme-${theme}`]: Boolean(theme)
12277
- }, className),
12151
+ className: classNames$1.join(className, handleBasicClasses({
12152
+ prefix: TABS_CLASSNAME,
12153
+ layout,
12154
+ position,
12155
+ theme
12156
+ })),
12278
12157
  children: /*#__PURE__*/jsx("div", {
12279
- className: element('links'),
12158
+ className: `${TABS_CLASSNAME}__links`,
12280
12159
  role: "tablist",
12281
12160
  "aria-label": ariaLabel,
12282
12161
  children: children
@@ -12330,9 +12209,6 @@ const Tab = forwardRef((props, ref) => {
12330
12209
  } = otherProps;
12331
12210
  const state = useTabProviderContext('tab', id);
12332
12211
  const isActive = propIsActive || state?.isActive;
12333
- const {
12334
- element
12335
- } = useClassnames('lumx-tabs');
12336
12212
  const changeToCurrentTab = useCallback(() => {
12337
12213
  if (isAnyDisabled) {
12338
12214
  return;
@@ -12357,10 +12233,11 @@ const Tab = forwardRef((props, ref) => {
12357
12233
  ...forwardedProps,
12358
12234
  type: "button",
12359
12235
  id: state?.tabId,
12360
- className: element('link', {
12361
- 'is-active': isActive,
12362
- 'is-disabled': isAnyDisabled
12363
- }, className),
12236
+ className: classNames$1.join(className, handleBasicClasses({
12237
+ prefix: CLASSNAME$7,
12238
+ isActive,
12239
+ isDisabled: isAnyDisabled
12240
+ })),
12364
12241
  onClick: changeToCurrentTab,
12365
12242
  onKeyPress: handleKeyPress,
12366
12243
  onFocus: handleFocus,
@@ -12418,16 +12295,14 @@ const TabPanel = forwardRef((props, ref) => {
12418
12295
  } = props;
12419
12296
  const state = useTabProviderContext('tabPanel', id);
12420
12297
  const isActive = propIsActive || state?.isActive;
12421
- const {
12422
- block
12423
- } = useClassnames(CLASSNAME$6);
12424
12298
  return /*#__PURE__*/jsx("div", {
12425
12299
  ref: ref,
12426
12300
  ...forwardedProps,
12427
12301
  id: state?.tabPanelId,
12428
- className: block({
12429
- 'is-active': isActive
12430
- }, className),
12302
+ className: classNames$1.join(className, handleBasicClasses({
12303
+ prefix: CLASSNAME$6,
12304
+ isActive
12305
+ })),
12431
12306
  role: "tabpanel",
12432
12307
  tabIndex: isActive ? 0 : -1,
12433
12308
  "aria-labelledby": state?.tabId,
@@ -12476,9 +12351,6 @@ const RawInputText = forwardRef((props, ref) => {
12476
12351
  ...forwardedProps
12477
12352
  } = props;
12478
12353
  const textareaRef = useRef(null);
12479
- const {
12480
- block
12481
- } = useClassnames(INPUT_NATIVE_CLASSNAME);
12482
12354
  const handleChange = useCallback(evt => {
12483
12355
  onChange?.(evt.target.value, name, evt);
12484
12356
  }, [onChange, name]);
@@ -12487,10 +12359,10 @@ const RawInputText = forwardRef((props, ref) => {
12487
12359
  name: name,
12488
12360
  type: type,
12489
12361
  ref: useMergeRefs(ref, textareaRef),
12490
- className: block({
12491
- [`theme-${theme}`]: Boolean(theme),
12492
- text: true
12493
- }, [className]),
12362
+ className: classNames$1.join(className, handleBasicClasses({
12363
+ prefix: INPUT_NATIVE_CLASSNAME,
12364
+ theme
12365
+ }), `${INPUT_NATIVE_CLASSNAME}--text`),
12494
12366
  onChange: handleChange,
12495
12367
  value: value
12496
12368
  });
@@ -12561,19 +12433,16 @@ const RawInputTextarea = forwardRef((props, ref) => {
12561
12433
  } = props;
12562
12434
  const textareaRef = useRef(null);
12563
12435
  const rows = useFitRowsToContent(minimumRows, textareaRef, value);
12564
- const {
12565
- block
12566
- } = useClassnames(INPUT_NATIVE_CLASSNAME);
12567
12436
  const handleChange = useCallback(evt => {
12568
12437
  onChange?.(evt.target.value, name, evt);
12569
12438
  }, [onChange, name]);
12570
12439
  return /*#__PURE__*/jsx("textarea", {
12571
12440
  ...forwardedProps,
12572
12441
  name: name,
12573
- className: block({
12574
- [`theme-${theme}`]: Boolean(theme),
12575
- textarea: true
12576
- }, [className]),
12442
+ className: classNames$1.join(className, handleBasicClasses({
12443
+ prefix: INPUT_NATIVE_CLASSNAME,
12444
+ theme
12445
+ }), `${INPUT_NATIVE_CLASSNAME}--textarea`),
12577
12446
  ref: useMergeRefs(ref, textareaRef),
12578
12447
  onChange: handleChange,
12579
12448
  value: value,
@@ -12633,10 +12502,6 @@ const TextField = forwardRef((props, ref) => {
12633
12502
  afterElement,
12634
12503
  ...forwardedProps
12635
12504
  } = otherProps;
12636
- const {
12637
- block,
12638
- element
12639
- } = useClassnames(CLASSNAME$5);
12640
12505
  const generatedTextFieldId = useId();
12641
12506
  const textFieldId = id || generatedTextFieldId;
12642
12507
  /** Keep a clean local input ref to manage focus */
@@ -12711,32 +12576,33 @@ const TextField = forwardRef((props, ref) => {
12711
12576
  });
12712
12577
  return /*#__PURE__*/jsxs("div", {
12713
12578
  ref: ref,
12714
- className: block({
12715
- 'has-chips': Boolean(chips),
12716
- 'has-error': Boolean(!isValid && hasError),
12717
- 'has-icon': Boolean(icon),
12718
- 'has-input': Boolean(!multiline),
12719
- 'has-input-clear': Boolean(clearButtonProps && isNotEmpty),
12720
- 'has-label': Boolean(label),
12721
- 'has-placeholder': Boolean(placeholder),
12722
- 'has-textarea': Boolean(multiline),
12723
- 'has-value': Boolean(value),
12724
- 'is-disabled': Boolean(isAnyDisabled),
12725
- 'is-focus': Boolean(isFocus || forceFocusStyle),
12726
- 'is-valid': Boolean(isValid),
12727
- [`theme-${theme}`]: Boolean(theme)
12728
- }, className),
12579
+ className: classNames$1.join(className, handleBasicClasses({
12580
+ hasChips: Boolean(chips),
12581
+ hasError: !isValid && hasError,
12582
+ hasIcon: Boolean(icon),
12583
+ hasInput: !multiline,
12584
+ hasInputClear: clearButtonProps && isNotEmpty,
12585
+ hasLabel: Boolean(label),
12586
+ hasPlaceholder: Boolean(placeholder),
12587
+ hasTextarea: multiline,
12588
+ hasValue: Boolean(value),
12589
+ isDisabled: isAnyDisabled,
12590
+ isFocus: isFocus || forceFocusStyle,
12591
+ isValid,
12592
+ prefix: CLASSNAME$5,
12593
+ theme
12594
+ })),
12729
12595
  children: [(label || maxLength) && /*#__PURE__*/jsxs("div", {
12730
- className: element('header'),
12596
+ className: `${CLASSNAME$5}__header`,
12731
12597
  children: [label && /*#__PURE__*/jsx(InputLabel, {
12732
12598
  ...labelProps,
12733
12599
  htmlFor: textFieldId,
12734
- className: element('label'),
12600
+ className: `${CLASSNAME$5}__label`,
12735
12601
  isRequired: isRequired,
12736
12602
  theme: theme,
12737
12603
  children: label
12738
12604
  }), maxLength && /*#__PURE__*/jsxs("div", {
12739
- className: element('char-counter'),
12605
+ className: `${CLASSNAME$5}__char-counter`,
12740
12606
  children: [/*#__PURE__*/jsx("span", {
12741
12607
  children: maxLength - valueLength
12742
12608
  }), maxLength - valueLength === 0 && /*#__PURE__*/jsx(Icon, {
@@ -12745,27 +12611,27 @@ const TextField = forwardRef((props, ref) => {
12745
12611
  })]
12746
12612
  })]
12747
12613
  }), /*#__PURE__*/jsxs("div", {
12748
- className: element('wrapper'),
12614
+ className: `${CLASSNAME$5}__wrapper`,
12749
12615
  ref: textFieldRef,
12750
12616
  children: [icon && /*#__PURE__*/jsx(Icon, {
12751
- className: element('input-icon'),
12617
+ className: `${CLASSNAME$5}__input-icon`,
12752
12618
  color: theme === Theme.dark ? 'light' : undefined,
12753
12619
  icon: icon,
12754
12620
  size: Size.xs
12755
12621
  }), chips ? /*#__PURE__*/jsxs("div", {
12756
- className: element('chips'),
12622
+ className: `${CLASSNAME$5}__chips`,
12757
12623
  children: [chips, input]
12758
12624
  }) : /*#__PURE__*/jsx("div", {
12759
- className: element(`input-wrapper`),
12625
+ className: `${CLASSNAME$5}__input-wrapper`,
12760
12626
  children: input
12761
12627
  }), (isValid || hasError) && /*#__PURE__*/jsx(Icon, {
12762
- className: element('input-validity'),
12628
+ className: `${CLASSNAME$5}__input-validity`,
12763
12629
  color: theme === Theme.dark ? 'light' : undefined,
12764
12630
  icon: isValid ? mdiCheckCircle : mdiAlertCircle,
12765
12631
  size: Size.xxs
12766
12632
  }), clearButtonProps && isNotEmpty && !isAnyDisabled && /*#__PURE__*/jsx(IconButton, {
12767
12633
  ...clearButtonProps,
12768
- className: element('input-clear'),
12634
+ className: `${CLASSNAME$5}__input-clear`,
12769
12635
  icon: mdiCloseCircle,
12770
12636
  emphasis: Emphasis.low,
12771
12637
  size: Size.s,
@@ -12773,17 +12639,17 @@ const TextField = forwardRef((props, ref) => {
12773
12639
  onClick: handleClear,
12774
12640
  type: "button"
12775
12641
  }), afterElement && /*#__PURE__*/jsx("div", {
12776
- className: element('after-element'),
12642
+ className: `${CLASSNAME$5}__after-element`,
12777
12643
  children: afterElement
12778
12644
  })]
12779
12645
  }), hasError && error && /*#__PURE__*/jsx(InputHelper, {
12780
- className: element('helper'),
12646
+ className: `${CLASSNAME$5}__helper`,
12781
12647
  kind: Kind.error,
12782
12648
  theme: theme,
12783
12649
  id: errorId,
12784
12650
  children: error
12785
12651
  }), helper && /*#__PURE__*/jsx(InputHelper, {
12786
- className: element('helper'),
12652
+ className: `${CLASSNAME$5}__helper`,
12787
12653
  theme: theme,
12788
12654
  id: helperId,
12789
12655
  children: helper
@@ -12990,10 +12856,6 @@ const Thumbnail = forwardRef((props, ref) => {
12990
12856
  ...forwardedProps
12991
12857
  } = otherProps;
12992
12858
  const [imgElement, setImgElement] = useState();
12993
- const {
12994
- block,
12995
- element
12996
- } = useClassnames(CLASSNAME$4);
12997
12859
 
12998
12860
  // Image loading state.
12999
12861
  const loadingState = useImageLoad(image, imgElement);
@@ -13040,23 +12902,23 @@ const Thumbnail = forwardRef((props, ref) => {
13040
12902
  return /*#__PURE__*/jsxs(Wrapper, {
13041
12903
  ...wrapperProps,
13042
12904
  ref: ref,
13043
- className: block({
13044
- [`align-${align}`]: Boolean(align),
13045
- [`aspect-ratio-${aspectRatio}`]: Boolean(aspectRatio),
13046
- [`size-${size}`]: Boolean(size),
13047
- [`theme-${theme}`]: Boolean(theme),
13048
- [`variant-${variant}`]: Boolean(variant),
13049
- 'is-clickable': Boolean(isClickable),
13050
- 'has-error': Boolean(hasError),
13051
- 'has-icon-error-fallback': Boolean(hasIconErrorFallback),
13052
- 'has-custom-error-fallback': Boolean(hasCustomErrorFallback),
13053
- 'is-loading': Boolean(isLoading),
13054
- [`object-fit-${objectFit}`]: Boolean(objectFit),
13055
- 'has-badge': Boolean(badge),
13056
- 'fill-height': Boolean(fillHeight)
13057
- }, [linkProps?.className, className]),
12905
+ className: classNames$1.join(linkProps?.className, className, handleBasicClasses({
12906
+ align,
12907
+ aspectRatio,
12908
+ prefix: CLASSNAME$4,
12909
+ size,
12910
+ theme,
12911
+ variant,
12912
+ isClickable,
12913
+ hasError,
12914
+ hasIconErrorFallback,
12915
+ hasCustomErrorFallback,
12916
+ isLoading,
12917
+ objectFit,
12918
+ hasBadge: !!badge
12919
+ }), fillHeight && `${CLASSNAME$4}--fill-height`),
13058
12920
  children: [/*#__PURE__*/jsxs("span", {
13059
- className: element('background'),
12921
+ className: `${CLASSNAME$4}__background`,
13060
12922
  children: [/*#__PURE__*/jsx("img", {
13061
12923
  // Use placeholder image size
13062
12924
  width: loadingPlaceholderImage?.naturalWidth,
@@ -13071,16 +12933,17 @@ const Thumbnail = forwardRef((props, ref) => {
13071
12933
  ...loadingStyle
13072
12934
  },
13073
12935
  ref: useMergeRefs(setImgElement, propImgRef),
13074
- className: element('image', {
13075
- 'is-loading': Boolean(isLoading),
13076
- 'has-defined-size': Boolean(imgProps?.height && imgProps.width)
13077
- }, imgProps?.className),
12936
+ className: classNames$1.join(handleBasicClasses({
12937
+ prefix: `${CLASSNAME$4}__image`,
12938
+ isLoading,
12939
+ hasDefinedSize: Boolean(imgProps?.height && imgProps.width)
12940
+ }), imgProps?.className),
13078
12941
  crossOrigin: crossOrigin,
13079
12942
  src: image,
13080
12943
  alt: alt,
13081
12944
  loading: loading
13082
12945
  }), !isLoading && hasError && /*#__PURE__*/jsx("span", {
13083
- className: element('fallback'),
12946
+ className: `${CLASSNAME$4}__fallback`,
13084
12947
  children: hasIconErrorFallback ? /*#__PURE__*/jsx(Icon, {
13085
12948
  icon: fallback,
13086
12949
  size: Size.xxs,
@@ -13088,7 +12951,7 @@ const Thumbnail = forwardRef((props, ref) => {
13088
12951
  }) : fallback
13089
12952
  })]
13090
12953
  }), badge && /*#__PURE__*/React__default.cloneElement(badge, {
13091
- className: element('badge', [badge.props.className])
12954
+ className: classNames$1.join(`${CLASSNAME$4}__badge`, badge.props.className)
13092
12955
  })]
13093
12956
  });
13094
12957
  });
@@ -13163,26 +13026,23 @@ const Toolbar = forwardRef((props, ref) => {
13163
13026
  label,
13164
13027
  ...forwardedProps
13165
13028
  } = props;
13166
- const {
13167
- block,
13168
- element
13169
- } = useClassnames(CLASSNAME$3);
13170
13029
  return /*#__PURE__*/jsxs("div", {
13171
13030
  ref: ref,
13172
13031
  ...forwardedProps,
13173
- className: block({
13174
- 'has-after': Boolean(after),
13175
- 'has-before': Boolean(before),
13176
- 'has-label': Boolean(label)
13177
- }, className),
13032
+ className: classNames$1.join(className, handleBasicClasses({
13033
+ hasAfter: Boolean(after),
13034
+ hasBefore: Boolean(before),
13035
+ hasLabel: Boolean(label),
13036
+ prefix: CLASSNAME$3
13037
+ })),
13178
13038
  children: [before && /*#__PURE__*/jsx("div", {
13179
- className: element('before'),
13039
+ className: `${CLASSNAME$3}__before`,
13180
13040
  children: before
13181
13041
  }), label && /*#__PURE__*/jsx("div", {
13182
- className: element('label'),
13042
+ className: `${CLASSNAME$3}__label`,
13183
13043
  children: label
13184
13044
  }), after && /*#__PURE__*/jsx("div", {
13185
- className: element('after'),
13045
+ className: `${CLASSNAME$3}__after`,
13186
13046
  children: after
13187
13047
  })]
13188
13048
  });
@@ -13468,10 +13328,6 @@ const Tooltip = forwardRef((props, ref) => {
13468
13328
  }, [isOpen, update, popperElement]);
13469
13329
  const labelLines = label ? label.split('\n') : [];
13470
13330
  const tooltipRef = useMergeRefs(ref, setPopperElement, onPopperMount);
13471
- const {
13472
- block,
13473
- element
13474
- } = useClassnames(CLASSNAME$2);
13475
13331
  return /*#__PURE__*/jsxs(Fragment, {
13476
13332
  children: [/*#__PURE__*/jsx(TooltipContextProvider, {
13477
13333
  children: wrappedChildren
@@ -13481,19 +13337,20 @@ const Tooltip = forwardRef((props, ref) => {
13481
13337
  ...forwardedProps,
13482
13338
  id: id,
13483
13339
  role: "tooltip",
13484
- className: block({
13485
- [`position-${position}`]: Boolean(position),
13486
- 'is-initializing': !styles.popper?.transform
13487
- }, [className, isHidden && classNames.visuallyHidden()]),
13340
+ className: classNames$1.join(className, handleBasicClasses({
13341
+ prefix: CLASSNAME$2,
13342
+ position,
13343
+ isInitializing: !styles.popper?.transform
13344
+ }), isHidden && classNames$1.visuallyHidden()),
13488
13345
  style: {
13489
13346
  ...(isHidden ? undefined : styles.popper),
13490
13347
  zIndex
13491
13348
  },
13492
13349
  ...attributes.popper,
13493
13350
  children: [/*#__PURE__*/jsx("div", {
13494
- className: element('arrow')
13351
+ className: `${CLASSNAME$2}__arrow`
13495
13352
  }), /*#__PURE__*/jsx("div", {
13496
- className: element('inner'),
13353
+ className: `${CLASSNAME$2}__inner`,
13497
13354
  children: labelLines.map(line => /*#__PURE__*/jsx("p", {
13498
13355
  children: line
13499
13356
  }, line))
@@ -13551,10 +13408,6 @@ const DEFAULT_PROPS$1 = {
13551
13408
  * @return React element.
13552
13409
  */
13553
13410
  const Uploader = forwardRef((props, ref) => {
13554
- const {
13555
- block,
13556
- element
13557
- } = useClassnames(CLASSNAME$1);
13558
13411
  const {
13559
13412
  disabledStateProps,
13560
13413
  otherProps,
@@ -13610,30 +13463,31 @@ const Uploader = forwardRef((props, ref) => {
13610
13463
  ...wrapper.props,
13611
13464
  ...forwardedProps,
13612
13465
  onClick: handleClick,
13613
- className: block({
13614
- [`aspect-ratio-${adjustedAspectRatio}`]: Boolean(adjustedAspectRatio),
13615
- [`size-${size}`]: Boolean(size),
13616
- [`theme-${theme}`]: Boolean(theme),
13617
- [`variant-${variant}`]: Boolean(variant),
13618
- 'is-drag-hovering': isDragHovering,
13619
- 'is-disabled': isAnyDisabled
13620
- }, className),
13466
+ className: classNames$1.join(className, handleBasicClasses({
13467
+ aspectRatio: adjustedAspectRatio,
13468
+ prefix: CLASSNAME$1,
13469
+ size,
13470
+ theme,
13471
+ variant,
13472
+ isDragHovering,
13473
+ isDisabled: isAnyDisabled
13474
+ })),
13621
13475
  children: [/*#__PURE__*/jsx("span", {
13622
- className: element('background')
13476
+ className: `${CLASSNAME$1}__background`
13623
13477
  }), /*#__PURE__*/jsxs("span", {
13624
- className: element('wrapper'),
13478
+ className: `${CLASSNAME$1}__wrapper`,
13625
13479
  children: [icon && /*#__PURE__*/jsx(Icon, {
13626
- className: element('icon'),
13480
+ className: `${CLASSNAME$1}__icon`,
13627
13481
  icon: icon,
13628
13482
  size: Size.s
13629
13483
  }), label && /*#__PURE__*/jsx("span", {
13630
- className: element('label'),
13484
+ className: `${CLASSNAME$1}__label`,
13631
13485
  children: label
13632
13486
  })]
13633
13487
  }), fileInputProps && /*#__PURE__*/jsx("input", {
13634
13488
  type: "file",
13635
13489
  id: inputId,
13636
- className: element('input', [classNames.visuallyHidden()]),
13490
+ className: `${CLASSNAME$1}__input ${classNames$1.visuallyHidden()}`,
13637
13491
  ...disabledStateProps,
13638
13492
  ...fileInputProps,
13639
13493
  readOnly: isAnyDisabled,
@@ -13696,10 +13550,6 @@ const UserBlock = forwardRef((props, ref) => {
13696
13550
  after,
13697
13551
  ...forwardedProps
13698
13552
  } = props;
13699
- const {
13700
- block,
13701
- element
13702
- } = useClassnames(CLASSNAME);
13703
13553
  let componentSize = size;
13704
13554
 
13705
13555
  // Special case - When using vertical orientation force the size to be Sizes.l.
@@ -13716,7 +13566,7 @@ const UserBlock = forwardRef((props, ref) => {
13716
13566
  let NameComponent = 'span';
13717
13567
  const nProps = {
13718
13568
  ...nameProps,
13719
- className: element('name', [linkProps?.className, nameProps?.className])
13569
+ className: classNames$1.join(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className)
13720
13570
  };
13721
13571
  if (isClickable) {
13722
13572
  NameComponent = Link;
@@ -13735,24 +13585,25 @@ const UserBlock = forwardRef((props, ref) => {
13735
13585
  ...nProps,
13736
13586
  children: name
13737
13587
  });
13738
- }, [avatarProps, element, isClickable, linkAs, linkProps, name, nameProps, onClick]);
13588
+ }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
13739
13589
  const shouldDisplayFields = componentSize !== Size.s && componentSize !== Size.xs;
13740
13590
  const fieldsBlock = fields && shouldDisplayFields && /*#__PURE__*/jsx("div", {
13741
- className: element('fields'),
13591
+ className: `${CLASSNAME}__fields`,
13742
13592
  children: fields.map((field, idx) => /*#__PURE__*/jsx("span", {
13743
- className: element('field'),
13593
+ className: `${CLASSNAME}__field`,
13744
13594
  children: field
13745
13595
  }, idx))
13746
13596
  });
13747
13597
  return /*#__PURE__*/jsxs("div", {
13748
13598
  ref: ref,
13749
13599
  ...forwardedProps,
13750
- className: block({
13751
- [`orientation-${orientation}`]: Boolean(orientation),
13752
- [`size-${componentSize}`]: Boolean(componentSize),
13753
- [`theme-${theme}`]: Boolean(theme),
13754
- 'is-clickable': Boolean(isClickable)
13755
- }, className),
13600
+ className: classNames$1.join(className, handleBasicClasses({
13601
+ prefix: CLASSNAME,
13602
+ orientation,
13603
+ size: componentSize,
13604
+ theme,
13605
+ isClickable
13606
+ })),
13756
13607
  onMouseLeave: onMouseLeave,
13757
13608
  onMouseEnter: onMouseEnter,
13758
13609
  children: [avatarProps && /*#__PURE__*/jsx(Avatar, {
@@ -13760,21 +13611,21 @@ const UserBlock = forwardRef((props, ref) => {
13760
13611
  linkProps: linkProps,
13761
13612
  alt: "",
13762
13613
  ...avatarProps,
13763
- className: element('avatar', [avatarProps.className]),
13614
+ className: classNames$1.join(`${CLASSNAME}__avatar`, avatarProps.className),
13764
13615
  size: componentSize,
13765
13616
  onClick: onClick,
13766
13617
  theme: theme
13767
13618
  }), (fields || name || children || additionalFields) && /*#__PURE__*/jsxs("div", {
13768
- className: element('wrapper'),
13619
+ className: `${CLASSNAME}__wrapper`,
13769
13620
  children: [children || nameBlock, fieldsBlock, shouldDisplayFields ? additionalFields : null]
13770
13621
  }), shouldDisplayActions && simpleAction && /*#__PURE__*/jsx("div", {
13771
- className: element('action'),
13622
+ className: `${CLASSNAME}__action`,
13772
13623
  children: simpleAction
13773
13624
  }), shouldDisplayActions && multipleActions && /*#__PURE__*/jsx("div", {
13774
- className: element('actions'),
13625
+ className: `${CLASSNAME}__actions`,
13775
13626
  children: multipleActions
13776
13627
  }), after ? /*#__PURE__*/jsx("div", {
13777
- className: element('after'),
13628
+ className: `${CLASSNAME}__after`,
13778
13629
  children: after
13779
13630
  }) : null]
13780
13631
  });