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

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 (8) hide show
  1. package/_internal/{ClSM3-wl.js → Cd8LPzmx.js} +74 -28
  2. package/_internal/Cd8LPzmx.js.map +1 -0
  3. package/index.js +1064 -885
  4. package/index.js.map +1 -1
  5. package/package.json +3 -4
  6. package/utils/index.d.ts +53 -1
  7. package/utils/index.js +1 -1
  8. package/_internal/ClSM3-wl.js.map +0 -1
package/index.js CHANGED
@@ -1,18 +1,15 @@
1
- import { Kind, Size, ColorPalette, Emphasis, Theme, AspectRatio, DIALOG_TRANSITION_DURATION, Orientation, Typography, Alignment, ColorVariant as ColorVariant$1, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
1
+ import { Kind, Size, ColorPalette, Emphasis, Theme, AspectRatio, DIALOG_TRANSITION_DURATION, Orientation, Typography, Alignment, ColorVariant, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
2
2
  export * from '@lumx/core/js/constants';
3
3
  export * from '@lumx/core/js/types';
4
4
  import * as React from 'react';
5
5
  import React__default, { useState, useEffect, useMemo, useRef, useCallback, Children, useLayoutEffect, cloneElement, createContext, isValidElement, useContext, useReducer } from 'react';
6
- import classNames from 'classnames';
7
6
  import { mdiAlert } from '@lumx/icons/esm/alert';
8
7
  import { mdiAlertCircle } from '@lumx/icons/esm/alert-circle';
9
8
  import { mdiCheckCircle } from '@lumx/icons/esm/check-circle';
10
9
  import { mdiInformation } from '@lumx/icons/esm/information';
11
- import isBoolean from 'lodash/isBoolean';
12
- import isEmpty from 'lodash/isEmpty';
13
- import kebabCase from 'lodash/kebabCase';
14
10
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
15
- import { onEnterPressed, onEscapePressed, onButtonPressed, detectHorizontalSwipe } from '@lumx/core/js/utils';
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';
16
13
  import last from 'lodash/last';
17
14
  import pull from 'lodash/pull';
18
15
  import get from 'lodash/get';
@@ -20,7 +17,6 @@ import concat from 'lodash/concat';
20
17
  import dropRight from 'lodash/dropRight';
21
18
  import partition from 'lodash/partition';
22
19
  import reduce from 'lodash/reduce';
23
- import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider } from './_internal/ClSM3-wl.js';
24
20
  import { mdiCloseCircle } from '@lumx/icons/esm/close-circle';
25
21
  import memoize from 'lodash/memoize';
26
22
  import { mdiClose } from '@lumx/icons/esm/close';
@@ -35,6 +31,7 @@ import { mdiDragVertical } from '@lumx/icons/esm/drag-vertical';
35
31
  import { mdiChevronDown } from '@lumx/icons/esm/chevron-down';
36
32
  import { mdiChevronUp } from '@lumx/icons/esm/chevron-up';
37
33
  import pick from 'lodash/pick';
34
+ import isEmpty from 'lodash/isEmpty';
38
35
  import noop from 'lodash/noop';
39
36
  import isInteger from 'lodash/isInteger';
40
37
  import { mdiMagnifyMinusOutline } from '@lumx/icons/esm/magnify-minus-outline';
@@ -55,108 +52,35 @@ import { mdiArrowUp } from '@lumx/icons/esm/arrow-up';
55
52
  import set from 'lodash/set';
56
53
 
57
54
  /**
58
- * Get the basic CSS class for the given type.
59
- *
60
- * @param prefix The class name prefix for the generated CSS class.
61
- * @param type The type of CSS class we want to generate (e.g.: 'color', 'variant', ...).
62
- * @param value The value of the type of the CSS class (e.g.: 'primary', 'button', ...).
63
- * @return The basic CSS class.
64
- */
65
- function getBasicClass({
66
- prefix,
67
- type,
68
- value
69
- }) {
70
- if (isBoolean(value)) {
71
- if (!value) {
72
- // False value should not return a class.
73
- return '';
74
- }
75
- const booleanPrefixes = ['has', 'is'];
76
- if (booleanPrefixes.some(booleanPrefix => type.toString().startsWith(booleanPrefix))) {
77
- return `${prefix}--${kebabCase(type)}`;
78
- }
79
- return `${prefix}--is-${kebabCase(type)}`;
80
- }
81
- return `${prefix}--${kebabCase(type)}-${value}`;
82
- }
83
-
84
- /**
85
- * Enhance isEmpty method to also works with numbers.
86
- *
87
- * @param value The value to check.
88
- * @return Whether the input value is empty or != 0.
89
- */
90
- const _isEmpty = value => {
91
- if (typeof value === 'number') {
92
- return value === 0;
93
- }
94
- return isEmpty(value);
95
- };
96
-
97
- /**
98
- * Return all basic LumX CSS classes which are available for every components.
99
- *
100
- * @see {@link /src/components/index.d.ts} for the possible values of each parameter.
55
+ * Resolve disabled state from props.
56
+ * (handles `disabled`, `isDisabled` and `aria-disabled`)
101
57
  *
102
- * @param prefix The class name prefix for the generated CSS class.
103
- * @param props All the other props you want to generate a class.
104
- * The rule of thumb: the key is the name of the prop in the class, the value a string that will
105
- * be used in the classname to represent the value of the given prop.
106
- * @return All LumX basic CSS classes.
58
+ * @params component props
107
59
  */
108
- function handleBasicClasses({
109
- prefix,
110
- ...props
111
- }) {
112
- const otherClasses = {};
113
- if (!isEmpty(props)) {
114
- Object.keys(props).forEach(prop => {
115
- otherClasses[getBasicClass({
116
- prefix,
117
- type: prop,
118
- value: props[prop]
119
- })] = isBoolean(props[prop]) ? props[prop] : !_isEmpty(props[prop]);
120
- });
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;
121
78
  }
122
- return classNames(prefix, otherClasses);
123
- }
124
-
125
- /**
126
- * Returns the classname associated to the given typography.
127
- * For example, for `Typography.title` it returns `lumx-typography-title`
128
- */
129
- const getTypographyClassName = typography => {
130
- return `lumx-typography-${typography}`;
131
- };
132
-
133
- /**
134
- * Alignments.
135
- */
136
- /**
137
- * See SCSS variable $lumx-color-variants
138
- */
139
- const ColorVariant = {
140
- N: 'N'
141
- };
142
-
143
- /** ColorPalette with all possible color variant combination */
144
-
145
- /** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
146
- function resolveColorWithVariants(colorWithVariants, colorVariant) {
147
- if (!colorWithVariants) return [undefined, colorVariant];
148
- const [color, baseColorVariant] = colorWithVariants.split('-');
149
- return [color, colorVariant || baseColorVariant];
150
- }
151
-
152
- /**
153
- * Returns the classname associated to the given color and variant.
154
- * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-L2`
155
- */
156
- function fontColorClass(propColor, propColorVariant) {
157
- if (!propColor) return undefined;
158
- const [color, colorVariant = ColorVariant.N] = resolveColorWithVariants(propColor, propColorVariant);
159
- return `lumx-color-font-${color}-${colorVariant}`;
79
+ return {
80
+ disabledStateProps,
81
+ otherProps: otherProps,
82
+ isAnyDisabled
83
+ };
160
84
  }
161
85
 
162
86
  let i = 0;
@@ -246,6 +170,9 @@ const AlertDialog = forwardRef((props, ref) => {
246
170
  color,
247
171
  icon
248
172
  } = CONFIG$1[kind] || {};
173
+ const {
174
+ block
175
+ } = useClassnames(CLASSNAME$1i);
249
176
 
250
177
  // Define a unique ID to target title and description for aria attributes.
251
178
  const generatedId = useId();
@@ -276,10 +203,9 @@ const AlertDialog = forwardRef((props, ref) => {
276
203
  'aria-describedby': descriptionId,
277
204
  ...dialogProps
278
205
  },
279
- className: classNames(className, handleBasicClasses({
280
- kind,
281
- prefix: CLASSNAME$1i
282
- })),
206
+ className: block({
207
+ [`kind-${kind}`]: Boolean(kind)
208
+ }, className),
283
209
  ...forwardedProps,
284
210
  children: [/*#__PURE__*/jsx("header", {
285
211
  children: /*#__PURE__*/jsx(Toolbar, {
@@ -380,38 +306,6 @@ function useTheme() {
380
306
  return React__default.useContext(ThemeContext);
381
307
  }
382
308
 
383
- /**
384
- * Resolve disabled state from props.
385
- * (handles `disabled`, `isDisabled` and `aria-disabled`)
386
- *
387
- * @params component props
388
- */
389
- function useDisableStateProps(props) {
390
- const {
391
- disabled,
392
- isDisabled = disabled,
393
- 'aria-disabled': ariaDisabled,
394
- onClick,
395
- onChange,
396
- ...otherProps
397
- } = props;
398
- const disabledStateContext = useDisabledStateContext();
399
- const disabledStateProps = {
400
- disabled: disabledStateContext?.state === 'disabled' || isDisabled,
401
- 'aria-disabled': ariaDisabled === true || ariaDisabled === 'true'
402
- };
403
- const isAnyDisabled = disabledStateProps['aria-disabled'] || disabledStateProps.disabled;
404
- if (!isAnyDisabled) {
405
- otherProps.onClick = onClick;
406
- otherProps.onChange = onChange;
407
- }
408
- return {
409
- disabledStateProps,
410
- otherProps: otherProps,
411
- isAnyDisabled
412
- };
413
- }
414
-
415
309
  /**
416
310
  * Component display name.
417
311
  */
@@ -481,13 +375,16 @@ const Autocomplete = forwardRef((props, ref) => {
481
375
  focusAnchorOnClose,
482
376
  ...forwardedProps
483
377
  } = otherProps;
378
+ const {
379
+ block
380
+ } = useClassnames(CLASSNAME$1h);
484
381
  const inputAnchorRef = useRef(null);
485
382
  const textFieldRef = useRef(null);
486
383
  useFocus(inputAnchorRef.current, !isOpen && shouldFocusOnClose);
487
384
  return /*#__PURE__*/jsxs("div", {
488
385
  ref: ref,
489
386
  ...forwardedProps,
490
- className: classNames(className, CLASSNAME$1h),
387
+ className: block([className]),
491
388
  children: [/*#__PURE__*/jsx(TextField, {
492
389
  ...textFieldProps,
493
390
  chips: chips,
@@ -615,11 +512,14 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
615
512
  values = DEFAULT_PROPS$13.values,
616
513
  ...forwardedProps
617
514
  } = otherProps;
515
+ const {
516
+ block
517
+ } = useClassnames(CLASSNAME$1g);
618
518
  return /*#__PURE__*/jsx(Autocomplete, {
619
519
  ref: ref,
620
520
  ...forwardedProps,
621
521
  anchorToInput: anchorToInput,
622
- className: classNames(className, CLASSNAME$1g),
522
+ className: block([className]),
623
523
  name: name,
624
524
  value: value,
625
525
  onChange: onChange,
@@ -697,18 +597,21 @@ const Avatar = forwardRef((props, ref) => {
697
597
  thumbnailProps,
698
598
  ...forwardedProps
699
599
  } = props;
600
+ const {
601
+ block,
602
+ element
603
+ } = useClassnames(CLASSNAME$1f);
700
604
  return /*#__PURE__*/jsxs("div", {
701
605
  ref: ref,
702
606
  ...forwardedProps,
703
- className: classNames(className, handleBasicClasses({
704
- prefix: CLASSNAME$1f,
705
- size,
706
- theme
707
- })),
607
+ className: block({
608
+ [`size-${size}`]: Boolean(size),
609
+ [`theme-${theme}`]: Boolean(theme)
610
+ }, className),
708
611
  children: [/*#__PURE__*/jsx(Thumbnail, {
709
612
  linkProps: linkProps,
710
613
  linkAs: linkAs,
711
- className: `${CLASSNAME$1f}__thumbnail`,
614
+ className: element('thumbnail'),
712
615
  onClick: onClick,
713
616
  onKeyPress: onKeyPress,
714
617
  ...thumbnailProps,
@@ -718,10 +621,10 @@ const Avatar = forwardRef((props, ref) => {
718
621
  alt: alt,
719
622
  theme: theme
720
623
  }), actions && /*#__PURE__*/jsx("div", {
721
- className: `${CLASSNAME$1f}__actions`,
624
+ className: element('actions'),
722
625
  children: actions
723
626
  }), badge && /*#__PURE__*/jsx("div", {
724
- className: `${CLASSNAME$1f}__badge`,
627
+ className: element('badge'),
725
628
  children: badge
726
629
  })]
727
630
  });
@@ -761,13 +664,15 @@ const Badge = forwardRef((props, ref) => {
761
664
  color = DEFAULT_PROPS$11.color,
762
665
  ...forwardedProps
763
666
  } = props;
667
+ const {
668
+ block
669
+ } = useClassnames(CLASSNAME$1e);
764
670
  return /*#__PURE__*/jsx("div", {
765
671
  ref: ref,
766
672
  ...forwardedProps,
767
- className: classNames(className, handleBasicClasses({
768
- prefix: CLASSNAME$1e,
769
- color
770
- })),
673
+ className: block({
674
+ [`color-${color}`]: Boolean(color)
675
+ }, className),
771
676
  children: children
772
677
  });
773
678
  });
@@ -786,12 +691,16 @@ const BadgeWrapper = forwardRef((props, ref) => {
786
691
  className,
787
692
  ...forwardedProps
788
693
  } = props;
694
+ const {
695
+ block,
696
+ element
697
+ } = useClassnames(CLASSNAME$1d);
789
698
  return /*#__PURE__*/jsxs("div", {
790
699
  ref: ref,
791
700
  ...forwardedProps,
792
- className: classNames(className, CLASSNAME$1d),
701
+ className: block([className]),
793
702
  children: [children, badge && /*#__PURE__*/jsx("div", {
794
- className: `${CLASSNAME$1d}__badge`,
703
+ className: element('badge'),
795
704
  children: badge
796
705
  })]
797
706
  });
@@ -873,6 +782,7 @@ const RawClickable = forwardRefPolymorphic((props, ref) => {
873
782
  const COMPONENT_NAME$1f = 'ButtonRoot';
874
783
  const BUTTON_WRAPPER_CLASSNAME = `lumx-button-wrapper`;
875
784
  const BUTTON_CLASSNAME = `lumx-button`;
785
+ const wrapperBlock = classNames.bem.block(BUTTON_WRAPPER_CLASSNAME);
876
786
 
877
787
  /**
878
788
  * Render a button wrapper with the ButtonRoot inside.
@@ -888,12 +798,11 @@ const renderButtonWrapper = props => {
888
798
  fullWidth
889
799
  } = props;
890
800
  const adaptedColor = emphasis === Emphasis.low && (color === ColorPalette.light ? ColorPalette.dark : ColorPalette.light);
891
- const wrapperClassName = classNames(handleBasicClasses({
892
- color: adaptedColor,
893
- prefix: BUTTON_WRAPPER_CLASSNAME,
894
- variant,
895
- fullWidth
896
- }));
801
+ const wrapperClassName = wrapperBlock({
802
+ [`color-${adaptedColor}`]: Boolean(adaptedColor),
803
+ [`variant-${variant}`]: Boolean(variant),
804
+ 'is-full-width': fullWidth
805
+ });
897
806
  const buttonProps = {
898
807
  ...props,
899
808
  hasBackground: false
@@ -937,6 +846,9 @@ const ButtonRoot = forwardRef((props, ref) => {
937
846
  fullWidth,
938
847
  ...forwardedProps
939
848
  } = otherProps;
849
+ const {
850
+ block
851
+ } = useClassnames(BUTTON_CLASSNAME);
940
852
  const adaptedColor = color || emphasis !== Emphasis.high && theme === Theme.dark && ColorPalette.light || emphasis === Emphasis.high && ColorPalette.primary || ColorPalette.dark;
941
853
  if (hasBackground) {
942
854
  return renderButtonWrapper({
@@ -946,20 +858,19 @@ const ButtonRoot = forwardRef((props, ref) => {
946
858
  color: adaptedColor
947
859
  });
948
860
  }
949
- const buttonClassName = classNames(className, handleBasicClasses({
950
- color: adaptedColor,
951
- emphasis,
952
- isSelected,
953
- isDisabled: props.isDisabled || props['aria-disabled'],
954
- isActive,
955
- isFocused,
956
- isHovered,
957
- prefix: BUTTON_CLASSNAME,
958
- size,
959
- theme: emphasis === Emphasis.high && theme,
960
- variant,
961
- fullWidth
962
- }));
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);
963
874
  return /*#__PURE__*/jsx(RawClickable, {
964
875
  as: linkAs || (forwardedProps.href ? 'a' : 'button'),
965
876
  ...forwardedProps,
@@ -1017,15 +928,13 @@ const Button = forwardRef((props, ref) => {
1017
928
  theme = defaultTheme,
1018
929
  ...forwardedProps
1019
930
  } = props;
1020
- const buttonClassName = classNames(className, getBasicClass({
1021
- prefix: CLASSNAME$1c,
1022
- type: 'hasLeftIcon',
1023
- value: !isEmpty(leftIcon)
1024
- }), getBasicClass({
1025
- prefix: CLASSNAME$1c,
1026
- type: 'hasRightIcon',
1027
- value: !isEmpty(rightIcon)
1028
- }));
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);
1029
938
  return /*#__PURE__*/jsxs(ButtonRoot, {
1030
939
  ref: ref,
1031
940
  emphasis,
@@ -1034,7 +943,7 @@ const Button = forwardRef((props, ref) => {
1034
943
  ...forwardedProps,
1035
944
  className: buttonClassName,
1036
945
  variant: "button",
1037
- children: [leftIcon && !isEmpty(leftIcon) &&
946
+ children: [leftIcon &&
1038
947
  /*#__PURE__*/
1039
948
  // Theme is handled in the button scss
1040
949
  jsx(ThemeProvider, {
@@ -1044,7 +953,7 @@ const Button = forwardRef((props, ref) => {
1044
953
  })
1045
954
  }), children && (isComponent(Text)(children) ? children : /*#__PURE__*/jsx("span", {
1046
955
  children: children
1047
- })), rightIcon && !isEmpty(rightIcon) &&
956
+ })), rightIcon &&
1048
957
  /*#__PURE__*/
1049
958
  // Theme is handled in the button scss
1050
959
  jsx(ThemeProvider, {
@@ -1153,10 +1062,13 @@ const ButtonGroup = forwardRef((props, ref) => {
1153
1062
  className,
1154
1063
  ...forwardedProps
1155
1064
  } = props;
1065
+ const {
1066
+ block
1067
+ } = useClassnames(CLASSNAME$1a);
1156
1068
  return /*#__PURE__*/jsx("div", {
1157
1069
  ref: ref,
1158
1070
  ...forwardedProps,
1159
- className: classNames(className, CLASSNAME$1a),
1071
+ className: block([className]),
1160
1072
  children: children
1161
1073
  });
1162
1074
  });
@@ -1164,9 +1076,6 @@ ButtonGroup.displayName = COMPONENT_NAME$1c;
1164
1076
  ButtonGroup.className = CLASSNAME$1a;
1165
1077
  ButtonGroup.defaultProps = DEFAULT_PROPS$_;
1166
1078
 
1167
- /**
1168
- * Intermediate state of checkbox.
1169
- */
1170
1079
  const INTERMEDIATE_STATE = 'intermediate';
1171
1080
 
1172
1081
  /**
@@ -1217,6 +1126,10 @@ const Checkbox = forwardRef((props, ref) => {
1217
1126
  inputProps = {},
1218
1127
  ...forwardedProps
1219
1128
  } = otherProps;
1129
+ const {
1130
+ block,
1131
+ element
1132
+ } = useClassnames(CLASSNAME$19);
1220
1133
  const localInputRef = React__default.useRef(null);
1221
1134
  const generatedInputId = useId();
1222
1135
  const inputId = id || generatedInputId;
@@ -1233,21 +1146,20 @@ const Checkbox = forwardRef((props, ref) => {
1233
1146
  return /*#__PURE__*/jsxs("div", {
1234
1147
  ref: ref,
1235
1148
  ...forwardedProps,
1236
- className: classNames(className, handleBasicClasses({
1149
+ className: block({
1237
1150
  // Whether state is intermediate class name will "-checked"
1238
- isChecked: intermediateState ? true : isChecked,
1239
- isDisabled: isAnyDisabled,
1240
- isUnchecked: !isChecked,
1241
- prefix: CLASSNAME$19,
1242
- theme
1243
- })),
1151
+ 'is-checked': Boolean(intermediateState ? true : isChecked),
1152
+ 'is-disabled': Boolean(isAnyDisabled),
1153
+ 'is-unchecked': Boolean(!isChecked),
1154
+ [`theme-${theme}`]: Boolean(theme)
1155
+ }, className),
1244
1156
  children: [/*#__PURE__*/jsxs("div", {
1245
- className: `${CLASSNAME$19}__input-wrapper`,
1157
+ className: element('input-wrapper'),
1246
1158
  children: [/*#__PURE__*/jsx("input", {
1247
1159
  ref: useMergeRefs(inputRef, localInputRef),
1248
1160
  type: "checkbox",
1249
1161
  id: inputId,
1250
- className: `${CLASSNAME$19}__input-native`,
1162
+ className: element('input-native'),
1251
1163
  ...disabledStateProps,
1252
1164
  name: name,
1253
1165
  value: value,
@@ -1258,26 +1170,26 @@ const Checkbox = forwardRef((props, ref) => {
1258
1170
  readOnly: inputProps.readOnly || disabledStateProps['aria-disabled'],
1259
1171
  ...inputProps
1260
1172
  }), /*#__PURE__*/jsxs("div", {
1261
- className: `${CLASSNAME$19}__input-placeholder`,
1173
+ className: element('input-placeholder'),
1262
1174
  children: [/*#__PURE__*/jsx("div", {
1263
- className: `${CLASSNAME$19}__input-background`
1175
+ className: element('input-background')
1264
1176
  }), /*#__PURE__*/jsx("div", {
1265
- className: `${CLASSNAME$19}__input-indicator`,
1177
+ className: element('input-indicator'),
1266
1178
  children: /*#__PURE__*/jsx(Icon, {
1267
1179
  icon: intermediateState ? mdiMinus : mdiCheck
1268
1180
  })
1269
1181
  })]
1270
1182
  })]
1271
1183
  }), /*#__PURE__*/jsxs("div", {
1272
- className: `${CLASSNAME$19}__content`,
1184
+ className: element('content'),
1273
1185
  children: [label && /*#__PURE__*/jsx(InputLabel, {
1274
1186
  htmlFor: inputId,
1275
- className: `${CLASSNAME$19}__label`,
1187
+ className: element('label'),
1276
1188
  theme: theme,
1277
1189
  children: label
1278
1190
  }), helper && /*#__PURE__*/jsx(InputHelper, {
1279
1191
  id: `${inputId}-helper`,
1280
- className: `${CLASSNAME$19}__helper`,
1192
+ className: element('helper'),
1281
1193
  theme: theme,
1282
1194
  children: helper
1283
1195
  })]
@@ -1353,6 +1265,10 @@ const Chip = forwardRef((props, ref) => {
1353
1265
  onKeyDown,
1354
1266
  ...forwardedProps
1355
1267
  } = otherProps;
1268
+ const {
1269
+ block,
1270
+ element
1271
+ } = useClassnames(CLASSNAME$18);
1356
1272
  const hasAfterClick = isFunction(onAfterClick);
1357
1273
  const hasBeforeClick = isFunction(onBeforeClick);
1358
1274
  const hasOnClick = isFunction(props.onClick);
@@ -1378,18 +1294,17 @@ const Chip = forwardRef((props, ref) => {
1378
1294
  ...forwardedProps,
1379
1295
  href: !disabledStateProps.disabled ? href : undefined,
1380
1296
  ref: ref,
1381
- className: classNames(className, handleBasicClasses({
1382
- clickable: isClickable,
1383
- color: chipColor,
1384
- isDisabled: isAnyDisabled,
1385
- hasAfter: Boolean(after),
1386
- hasBefore: Boolean(before),
1387
- highlighted: Boolean(isHighlighted),
1388
- prefix: CLASSNAME$18,
1389
- selected: Boolean(isSelected),
1390
- size,
1391
- unselected: Boolean(!isSelected)
1392
- })),
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),
1393
1308
  "aria-disabled": isClickable && isAnyDisabled || undefined,
1394
1309
  onClick: hasOnClick ? onClick : undefined,
1395
1310
  onKeyDown: handleKeyDown,
@@ -1397,20 +1312,20 @@ const Chip = forwardRef((props, ref) => {
1397
1312
  /*#__PURE__*/
1398
1313
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
1399
1314
  jsx("div", {
1400
- className: classNames(`${CLASSNAME$18}__before`, {
1401
- [`${CLASSNAME$18}__before--is-clickable`]: hasBeforeClick
1315
+ className: element('before', {
1316
+ 'is-clickable': Boolean(hasBeforeClick)
1402
1317
  }),
1403
1318
  onClick: handleOnBeforeClick,
1404
1319
  children: before
1405
1320
  }), /*#__PURE__*/jsx("div", {
1406
- className: `${CLASSNAME$18}__label`,
1321
+ className: element('label'),
1407
1322
  children: children
1408
1323
  }), after &&
1409
1324
  /*#__PURE__*/
1410
1325
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
1411
1326
  jsx("div", {
1412
- className: classNames(`${CLASSNAME$18}__after`, {
1413
- [`${CLASSNAME$18}__after--is-clickable`]: hasAfterClick
1327
+ className: element('after', {
1328
+ 'is-clickable': Boolean(hasAfterClick)
1414
1329
  }),
1415
1330
  onClick: handleOnAfterClick,
1416
1331
  children: after
@@ -1502,10 +1417,13 @@ const InternalChipGroup = forwardRef((props, ref) => {
1502
1417
  className,
1503
1418
  ...forwardedProps
1504
1419
  } = props;
1420
+ const {
1421
+ block
1422
+ } = useClassnames(CLASSNAME$17);
1505
1423
  return /*#__PURE__*/jsx("div", {
1506
1424
  ref: ref,
1507
1425
  ...forwardedProps,
1508
- className: classNames(className, CLASSNAME$17),
1426
+ className: block([className]),
1509
1427
  children: children
1510
1428
  });
1511
1429
  });
@@ -1575,66 +1493,69 @@ const CommentBlock = forwardRef((props, ref) => {
1575
1493
  ...forwardedProps
1576
1494
  } = props;
1577
1495
  const hasChildren = Children.count(children) > 0;
1496
+ const {
1497
+ block,
1498
+ element
1499
+ } = useClassnames(CLASSNAME$16);
1578
1500
  return /*#__PURE__*/jsxs("div", {
1579
1501
  ref: ref,
1580
- className: classNames(className, handleBasicClasses({
1581
- hasChildren: hasChildren && isOpen,
1582
- hasIndentedChildren: hasChildren && variant === CommentBlockVariant.indented,
1583
- hasLinearChildren: hasChildren && variant === CommentBlockVariant.linear,
1584
- isRelevant,
1585
- prefix: CLASSNAME$16,
1586
- theme
1587
- })),
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),
1588
1509
  ...forwardedProps,
1589
1510
  children: [/*#__PURE__*/jsxs("div", {
1590
- className: `${CLASSNAME$16}__wrapper`,
1511
+ className: element('wrapper'),
1591
1512
  children: [/*#__PURE__*/jsx("div", {
1592
- className: `${CLASSNAME$16}__avatar`,
1513
+ className: element('avatar'),
1593
1514
  children: /*#__PURE__*/jsx(Avatar, {
1594
1515
  ...avatarProps,
1595
1516
  size: Size.m,
1596
1517
  onClick: onClick
1597
1518
  })
1598
1519
  }), /*#__PURE__*/jsxs("div", {
1599
- className: `${CLASSNAME$16}__container`,
1520
+ className: element('container'),
1600
1521
  children: [/*#__PURE__*/jsxs("div", {
1601
- className: `${CLASSNAME$16}__content`,
1522
+ className: element('content'),
1602
1523
  children: [/*#__PURE__*/jsxs("div", {
1603
- className: `${CLASSNAME$16}__meta`,
1524
+ className: element('meta'),
1604
1525
  children: [name &&
1605
1526
  /*#__PURE__*/
1606
1527
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
1607
1528
  jsx("span", {
1608
- className: `${CLASSNAME$16}__name`,
1529
+ className: element('name'),
1609
1530
  onClick: onClick,
1610
1531
  onMouseEnter: onMouseEnter,
1611
1532
  onMouseLeave: onMouseLeave,
1612
1533
  children: name
1613
1534
  }), headerActions && /*#__PURE__*/jsx("span", {
1614
- className: `${CLASSNAME$16}__header-actions`,
1535
+ className: element('header-actions'),
1615
1536
  children: headerActions
1616
1537
  })]
1617
1538
  }), /*#__PURE__*/jsx("div", {
1618
- className: `${CLASSNAME$16}__text`,
1539
+ className: element('text'),
1619
1540
  children: text
1620
1541
  }), date && (fullDate ? /*#__PURE__*/jsx(Tooltip, {
1621
1542
  label: fullDate,
1622
1543
  placement: "top",
1623
1544
  children: /*#__PURE__*/jsx("span", {
1624
- className: `${CLASSNAME$16}__date`,
1545
+ className: element('date'),
1625
1546
  children: date
1626
1547
  })
1627
1548
  }) : /*#__PURE__*/jsx("span", {
1628
- className: `${CLASSNAME$16}__date`,
1549
+ className: element('date'),
1629
1550
  children: date
1630
1551
  }))]
1631
1552
  }), hasActions && /*#__PURE__*/jsx("div", {
1632
- className: `${CLASSNAME$16}__actions`,
1553
+ className: element('actions'),
1633
1554
  children: actions
1634
1555
  })]
1635
1556
  })]
1636
1557
  }), hasChildren && isOpen && /*#__PURE__*/jsx("div", {
1637
- className: `${CLASSNAME$16}__children`,
1558
+ className: element('children'),
1638
1559
  children: children
1639
1560
  })]
1640
1561
  });
@@ -1884,26 +1805,6 @@ function formatDayNumber(locale, date) {
1884
1805
  return formattedDate;
1885
1806
  }
1886
1807
 
1887
- /**
1888
- * Optional global `window` instance (not defined when running SSR).
1889
- */
1890
- const WINDOW = typeof window !== 'undefined' ? window : undefined;
1891
-
1892
- /**
1893
- * Optional global `document` instance (not defined when running SSR).
1894
- */
1895
- const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
1896
-
1897
- /**
1898
- * Check if we are running in a true browser
1899
- */
1900
- const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.includes('jsdom');
1901
-
1902
- /**
1903
- * Visually hidden a11y utility class name
1904
- */
1905
- const VISUALLY_HIDDEN = 'visually-hidden';
1906
-
1907
1808
  /**
1908
1809
  * Component display name.
1909
1810
  */
@@ -1939,6 +1840,10 @@ const DatePickerControlled = forwardRef((props, ref) => {
1939
1840
  const localeObj = parseLocale(locale);
1940
1841
  return getMonthCalendar(localeObj, selectedMonth, minDate, maxDate);
1941
1842
  }, [locale, minDate, maxDate, selectedMonth]);
1843
+ const {
1844
+ block,
1845
+ element
1846
+ } = useClassnames(CLASSNAME$15);
1942
1847
  const selectedYear = selectedMonth.getFullYear();
1943
1848
  const formattedYear = selectedMonth.toLocaleDateString(locale, {
1944
1849
  year: 'numeric'
@@ -1992,10 +1897,10 @@ const DatePickerControlled = forwardRef((props, ref) => {
1992
1897
  const yearLabel = getYearDisplayName(locale);
1993
1898
  return /*#__PURE__*/jsxs("div", {
1994
1899
  ref: ref,
1995
- className: `${CLASSNAME$15}`,
1900
+ className: block(),
1996
1901
  style: style,
1997
1902
  children: [/*#__PURE__*/jsx(Toolbar, {
1998
- className: `${CLASSNAME$15}__toolbar`,
1903
+ className: element('toolbar'),
1999
1904
  after: /*#__PURE__*/jsx(IconButton, {
2000
1905
  ...nextButtonProps,
2001
1906
  emphasis: Emphasis.low,
@@ -2011,11 +1916,11 @@ const DatePickerControlled = forwardRef((props, ref) => {
2011
1916
  label: /*#__PURE__*/jsxs(Fragment, {
2012
1917
  children: [/*#__PURE__*/jsx("span", {
2013
1918
  "aria-live": labelAriaLive,
2014
- className: onMonthChange ? VISUALLY_HIDDEN : '',
1919
+ className: onMonthChange ? classNames.visuallyHidden() : undefined,
2015
1920
  dir: "auto",
2016
1921
  children: monthYear
2017
1922
  }), onMonthChange && /*#__PURE__*/jsx(FlexBox, {
2018
- className: `${CLASSNAME$15}__month`,
1923
+ className: element(`month`),
2019
1924
  orientation: "horizontal",
2020
1925
  hAlign: "center",
2021
1926
  gap: "regular",
@@ -2030,7 +1935,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
2030
1935
  min: 0,
2031
1936
  onBlur: updateYear,
2032
1937
  onKeyPress: updateYearOnEnterPressed,
2033
- className: `${CLASSNAME$15}__year`
1938
+ className: element(`year`)
2034
1939
  }, "year") : /*#__PURE__*/jsx(Text, {
2035
1940
  as: "p",
2036
1941
  children: part
@@ -2038,17 +1943,17 @@ const DatePickerControlled = forwardRef((props, ref) => {
2038
1943
  })]
2039
1944
  })
2040
1945
  }), /*#__PURE__*/jsxs("div", {
2041
- className: `${CLASSNAME$15}__calendar`,
1946
+ className: element(`calendar`),
2042
1947
  children: [/*#__PURE__*/jsx("div", {
2043
- className: `${CLASSNAME$15}__week-days ${CLASSNAME$15}__days-wrapper`,
1948
+ className: element(`week-days`, [element(`days-wrapper`)]),
2044
1949
  children: weekDays.map(({
2045
1950
  letter,
2046
1951
  number,
2047
1952
  long
2048
1953
  }) => /*#__PURE__*/jsxs("div", {
2049
- className: `${CLASSNAME$15}__day-wrapper`,
1954
+ className: element(`day-wrapper`),
2050
1955
  children: [/*#__PURE__*/jsx("span", {
2051
- className: `${CLASSNAME$15}__week-day`,
1956
+ className: element(`week-day`),
2052
1957
  "aria-hidden": true,
2053
1958
  children: letter.toLocaleUpperCase()
2054
1959
  }), /*#__PURE__*/jsx("span", {
@@ -2057,7 +1962,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
2057
1962
  })]
2058
1963
  }, number))
2059
1964
  }), /*#__PURE__*/jsx("div", {
2060
- className: `${CLASSNAME$15}__month-days ${CLASSNAME$15}__days-wrapper`,
1965
+ className: element(`month-days`, [element(`days-wrapper`)]),
2061
1966
  children: weeks.flatMap((week, weekIndex) => {
2062
1967
  return weekDays.map((weekDay, dayIndex) => {
2063
1968
  const {
@@ -2068,11 +1973,11 @@ const DatePickerControlled = forwardRef((props, ref) => {
2068
1973
  const isToday = !isOutOfRange && date && isSameDay(date, new Date());
2069
1974
  const isSelected = date && value && isSameDay(value, date);
2070
1975
  return /*#__PURE__*/jsx("div", {
2071
- className: `${CLASSNAME$15}__day-wrapper`,
1976
+ className: element(`day-wrapper`),
2072
1977
  children: date && /*#__PURE__*/jsxs(Button, {
2073
1978
  ref: isSelected || !value && isToday ? todayOrSelectedDateRef : null,
2074
- className: classNames(`${CLASSNAME$15}__month-day`, {
2075
- [`${CLASSNAME$15}__month-day--is-today`]: isToday
1979
+ className: element(`month-day`, {
1980
+ 'is-today': isToday
2076
1981
  }),
2077
1982
  disabled: isOutOfRange,
2078
1983
  isSelected: isSelected,
@@ -2082,7 +1987,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
2082
1987
  "aria-hidden": true,
2083
1988
  children: formatDayNumber(locale, date)
2084
1989
  }), /*#__PURE__*/jsx("span", {
2085
- className: VISUALLY_HIDDEN,
1990
+ className: classNames.visuallyHidden(),
2086
1991
  children: date.toLocaleDateString(locale, {
2087
1992
  day: 'numeric',
2088
1993
  month: 'long',
@@ -2245,6 +2150,21 @@ const DatePickerField = forwardRef((props, ref) => {
2245
2150
  });
2246
2151
  DatePickerField.displayName = COMPONENT_NAME$15;
2247
2152
 
2153
+ /**
2154
+ * Optional global `window` instance (not defined when running SSR).
2155
+ */
2156
+ const WINDOW = typeof window !== 'undefined' ? window : undefined;
2157
+
2158
+ /**
2159
+ * Optional global `document` instance (not defined when running SSR).
2160
+ */
2161
+ const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
2162
+
2163
+ /**
2164
+ * Check if we are running in a true browser
2165
+ */
2166
+ const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.includes('jsdom');
2167
+
2248
2168
  /**
2249
2169
  * Keep track of listeners, only the last registered listener gets activated at any point (previously registered
2250
2170
  * listener are disabled).
@@ -2779,6 +2699,11 @@ const Dialog = forwardRef((props, ref) => {
2779
2699
  preventCloseOnEscape,
2780
2700
  ...forwardedProps
2781
2701
  } = props;
2702
+ // eslint-disable-next-line react-hooks/rules-of-hooks
2703
+ const {
2704
+ block,
2705
+ element
2706
+ } = useClassnames(CLASSNAME$14);
2782
2707
 
2783
2708
  // eslint-disable-next-line react-hooks/rules-of-hooks
2784
2709
  const previousOpen = React__default.useRef(isOpen);
@@ -2845,24 +2770,23 @@ const Dialog = forwardRef((props, ref) => {
2845
2770
  children: /*#__PURE__*/jsxs("div", {
2846
2771
  ref: mergeRefs(rootRef, ref),
2847
2772
  ...forwardedProps,
2848
- className: classNames(className, handleBasicClasses({
2849
- isHidden: !isOpen,
2850
- isLoading,
2851
- isShown: isOpen || isVisible,
2852
- prefix: CLASSNAME$14,
2853
- size
2854
- })),
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),
2855
2779
  style: {
2856
2780
  zIndex
2857
2781
  },
2858
2782
  children: [/*#__PURE__*/jsx("div", {
2859
- className: `${CLASSNAME$14}__overlay`
2783
+ className: element('overlay')
2860
2784
  }), /*#__PURE__*/jsx(HeadingLevelProvider, {
2861
2785
  level: 2,
2862
2786
  children: /*#__PURE__*/jsx(ThemeProvider, {
2863
2787
  value: undefined,
2864
2788
  children: /*#__PURE__*/jsx("div", {
2865
- className: `${CLASSNAME$14}__container`,
2789
+ className: element('container'),
2866
2790
  role: "dialog",
2867
2791
  "aria-modal": "true",
2868
2792
  ...dialogProps,
@@ -2871,28 +2795,32 @@ const Dialog = forwardRef((props, ref) => {
2871
2795
  childrenRefs: clickAwayRefs,
2872
2796
  parentRef: rootRef,
2873
2797
  children: /*#__PURE__*/jsxs("section", {
2874
- className: `${CLASSNAME$14}__wrapper`,
2798
+ className: element('wrapper'),
2875
2799
  ref: wrapperRef,
2876
2800
  children: [(header || headerChildContent) && /*#__PURE__*/jsxs("header", {
2877
2801
  ...headerChildProps,
2878
- className: classNames(`${CLASSNAME$14}__header`, (forceHeaderDivider || hasTopIntersection) && `${CLASSNAME$14}__header--has-divider`, headerChildProps?.className),
2802
+ className: element('header', {
2803
+ 'has-divider': Boolean(forceHeaderDivider || hasTopIntersection)
2804
+ }, [headerChildProps?.className]),
2879
2805
  children: [header, headerChildContent]
2880
2806
  }), /*#__PURE__*/jsxs("div", {
2881
2807
  ref: mergeRefs(contentRef, localContentRef),
2882
- className: `${CLASSNAME$14}__content`,
2808
+ className: element('content'),
2883
2809
  children: [/*#__PURE__*/jsx("div", {
2884
- className: `${CLASSNAME$14}__sentinel ${CLASSNAME$14}__sentinel--top`,
2810
+ className: element('sentinel', 'top'),
2885
2811
  ref: setSentinelTop
2886
2812
  }), content, /*#__PURE__*/jsx("div", {
2887
- className: `${CLASSNAME$14}__sentinel ${CLASSNAME$14}__sentinel--bottom`,
2813
+ className: element('sentinel', 'bottom'),
2888
2814
  ref: setSentinelBottom
2889
2815
  })]
2890
2816
  }), (footer || footerChildContent) && /*#__PURE__*/jsxs("footer", {
2891
2817
  ...footerChildProps,
2892
- className: classNames(`${CLASSNAME$14}__footer`, (forceFooterDivider || hasBottomIntersection) && `${CLASSNAME$14}__footer--has-divider`, footerChildProps?.className),
2818
+ className: element('footer', {
2819
+ 'has-divider': Boolean(forceFooterDivider || hasBottomIntersection)
2820
+ }, [footerChildProps?.className]),
2893
2821
  children: [footer, footerChildContent]
2894
2822
  }), isLoading && /*#__PURE__*/jsx("div", {
2895
- className: `${CLASSNAME$14}__progress-overlay`,
2823
+ className: element('progress-overlay'),
2896
2824
  children: /*#__PURE__*/jsx(Progress, {
2897
2825
  variant: ProgressVariant.circular
2898
2826
  })
@@ -2938,13 +2866,15 @@ const Divider = forwardRef((props, ref) => {
2938
2866
  theme = defaultTheme,
2939
2867
  ...forwardedProps
2940
2868
  } = props;
2869
+ const {
2870
+ block
2871
+ } = useClassnames(CLASSNAME$13);
2941
2872
  return /*#__PURE__*/jsx("hr", {
2942
2873
  ref: ref,
2943
2874
  ...forwardedProps,
2944
- className: classNames(className, handleBasicClasses({
2945
- prefix: CLASSNAME$13,
2946
- theme
2947
- }))
2875
+ className: block({
2876
+ [`theme-${theme}`]: Boolean(theme)
2877
+ }, className)
2948
2878
  });
2949
2879
  });
2950
2880
  Divider.displayName = COMPONENT_NAME$13;
@@ -2975,13 +2905,15 @@ const DragHandle = forwardRef((props, ref) => {
2975
2905
  theme = defaultTheme,
2976
2906
  ...forwardedProps
2977
2907
  } = props;
2908
+ const {
2909
+ block
2910
+ } = useClassnames(CLASSNAME$12);
2978
2911
  return /*#__PURE__*/jsx("div", {
2979
2912
  ref: ref,
2980
2913
  ...forwardedProps,
2981
- className: classNames(className, handleBasicClasses({
2982
- prefix: CLASSNAME$12,
2983
- theme
2984
- })),
2914
+ className: block({
2915
+ [`theme-${theme}`]: Boolean(theme)
2916
+ }, className),
2985
2917
  children: /*#__PURE__*/jsx(Icon, {
2986
2918
  icon: mdiDragVertical,
2987
2919
  color: theme === Theme.dark ? ColorPalette.light : ColorPalette.dark,
@@ -3191,12 +3123,15 @@ const InternalList = forwardRef((props, ref) => {
3191
3123
  tabIndex = DEFAULT_PROPS$T.tabIndex,
3192
3124
  ...forwardedProps
3193
3125
  } = props;
3126
+ const {
3127
+ block
3128
+ } = useClassnames(CLASSNAME$11);
3129
+ const padding = itemPadding ?? (isClickable ? Size.big : undefined);
3194
3130
  return /*#__PURE__*/jsx("ul", {
3195
3131
  ...forwardedProps,
3196
- className: classNames(className, handleBasicClasses({
3197
- prefix: CLASSNAME$11,
3198
- itemPadding: itemPadding ?? (isClickable ? Size.big : undefined)
3199
- })),
3132
+ className: block({
3133
+ [`item-padding-${padding}`]: Boolean(padding)
3134
+ }, className),
3200
3135
  tabIndex: tabIndex,
3201
3136
  ref: ref,
3202
3137
  children: children
@@ -5659,6 +5594,10 @@ const DEFAULT_PROPS$S = {
5659
5594
 
5660
5595
  // Inner component (must be wrapped before export)
5661
5596
  const _InnerPopover = forwardRef((props, ref) => {
5597
+ const {
5598
+ block,
5599
+ element
5600
+ } = useClassnames(CLASSNAME$10);
5662
5601
  const {
5663
5602
  anchorRef,
5664
5603
  as: Component = 'div',
@@ -5724,13 +5663,12 @@ const _InnerPopover = forwardRef((props, ref) => {
5724
5663
  children: /*#__PURE__*/jsxs(Component, {
5725
5664
  ...forwardedProps,
5726
5665
  ref: mergedRefs,
5727
- className: classNames(className, handleBasicClasses({
5728
- prefix: CLASSNAME$10,
5729
- theme,
5730
- elevation: Math.min(elevation || 0, 5),
5731
- position,
5732
- isInitializing: !styles.popover?.transform
5733
- })),
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),
5734
5672
  style: styles.popover,
5735
5673
  ...attributes.popper,
5736
5674
  children: [unmountSentinel, /*#__PURE__*/jsxs(ClickAwayProvider, {
@@ -5738,7 +5676,7 @@ const _InnerPopover = forwardRef((props, ref) => {
5738
5676
  childrenRefs: clickAwayRefs,
5739
5677
  children: [hasArrow && /*#__PURE__*/jsx("div", {
5740
5678
  ref: setArrowElement,
5741
- className: `${CLASSNAME$10}__arrow`,
5679
+ className: element('arrow'),
5742
5680
  style: styles.arrow,
5743
5681
  children: /*#__PURE__*/jsx("svg", {
5744
5682
  viewBox: "0 0 14 14",
@@ -5865,6 +5803,10 @@ const Dropdown = forwardRef((props, ref) => {
5865
5803
  } = props;
5866
5804
  const innerRef = useRef(null);
5867
5805
  const listElement = useRef(null);
5806
+ const {
5807
+ block,
5808
+ element
5809
+ } = useClassnames(CLASSNAME$$);
5868
5810
  useInfiniteScroll(innerRef, onInfiniteScroll);
5869
5811
  const popperElement = useMemo(() => {
5870
5812
  return !Array.isArray(children) && isComponent(List)(children) ? /*#__PURE__*/cloneElement(children, {
@@ -5884,7 +5826,7 @@ const Dropdown = forwardRef((props, ref) => {
5884
5826
  ...forwardedProps,
5885
5827
  focusAnchorOnClose: focusAnchorOnClose,
5886
5828
  anchorRef: anchorRef,
5887
- className: classNames(className, CLASSNAME$$),
5829
+ className: block([className]),
5888
5830
  elevation: 0,
5889
5831
  closeOnClickAway: closeOnClickAway,
5890
5832
  closeOnEscape: closeOnEscape,
@@ -5897,7 +5839,7 @@ const Dropdown = forwardRef((props, ref) => {
5897
5839
  placement: placement,
5898
5840
  zIndex: zIndex,
5899
5841
  children: /*#__PURE__*/jsx("div", {
5900
- className: `${CLASSNAME$$}__menu`,
5842
+ className: element('menu'),
5901
5843
  ref: innerRef,
5902
5844
  children: popperElement
5903
5845
  })
@@ -5951,6 +5893,10 @@ const ExpansionPanel = forwardRef((props, ref) => {
5951
5893
  toggleButtonProps,
5952
5894
  ...forwardedProps
5953
5895
  } = props;
5896
+ const {
5897
+ block,
5898
+ element
5899
+ } = useClassnames(CLASSNAME$_);
5954
5900
  const children = Children.toArray(anyChildren);
5955
5901
 
5956
5902
  // Partition children by types.
@@ -5958,8 +5904,9 @@ const ExpansionPanel = forwardRef((props, ref) => {
5958
5904
 
5959
5905
  // Either take the header in children or create one with the label.
5960
5906
  const headerProps = /*#__PURE__*/React__default.isValidElement(header) ? header.props : {};
5961
- const headerContent = !isEmpty(headerProps.children) ? headerProps.children : /*#__PURE__*/jsx("span", {
5962
- className: `${CLASSNAME$_}__label`,
5907
+ const hasHeaderChildren = React__default.Children.count(headerProps.children) > 0;
5908
+ const headerContent = hasHeaderChildren ? headerProps.children : /*#__PURE__*/jsx("span", {
5909
+ className: element('label'),
5963
5910
  children: label
5964
5911
  });
5965
5912
  const toggleOpen = event => {
@@ -5975,16 +5922,15 @@ const ExpansionPanel = forwardRef((props, ref) => {
5975
5922
  }
5976
5923
  };
5977
5924
  const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
5978
- const rootClassName = classNames(className, handleBasicClasses({
5979
- hasBackground,
5980
- hasHeader: Boolean(!isEmpty(headerProps.children)),
5981
- hasHeaderDivider,
5982
- isClose: !isOpen,
5983
- isDraggable: Boolean(dragHandle),
5984
- isOpen,
5985
- prefix: CLASSNAME$_,
5986
- theme
5987
- }));
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);
5988
5934
  const wrapperRef = useRef(null);
5989
5935
 
5990
5936
  // Children stay visible while the open/close transition is running
@@ -6019,17 +5965,17 @@ const ExpansionPanel = forwardRef((props, ref) => {
6019
5965
  ...forwardedProps,
6020
5966
  className: rootClassName,
6021
5967
  children: [/*#__PURE__*/jsxs("header", {
6022
- className: `${CLASSNAME$_}__header`,
5968
+ className: element('header'),
6023
5969
  onClick: toggleOpen,
6024
5970
  children: [dragHandle && /*#__PURE__*/jsx("div", {
6025
- className: `${CLASSNAME$_}__header-drag`,
5971
+ className: element('header-drag'),
6026
5972
  children: dragHandle
6027
5973
  }), /*#__PURE__*/jsx("div", {
6028
5974
  ...headerProps,
6029
- className: `${CLASSNAME$_}__header-content`,
5975
+ className: element('header-content'),
6030
5976
  children: headerContent
6031
5977
  }), /*#__PURE__*/jsx("div", {
6032
- className: `${CLASSNAME$_}__header-toggle`,
5978
+ className: element('header-toggle'),
6033
5979
  children: /*#__PURE__*/jsx(IconButton, {
6034
5980
  ...toggleButtonProps,
6035
5981
  color: color,
@@ -6039,15 +5985,15 @@ const ExpansionPanel = forwardRef((props, ref) => {
6039
5985
  })
6040
5986
  })]
6041
5987
  }), /*#__PURE__*/jsx("div", {
6042
- className: `${CLASSNAME$_}__wrapper`,
5988
+ className: element('wrapper'),
6043
5989
  ref: wrapperRef,
6044
5990
  children: (isOpen || isChildrenVisible) && /*#__PURE__*/jsxs("div", {
6045
- className: `${CLASSNAME$_}__container`,
5991
+ className: element('container'),
6046
5992
  children: [/*#__PURE__*/jsx("div", {
6047
- className: `${CLASSNAME$_}__content`,
5993
+ className: element('content'),
6048
5994
  children: content
6049
5995
  }), footer && /*#__PURE__*/jsx("div", {
6050
- className: `${CLASSNAME$_}__footer`,
5996
+ className: element('footer'),
6051
5997
  children: footer
6052
5998
  })]
6053
5999
  })
@@ -6082,23 +6028,26 @@ const Flag = forwardRef((props, ref) => {
6082
6028
  } = props;
6083
6029
  const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
6084
6030
  const isTruncated = !!truncate;
6031
+ const {
6032
+ block,
6033
+ element
6034
+ } = useClassnames(CLASSNAME$Z);
6085
6035
  return /*#__PURE__*/jsxs("div", {
6086
6036
  ...forwardedProps,
6087
- className: classNames(className, handleBasicClasses({
6088
- prefix: CLASSNAME$Z,
6089
- color: flagColor,
6090
- isTruncated
6091
- })),
6037
+ className: block({
6038
+ [`color-${flagColor}`]: Boolean(flagColor),
6039
+ 'is-truncated': isTruncated
6040
+ }, className),
6092
6041
  ref: ref,
6093
6042
  children: [icon && /*#__PURE__*/jsx(Icon, {
6094
6043
  icon: icon,
6095
6044
  size: Size.xxs,
6096
- className: `${CLASSNAME$Z}__icon`
6045
+ className: element('icon')
6097
6046
  }), /*#__PURE__*/jsx(Text, {
6098
6047
  as: "span",
6099
6048
  truncate: isTruncated,
6100
6049
  typography: "overline",
6101
- className: `${CLASSNAME$Z}__label`,
6050
+ className: element('label'),
6102
6051
  children: label
6103
6052
  })]
6104
6053
  });
@@ -6139,16 +6088,27 @@ const FlexBox = forwardRef((props, ref) => {
6139
6088
  wrap,
6140
6089
  ...forwardedProps
6141
6090
  } = 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
+ }), {});
6142
6099
  return /*#__PURE__*/jsx(Component, {
6143
6100
  ref: ref,
6144
6101
  ...forwardedProps,
6145
- className: classNames(className, handleBasicClasses({
6146
- prefix: CLASSNAME$Y,
6147
- orientation: orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null),
6148
- vAlign,
6149
- hAlign,
6150
- gap
6151
- }), wrap && `${CLASSNAME$Y}--wrap`, fillSpace && `${CLASSNAME$Y}--fill-space`, noShrink && `${CLASSNAME$Y}--no-shrink`, marginAuto && castArray(marginAuto).map(align => `${CLASSNAME$Y}--margin-auto-${align}`)),
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),
6152
6112
  children: children
6153
6113
  });
6154
6114
  });
@@ -6203,6 +6163,10 @@ const BaseGenericBlock = forwardRef((props, ref) => {
6203
6163
  contentProps,
6204
6164
  ...forwardedProps
6205
6165
  } = props;
6166
+ const {
6167
+ block,
6168
+ element
6169
+ } = useClassnames(CLASSNAME$X);
6206
6170
  const sections = React__default.useMemo(() => {
6207
6171
  // Split children by section type
6208
6172
  const [[figureChild], [contentChild], [actionsChild], ...otherChildren] = partitionMulti(Children.toArray(children), [isFigure, isContent, isActions]);
@@ -6218,7 +6182,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
6218
6182
  }, [children]);
6219
6183
  return /*#__PURE__*/jsxs(FlexBox, {
6220
6184
  ref: ref,
6221
- className: classNames(className, CLASSNAME$X),
6185
+ className: block([className]),
6222
6186
  gap: gap,
6223
6187
  orientation: orientation,
6224
6188
  ...forwardedProps,
@@ -6228,7 +6192,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
6228
6192
  hAlign: forwardedProps.hAlign,
6229
6193
  ...figureProps,
6230
6194
  ...sections.figureChildProps,
6231
- className: classNames(figureProps?.className, sections.figureChildProps?.className, `${CLASSNAME$X}__figure`),
6195
+ className: element('figure', [figureProps?.className, sections.figureChildProps?.className]),
6232
6196
  children: [figure, sections.figureChildProps?.children]
6233
6197
  }), (sections.contentChildProps?.children || sections.otherChildren.length > 0) && /*#__PURE__*/jsxs(FlexBox, {
6234
6198
  ref: sections.contentChild?.ref,
@@ -6238,7 +6202,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
6238
6202
  hAlign: forwardedProps.hAlign,
6239
6203
  ...contentProps,
6240
6204
  ...sections.contentChildProps,
6241
- className: classNames(contentProps?.className, sections.contentChildProps?.className, `${CLASSNAME$X}__content`),
6205
+ className: element('content', [contentProps?.className, sections.contentChildProps?.className]),
6242
6206
  children: [sections.contentChildProps?.children, sections.otherChildren]
6243
6207
  }), (actions || sections.actionsChildProps?.children) && /*#__PURE__*/jsxs(FlexBox, {
6244
6208
  ref: sections.actionsChild?.ref,
@@ -6246,7 +6210,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
6246
6210
  hAlign: forwardedProps.hAlign,
6247
6211
  ...actionsProps,
6248
6212
  ...sections.actionsChildProps,
6249
- className: classNames(actionsProps?.className, sections.actionsChildProps?.className, `${CLASSNAME$X}__actions`),
6213
+ className: element('actions', [actionsProps?.className, sections.actionsChildProps?.className]),
6250
6214
  children: [actions, sections.actionsChildProps?.children]
6251
6215
  })]
6252
6216
  });
@@ -6292,7 +6256,7 @@ const useOverflowTooltipLabel = content => {
6292
6256
  // Not inside a tooltip
6293
6257
  !parentTooltip && labelElement &&
6294
6258
  // Not inside a visually hidden
6295
- !labelElement?.closest(`.${VISUALLY_HIDDEN}`) &&
6259
+ !labelElement?.closest(`.${classNames.visuallyHidden()}`) &&
6296
6260
  // Text overflows
6297
6261
  labelElement.offsetWidth < labelElement.scrollWidth) {
6298
6262
  // Set tooltip label
@@ -6357,7 +6321,9 @@ const Text = forwardRef((props, ref) => {
6357
6321
  style,
6358
6322
  ...forwardedProps
6359
6323
  } = props;
6360
- const typographyClass = typography && getTypographyClassName(typography);
6324
+ const {
6325
+ block
6326
+ } = useClassnames(CLASSNAME$W);
6361
6327
 
6362
6328
  // Truncate mode
6363
6329
  const truncateLinesStyle = typeof truncate === 'object' && truncate.lines > 1 && {
@@ -6380,11 +6346,11 @@ const Text = forwardRef((props, ref) => {
6380
6346
  } = useOverflowTooltipLabel(children);
6381
6347
  return /*#__PURE__*/jsx(Component, {
6382
6348
  ref: useMergeRefs(ref, labelRef),
6383
- className: classNames(className, handleBasicClasses({
6384
- prefix: CLASSNAME$W,
6385
- isTruncated: isTruncated && !isTruncatedMultiline,
6386
- isTruncatedMultiline
6387
- }), typographyClass, fontColorClass(color, colorVariant), noWrap && `${CLASSNAME$W}--no-wrap`),
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]),
6388
6354
  title: tooltipLabel,
6389
6355
  style: {
6390
6356
  ...truncateLinesStyle,
@@ -6461,10 +6427,13 @@ const Heading = forwardRef((props, ref) => {
6461
6427
  const {
6462
6428
  headingElement
6463
6429
  } = useHeadingLevel();
6430
+ const {
6431
+ block
6432
+ } = useClassnames(CLASSNAME$V);
6464
6433
  const computedHeadingElement = as || headingElement;
6465
6434
  return /*#__PURE__*/jsx(Text, {
6466
6435
  ref: ref,
6467
- className: classNames(className, CLASSNAME$V),
6436
+ className: block([className]),
6468
6437
  as: computedHeadingElement,
6469
6438
  typography: DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement],
6470
6439
  ...forwardedProps,
@@ -6534,19 +6503,20 @@ const Grid = forwardRef((props, ref) => {
6534
6503
  wrap = DEFAULT_PROPS$L.wrap,
6535
6504
  ...forwardedProps
6536
6505
  } = props;
6506
+ const {
6507
+ block
6508
+ } = useClassnames(CLASSNAME$U);
6537
6509
  return /*#__PURE__*/jsx("div", {
6538
6510
  ref: ref,
6539
6511
  ...forwardedProps,
6540
- className: classNames(className, `${CLASSNAME$U}-container`, {
6541
- [`${CLASSNAME$U}--h-align-${hAlign}`]: hAlign
6542
- }, {
6543
- [`${CLASSNAME$U}--v-align-${vAlign}`]: vAlign
6544
- }, handleBasicClasses({
6545
- prefix: CLASSNAME$U,
6546
- orientation,
6547
- wrap,
6548
- gutter
6549
- })),
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),
6550
6520
  children: children
6551
6521
  });
6552
6522
  });
@@ -6580,15 +6550,17 @@ const GridItem = forwardRef((props, ref) => {
6580
6550
  order,
6581
6551
  ...forwardedProps
6582
6552
  } = props;
6553
+ const {
6554
+ block
6555
+ } = useClassnames(CLASSNAME$T);
6583
6556
  return /*#__PURE__*/jsx("div", {
6584
6557
  ref: ref,
6585
6558
  ...forwardedProps,
6586
- className: classNames(className, handleBasicClasses({
6587
- prefix: CLASSNAME$T,
6588
- width,
6589
- order,
6590
- align
6591
- })),
6559
+ className: block({
6560
+ [`width-${width}`]: Boolean(width),
6561
+ [`order-${order}`]: Boolean(order),
6562
+ [`align-${align}`]: Boolean(align)
6563
+ }, className),
6592
6564
  children: children
6593
6565
  });
6594
6566
  });
@@ -6630,10 +6602,13 @@ const GridColumn = forwardRef((props, ref) => {
6630
6602
  style = {},
6631
6603
  ...forwardedProps
6632
6604
  } = props;
6605
+ const {
6606
+ block
6607
+ } = useClassnames(CLASSNAME$S);
6633
6608
  return /*#__PURE__*/jsx(Component, {
6634
6609
  ...forwardedProps,
6635
6610
  ref: ref,
6636
- className: classNames(className, CLASSNAME$S),
6611
+ className: block([className]),
6637
6612
  style: {
6638
6613
  ...style,
6639
6614
  ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
@@ -6647,6 +6622,13 @@ GridColumn.displayName = COMPONENT_NAME$S;
6647
6622
  GridColumn.className = CLASSNAME$S;
6648
6623
  GridColumn.defaultProps = DEFAULT_PROPS$K;
6649
6624
 
6625
+ /** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
6626
+ function resolveColorWithVariants(colorWithVariants, colorVariant) {
6627
+ if (!colorWithVariants) return [undefined, colorVariant];
6628
+ const [color, baseColorVariant] = colorWithVariants.split('-');
6629
+ return [color, colorVariant || baseColorVariant];
6630
+ }
6631
+
6650
6632
  /**
6651
6633
  * Component display name.
6652
6634
  */
@@ -6682,6 +6664,9 @@ const Icon = forwardRef((props, ref) => {
6682
6664
  alt,
6683
6665
  ...forwardedProps
6684
6666
  } = props;
6667
+ const {
6668
+ block
6669
+ } = useClassnames(CLASSNAME$R);
6685
6670
  const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
6686
6671
 
6687
6672
  // Color
@@ -6710,14 +6695,16 @@ const Icon = forwardRef((props, ref) => {
6710
6695
  return /*#__PURE__*/jsx("i", {
6711
6696
  ref: ref,
6712
6697
  ...forwardedProps,
6713
- className: classNames(className, handleBasicClasses({
6714
- color: iconColor,
6715
- colorVariant: iconColorVariant,
6716
- hasShape,
6717
- prefix: CLASSNAME$R,
6718
- theme,
6719
- size: iconSize
6720
- }), !hasShape && `${CLASSNAME$R}--no-shape`, !hasShape && iconColor === ColorPalette.yellow && icon === mdiAlertCircle && `${CLASSNAME$R}--has-dark-layer`, `${CLASSNAME$R}--path`),
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),
6721
6708
  children: /*#__PURE__*/jsx("svg", {
6722
6709
  "aria-hidden": alt ? undefined : 'true',
6723
6710
  role: alt ? 'img' : undefined,
@@ -6744,7 +6731,7 @@ Icon.defaultProps = DEFAULT_PROPS$J;
6744
6731
  const ImageCaption = props => {
6745
6732
  const defaultTheme = useTheme();
6746
6733
  const {
6747
- baseClassName,
6734
+ className,
6748
6735
  theme = defaultTheme,
6749
6736
  as = 'figcaption',
6750
6737
  title,
@@ -6752,7 +6739,9 @@ const ImageCaption = props => {
6752
6739
  description,
6753
6740
  descriptionProps,
6754
6741
  tags,
6742
+ tagsProps,
6755
6743
  captionStyle,
6744
+ captionProps,
6756
6745
  align,
6757
6746
  truncate
6758
6747
  } = props;
@@ -6773,7 +6762,7 @@ const ImageCaption = props => {
6773
6762
  };
6774
6763
  return /*#__PURE__*/jsxs(FlexBox, {
6775
6764
  as: as,
6776
- className: classNames(baseClassName && `${baseClassName}__wrapper`),
6765
+ className: className,
6777
6766
  style: captionStyle,
6778
6767
  orientation: "vertical",
6779
6768
  vAlign: align,
@@ -6781,25 +6770,23 @@ const ImageCaption = props => {
6781
6770
  gap: "regular",
6782
6771
  children: [(title || description) && /*#__PURE__*/jsxs(Text, {
6783
6772
  as: "p",
6784
- className: classNames(baseClassName && `${baseClassName}__caption`),
6773
+ ...captionProps,
6785
6774
  truncate: truncate,
6786
6775
  ...baseColor,
6787
6776
  children: [title && /*#__PURE__*/jsx(Text, {
6788
6777
  ...titleProps,
6789
6778
  as: "span",
6790
- className: classNames(titleProps?.className, baseClassName && `${baseClassName}__title`),
6791
6779
  typography: "subtitle1",
6792
6780
  ...titleColor,
6793
6781
  children: title
6794
6782
  }), ' ', description && /*#__PURE__*/jsx(Text, {
6795
6783
  ...descriptionProps,
6796
6784
  as: "span",
6797
- className: classNames(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
6798
6785
  typography: "body1",
6799
6786
  ...descriptionContent
6800
6787
  })]
6801
6788
  }), tags && /*#__PURE__*/jsx(FlexBox, {
6802
- className: classNames(baseClassName && `${baseClassName}__tags`),
6789
+ ...tagsProps,
6803
6790
  orientation: "horizontal",
6804
6791
  vAlign: align,
6805
6792
  children: tags
@@ -6866,19 +6853,23 @@ const ImageBlock = forwardRef((props, ref) => {
6866
6853
  titleProps,
6867
6854
  ...forwardedProps
6868
6855
  } = props;
6856
+ const {
6857
+ block,
6858
+ element
6859
+ } = useClassnames(CLASSNAME$Q);
6869
6860
  return /*#__PURE__*/jsxs("figure", {
6870
6861
  ref: ref,
6871
6862
  ...forwardedProps,
6872
- className: classNames(className, handleBasicClasses({
6873
- prefix: CLASSNAME$Q,
6874
- captionPosition,
6875
- align,
6876
- size,
6877
- theme
6878
- }), fillHeight && `${CLASSNAME$Q}--fill-height`),
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),
6879
6870
  children: [/*#__PURE__*/jsx(Thumbnail, {
6880
6871
  ...thumbnailProps,
6881
- className: classNames(`${CLASSNAME$Q}__image`, thumbnailProps?.className),
6872
+ className: element('image', [thumbnailProps?.className]),
6882
6873
  fillHeight: fillHeight,
6883
6874
  align: align,
6884
6875
  image: image,
@@ -6887,18 +6878,30 @@ const ImageBlock = forwardRef((props, ref) => {
6887
6878
  alt: alt || title
6888
6879
  }), /*#__PURE__*/jsx(ImageCaption, {
6889
6880
  as: "figcaption",
6890
- baseClassName: CLASSNAME$Q,
6881
+ className: element('wrapper'),
6891
6882
  theme: theme,
6892
6883
  title: title,
6893
- titleProps: titleProps,
6884
+ titleProps: {
6885
+ ...titleProps,
6886
+ className: element('title', [titleProps?.className])
6887
+ },
6894
6888
  description: description,
6895
- descriptionProps: descriptionProps,
6889
+ descriptionProps: {
6890
+ ...descriptionProps,
6891
+ className: element('description', [descriptionProps?.className])
6892
+ },
6896
6893
  tags: tags,
6894
+ tagsProps: {
6895
+ className: element('tags')
6896
+ },
6897
6897
  captionStyle: captionStyle,
6898
+ captionProps: {
6899
+ className: element('caption')
6900
+ },
6898
6901
  align: align,
6899
6902
  truncate: captionPosition === 'over'
6900
6903
  }), actions && /*#__PURE__*/jsx("div", {
6901
- className: `${CLASSNAME$Q}__actions`,
6904
+ className: element('actions'),
6902
6905
  children: actions
6903
6906
  })]
6904
6907
  });
@@ -7173,6 +7176,9 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
7173
7176
  loadingPlaceholderImageRef
7174
7177
  }
7175
7178
  } = props;
7179
+ const {
7180
+ element
7181
+ } = useClassnames(CLASSNAME$P);
7176
7182
 
7177
7183
  // Get scroll area size
7178
7184
  const scrollAreaRef = React__default.useRef(null);
@@ -7225,12 +7231,12 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
7225
7231
  // Make it accessible to keyboard nav when the zone is scrollable
7226
7232
  ,
7227
7233
  tabIndex: isScrollable ? 0 : undefined,
7228
- className: `${CLASSNAME$P}__image-slide`,
7234
+ className: element(`image-slide`),
7229
7235
  children: /*#__PURE__*/jsx(Thumbnail, {
7230
7236
  imgRef: useMergeRefs(imgRef, propImgRef),
7231
7237
  image: image,
7232
7238
  alt: alt,
7233
- className: `${CLASSNAME$P}__thumbnail`,
7239
+ className: element(`thumbnail`),
7234
7240
  imgProps: {
7235
7241
  ...imgProps,
7236
7242
  style: {
@@ -7274,6 +7280,9 @@ const ImageSlideshow = ({
7274
7280
  itemsCount: images.length,
7275
7281
  activeIndex: activeImageIndex
7276
7282
  });
7283
+ const {
7284
+ element
7285
+ } = useClassnames(CLASSNAME$P);
7277
7286
 
7278
7287
  // Image metadata (caption)
7279
7288
  const title = images[activeIndex]?.title;
@@ -7368,12 +7377,12 @@ const ImageSlideshow = ({
7368
7377
  })
7369
7378
  }), (metadata || slideShowControls || zoomControls) && /*#__PURE__*/jsxs(FlexBox, {
7370
7379
  ref: footerRef,
7371
- className: `${CLASSNAME$P}__footer`,
7380
+ className: element(`footer`),
7372
7381
  orientation: "vertical",
7373
7382
  vAlign: "center",
7374
7383
  gap: "big",
7375
7384
  children: [metadata, /*#__PURE__*/jsxs(FlexBox, {
7376
- className: `${CLASSNAME$P}__footer-actions`,
7385
+ className: element(`footer-actions`),
7377
7386
  orientation: "horizontal",
7378
7387
  gap: "regular",
7379
7388
  children: [slideShowControls, zoomControls]
@@ -7585,6 +7594,9 @@ const Inner = forwardRef((props, ref) => {
7585
7594
  activeImageRef: propImageRef,
7586
7595
  ...forwardedProps
7587
7596
  } = props;
7597
+ const {
7598
+ block
7599
+ } = useClassnames(CLASSNAME$P);
7588
7600
  const currentPaginationItemRef = React__default.useRef(null);
7589
7601
  const footerRef = React__default.useRef(null);
7590
7602
  const imageRef = React__default.useRef(null);
@@ -7599,7 +7611,7 @@ const Inner = forwardRef((props, ref) => {
7599
7611
  }, [onClose]);
7600
7612
  return /*#__PURE__*/jsx(Lightbox, {
7601
7613
  ref: ref,
7602
- className: classNames(className, CLASSNAME$P),
7614
+ className: block([className]),
7603
7615
  parentElement: parentElement,
7604
7616
  isOpen: isOpen,
7605
7617
  onClose: onClose,
@@ -7674,14 +7686,19 @@ const InlineList = forwardRef((props, ref) => {
7674
7686
  wrap,
7675
7687
  ...forwardedProps
7676
7688
  } = props;
7677
- const typographyClassName = typography && getTypographyClassName(typography);
7689
+ const {
7690
+ block,
7691
+ element
7692
+ } = useClassnames(CLASSNAME$O);
7678
7693
  return (
7679
7694
  /*#__PURE__*/
7680
7695
  // eslint-disable-next-line jsx-a11y/no-redundant-roles
7681
7696
  jsx("ul", {
7682
7697
  ...forwardedProps,
7683
7698
  ref: ref,
7684
- className: classNames(className, CLASSNAME$O, wrap && `${CLASSNAME$O}--wrap`, fontColorClass(color, colorVariant), typographyClassName)
7699
+ className: block({
7700
+ wrap: Boolean(wrap)
7701
+ }, [className, color && classNames.font(color, colorVariant), typography && classNames.typography(typography)])
7685
7702
  // Lists with removed bullet style can lose their a11y list role on some browsers
7686
7703
  ,
7687
7704
  role: "list",
@@ -7693,9 +7710,9 @@ const InlineList = forwardRef((props, ref) => {
7693
7710
  // eslint-disable-next-line jsx-a11y/no-redundant-roles
7694
7711
  jsxs("li", {
7695
7712
  role: "listitem",
7696
- className: `${CLASSNAME$O}__item`,
7713
+ className: element('item'),
7697
7714
  children: [index !== 0 && /*#__PURE__*/jsx("span", {
7698
- className: `${CLASSNAME$O}__item-separator`,
7715
+ className: element('item-separator'),
7699
7716
  "aria-hidden": "true",
7700
7717
  children: '\u00A0•\u00A0'
7701
7718
  }), child]
@@ -7757,14 +7774,16 @@ const InputHelper = forwardRef((props, ref) => {
7757
7774
  const {
7758
7775
  color
7759
7776
  } = INPUT_HELPER_CONFIGURATION[kind] || {};
7777
+ const {
7778
+ block
7779
+ } = useClassnames(CLASSNAME$N);
7760
7780
  return /*#__PURE__*/jsx("p", {
7761
7781
  ref: ref,
7762
7782
  ...forwardedProps,
7763
- className: classNames(className, handleBasicClasses({
7764
- prefix: CLASSNAME$N,
7765
- color,
7766
- theme
7767
- })),
7783
+ className: block({
7784
+ [`color-${color}`]: Boolean(color),
7785
+ [`theme-${theme}`]: Boolean(theme)
7786
+ }, className),
7768
7787
  children: children
7769
7788
  });
7770
7789
  });
@@ -7805,17 +7824,18 @@ const InputLabel = forwardRef((props, ref) => {
7805
7824
  typography,
7806
7825
  ...forwardedProps
7807
7826
  } = props;
7808
- const typographyClass = typography && getTypographyClassName(typography);
7827
+ const {
7828
+ block
7829
+ } = useClassnames(CLASSNAME$M);
7809
7830
  return /*#__PURE__*/jsx("label", {
7810
7831
  ref: ref,
7811
7832
  ...forwardedProps,
7812
7833
  htmlFor: htmlFor,
7813
- className: classNames(className, handleBasicClasses({
7814
- prefix: CLASSNAME$M,
7815
- isRequired,
7816
- theme,
7817
- hasCustomTypography: Boolean(typography)
7818
- }), typographyClass),
7834
+ className: block({
7835
+ 'is-required': isRequired,
7836
+ [`theme-${theme}`]: Boolean(theme),
7837
+ 'has-custom-typography': Boolean(typography)
7838
+ }, [className, typography && classNames.typography(typography)]),
7819
7839
  children: children
7820
7840
  });
7821
7841
  });
@@ -7863,6 +7883,12 @@ const Lightbox = forwardRef((props, ref) => {
7863
7883
  return null;
7864
7884
  }
7865
7885
 
7886
+ // eslint-disable-next-line react-hooks/rules-of-hooks
7887
+ const {
7888
+ block,
7889
+ element
7890
+ } = useClassnames(CLASSNAME$L);
7891
+
7866
7892
  // eslint-disable-next-line react-hooks/rules-of-hooks
7867
7893
  const childrenRef = useRef(null);
7868
7894
  // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -7915,17 +7941,16 @@ const Lightbox = forwardRef((props, ref) => {
7915
7941
  "aria-modal": "true",
7916
7942
  role: "dialog",
7917
7943
  tabIndex: -1,
7918
- className: classNames(className, handleBasicClasses({
7919
- prefix: CLASSNAME$L,
7920
- isHidden: !isOpen,
7921
- isShown: isOpen || isVisible,
7922
- theme
7923
- })),
7944
+ className: block({
7945
+ 'is-hidden': !isOpen,
7946
+ 'is-shown': isOpen || isVisible,
7947
+ [`theme-${theme}`]: Boolean(theme)
7948
+ }, className),
7924
7949
  style: {
7925
7950
  zIndex
7926
7951
  },
7927
7952
  children: [closeButtonProps && /*#__PURE__*/jsx("div", {
7928
- className: `${CLASSNAME$L}__close`,
7953
+ className: element('close'),
7929
7954
  children: /*#__PURE__*/jsx(IconButton, {
7930
7955
  ...closeButtonProps,
7931
7956
  ref: closeButtonRef,
@@ -7945,7 +7970,7 @@ const Lightbox = forwardRef((props, ref) => {
7945
7970
  childrenRefs: clickAwayRefs,
7946
7971
  children: /*#__PURE__*/jsx("div", {
7947
7972
  ref: childrenRef,
7948
- className: `${CLASSNAME$L}__wrapper`,
7973
+ className: element('wrapper'),
7949
7974
  role: "presentation",
7950
7975
  children: children
7951
7976
  })
@@ -7992,27 +8017,30 @@ const Link = forwardRef((props, ref) => {
7992
8017
  ...forwardedProps
7993
8018
  } = otherProps;
7994
8019
  const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
8020
+ const {
8021
+ block,
8022
+ element
8023
+ } = useClassnames(CLASSNAME$K);
7995
8024
  return /*#__PURE__*/jsx(RawClickable, {
7996
8025
  ref: ref,
7997
8026
  as: linkAs || (forwardedProps.href ? 'a' : 'button'),
7998
8027
  ...forwardedProps,
7999
8028
  ...disabledStateProps,
8000
- className: classNames(className, handleBasicClasses({
8001
- prefix: CLASSNAME$K,
8002
- color,
8003
- colorVariant,
8004
- hasTypography: !!typography
8005
- }), typography && getTypographyClassName(typography)),
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)]),
8006
8034
  children: wrapChildrenIconWithSpaces(/*#__PURE__*/jsxs(Fragment, {
8007
8035
  children: [leftIcon && /*#__PURE__*/jsx(Icon, {
8008
8036
  icon: leftIcon,
8009
- className: `${CLASSNAME$K}__left-icon`
8037
+ className: element('left-icon')
8010
8038
  }), children && /*#__PURE__*/jsx("span", {
8011
- className: `${CLASSNAME$K}__content`,
8039
+ className: element('content'),
8012
8040
  children: children
8013
8041
  }), rightIcon && /*#__PURE__*/jsx(Icon, {
8014
8042
  icon: rightIcon,
8015
- className: `${CLASSNAME$K}__right-icon`
8043
+ className: element('right-icon')
8016
8044
  })]
8017
8045
  }))
8018
8046
  });
@@ -8062,18 +8090,21 @@ const LinkPreview = forwardRef((props, ref) => {
8062
8090
  } = props;
8063
8091
  // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
8064
8092
  const TitleHeading = titleHeading;
8093
+ const {
8094
+ block,
8095
+ element
8096
+ } = useClassnames(CLASSNAME$J);
8065
8097
  return /*#__PURE__*/jsx("article", {
8066
8098
  ref: ref,
8067
8099
  ...forwardedProps,
8068
- className: classNames(className, handleBasicClasses({
8069
- prefix: CLASSNAME$J,
8070
- size: size === Size.big && thumbnailProps ? Size.big : Size.regular,
8071
- theme
8072
- })),
8100
+ className: block({
8101
+ [`size-${size === Size.big && thumbnailProps ? Size.big : Size.regular}`]: true,
8102
+ [`theme-${theme}`]: Boolean(theme)
8103
+ }, className),
8073
8104
  children: /*#__PURE__*/jsxs("div", {
8074
- className: `${CLASSNAME$J}__wrapper`,
8105
+ className: element('wrapper'),
8075
8106
  children: [thumbnailProps && /*#__PURE__*/jsx("div", {
8076
- className: `${CLASSNAME$J}__thumbnail`,
8107
+ className: element('thumbnail'),
8077
8108
  children: /*#__PURE__*/jsx(Thumbnail, {
8078
8109
  ...thumbnailProps,
8079
8110
  linkAs: linkAs,
@@ -8088,31 +8119,31 @@ const LinkPreview = forwardRef((props, ref) => {
8088
8119
  fillHeight: true
8089
8120
  })
8090
8121
  }), /*#__PURE__*/jsxs("div", {
8091
- className: `${CLASSNAME$J}__container`,
8122
+ className: element('container'),
8092
8123
  children: [title && /*#__PURE__*/jsx(TitleHeading, {
8093
- className: `${CLASSNAME$J}__title`,
8124
+ className: element('title'),
8094
8125
  children: /*#__PURE__*/jsx(Link, {
8095
8126
  ...linkProps,
8096
8127
  linkAs: linkAs,
8097
8128
  target: "_blank",
8098
8129
  href: link,
8099
8130
  color: theme === Theme.light ? ColorPalette.dark : ColorPalette.light,
8100
- colorVariant: ColorVariant$1.N,
8131
+ colorVariant: ColorVariant.N,
8101
8132
  children: title
8102
8133
  })
8103
8134
  }), description && /*#__PURE__*/jsx("p", {
8104
- className: `${CLASSNAME$J}__description`,
8135
+ className: element('description'),
8105
8136
  children: description
8106
8137
  }), /*#__PURE__*/jsx("div", {
8107
- className: `${CLASSNAME$J}__link`,
8138
+ className: element('link'),
8108
8139
  children: /*#__PURE__*/jsx(Link, {
8109
8140
  ...linkProps,
8110
8141
  linkAs: linkAs,
8111
- className: classNames(`${CLASSNAME$J}__link`, linkProps?.className),
8142
+ className: element('link', linkProps?.className),
8112
8143
  target: "_blank",
8113
8144
  href: link,
8114
8145
  color: theme === Theme.light ? ColorPalette.primary : ColorPalette.light,
8115
- colorVariant: ColorVariant$1.N
8146
+ colorVariant: ColorVariant.N
8116
8147
  // Avoid redundant links in focus order
8117
8148
  ,
8118
8149
  tabIndex: title ? '-1' : undefined,
@@ -8166,7 +8197,7 @@ function isClickable({
8166
8197
  linkProps,
8167
8198
  onItemSelected
8168
8199
  }) {
8169
- return !isEmpty(linkProps?.href) || !!onItemSelected;
8200
+ return Boolean(linkProps?.href) || Boolean(onItemSelected);
8170
8201
  }
8171
8202
 
8172
8203
  /**
@@ -8196,6 +8227,10 @@ const ListItem = forwardRef((props, ref) => {
8196
8227
  size = DEFAULT_PROPS$D.size,
8197
8228
  ...forwardedProps
8198
8229
  } = otherProps;
8230
+ const {
8231
+ block,
8232
+ element
8233
+ } = useClassnames(CLASSNAME$I);
8199
8234
  const role = linkAs || linkProps.href ? 'link' : 'button';
8200
8235
  const onKeyDown = useMemo(() => {
8201
8236
  if (onItemSelected && role === 'link') return onEnterPressed(onItemSelected);
@@ -8204,23 +8239,22 @@ const ListItem = forwardRef((props, ref) => {
8204
8239
  }, [role, onItemSelected]);
8205
8240
  const content = /*#__PURE__*/jsxs(Fragment, {
8206
8241
  children: [before && /*#__PURE__*/jsx("div", {
8207
- className: `${CLASSNAME$I}__before`,
8242
+ className: element('before'),
8208
8243
  children: before
8209
8244
  }), /*#__PURE__*/jsx("div", {
8210
- className: `${CLASSNAME$I}__content`,
8245
+ className: element('content'),
8211
8246
  children: children
8212
8247
  }), after && /*#__PURE__*/jsx("div", {
8213
- className: `${CLASSNAME$I}__after`,
8248
+ className: element('after'),
8214
8249
  children: after
8215
8250
  })]
8216
8251
  });
8217
8252
  return /*#__PURE__*/jsx("li", {
8218
8253
  ref: ref,
8219
8254
  ...forwardedProps,
8220
- className: classNames(className, handleBasicClasses({
8221
- prefix: CLASSNAME$I,
8222
- size
8223
- })),
8255
+ className: block({
8256
+ [`size-${size}`]: Boolean(size)
8257
+ }, className),
8224
8258
  children: isClickable({
8225
8259
  linkProps,
8226
8260
  onItemSelected
@@ -8232,12 +8266,11 @@ const ListItem = forwardRef((props, ref) => {
8232
8266
  'aria-disabled': isAnyDisabled,
8233
8267
  ...linkProps,
8234
8268
  href: isAnyDisabled ? undefined : linkProps.href,
8235
- className: classNames(handleBasicClasses({
8236
- prefix: `${CLASSNAME$I}__link`,
8237
- isHighlighted,
8238
- isSelected,
8239
- isDisabled: isAnyDisabled
8240
- })),
8269
+ className: element('link', {
8270
+ 'is-highlighted': Boolean(isHighlighted),
8271
+ 'is-selected': Boolean(isSelected),
8272
+ 'is-disabled': Boolean(isAnyDisabled)
8273
+ }),
8241
8274
  onClick: isAnyDisabled ? undefined : onItemSelected,
8242
8275
  onKeyDown: isAnyDisabled ? undefined : onKeyDown,
8243
8276
  ref: linkRef
@@ -8245,7 +8278,7 @@ const ListItem = forwardRef((props, ref) => {
8245
8278
  /*#__PURE__*/
8246
8279
  /* Non clickable list item */
8247
8280
  jsx("div", {
8248
- className: `${CLASSNAME$I}__wrapper`,
8281
+ className: element('wrapper'),
8249
8282
  children: content
8250
8283
  })
8251
8284
  });
@@ -8276,10 +8309,13 @@ const ListDivider = forwardRef((props, ref) => {
8276
8309
  className,
8277
8310
  ...forwardedProps
8278
8311
  } = props;
8312
+ const {
8313
+ block
8314
+ } = useClassnames(CLASSNAME$H);
8279
8315
  return /*#__PURE__*/jsx("li", {
8280
8316
  ref: ref,
8281
8317
  ...forwardedProps,
8282
- className: classNames(className, CLASSNAME$H)
8318
+ className: block([className])
8283
8319
  });
8284
8320
  });
8285
8321
  ListDivider.displayName = COMPONENT_NAME$H;
@@ -8308,10 +8344,13 @@ const ListSubheader = forwardRef((props, ref) => {
8308
8344
  className,
8309
8345
  ...forwardedProps
8310
8346
  } = props;
8347
+ const {
8348
+ block
8349
+ } = useClassnames(CLASSNAME$G);
8311
8350
  return /*#__PURE__*/jsx("li", {
8312
8351
  ref: ref,
8313
8352
  ...forwardedProps,
8314
- className: classNames(className, CLASSNAME$G),
8353
+ className: block([className]),
8315
8354
  children: children
8316
8355
  });
8317
8356
  });
@@ -8358,6 +8397,10 @@ const CONFIG = {
8358
8397
  * @return React element.
8359
8398
  */
8360
8399
  const Message = forwardRef((props, ref) => {
8400
+ const {
8401
+ block,
8402
+ element
8403
+ } = useClassnames(CLASSNAME$F);
8361
8404
  const {
8362
8405
  children,
8363
8406
  className,
@@ -8378,22 +8421,21 @@ const Message = forwardRef((props, ref) => {
8378
8421
  const isCloseButtonDisplayed = hasBackground && kind === 'info' && onClick && closeButtonLabel;
8379
8422
  return /*#__PURE__*/jsxs("div", {
8380
8423
  ref: ref,
8381
- className: classNames(className, handleBasicClasses({
8382
- color,
8383
- hasBackground,
8384
- prefix: CLASSNAME$F
8385
- })),
8424
+ className: block({
8425
+ [`color-${color}`]: Boolean(color),
8426
+ 'has-background': hasBackground
8427
+ }, className),
8386
8428
  ...forwardedProps,
8387
8429
  children: [(customIcon || icon) && /*#__PURE__*/jsx(Icon, {
8388
- className: `${CLASSNAME$F}__icon`,
8430
+ className: element('icon'),
8389
8431
  icon: customIcon || icon,
8390
8432
  size: Size.xs,
8391
8433
  color: color
8392
8434
  }), /*#__PURE__*/jsx("div", {
8393
- className: `${CLASSNAME$F}__text`,
8435
+ className: element('text'),
8394
8436
  children: children
8395
8437
  }), isCloseButtonDisplayed && /*#__PURE__*/jsx(IconButton, {
8396
- className: `${CLASSNAME$F}__close-button`,
8438
+ className: element('close-button'),
8397
8439
  icon: mdiClose,
8398
8440
  onClick: onClick,
8399
8441
  label: closeButtonLabel,
@@ -8435,6 +8477,10 @@ const Mosaic = forwardRef((props, ref) => {
8435
8477
  onImageClick,
8436
8478
  ...forwardedProps
8437
8479
  } = props;
8480
+ const {
8481
+ block,
8482
+ element
8483
+ } = useClassnames(CLASSNAME$E);
8438
8484
  const handleImageClick = useMemo(() => {
8439
8485
  if (!onImageClick) return undefined;
8440
8486
  return (index, onClick) => event => {
@@ -8445,17 +8491,15 @@ const Mosaic = forwardRef((props, ref) => {
8445
8491
  return /*#__PURE__*/jsx("div", {
8446
8492
  ref: ref,
8447
8493
  ...forwardedProps,
8448
- className: classNames(className, handleBasicClasses({
8449
- prefix: CLASSNAME$E,
8450
- theme
8451
- }), {
8452
- [`${CLASSNAME$E}--has-1-thumbnail`]: thumbnails?.length === 1,
8453
- [`${CLASSNAME$E}--has-2-thumbnails`]: thumbnails?.length === 2,
8454
- [`${CLASSNAME$E}--has-3-thumbnails`]: thumbnails?.length === 3,
8455
- [`${CLASSNAME$E}--has-4-thumbnails`]: thumbnails?.length >= 4
8456
- }),
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),
8457
8501
  children: /*#__PURE__*/jsx("div", {
8458
- className: `${CLASSNAME$E}__wrapper`,
8502
+ className: element('wrapper'),
8459
8503
  children: take(thumbnails, 4).map((thumbnail, index) => {
8460
8504
  const {
8461
8505
  image,
@@ -8464,7 +8508,7 @@ const Mosaic = forwardRef((props, ref) => {
8464
8508
  ...thumbnailProps
8465
8509
  } = thumbnail;
8466
8510
  return /*#__PURE__*/jsxs("div", {
8467
- className: `${CLASSNAME$E}__thumbnail`,
8511
+ className: element('thumbnail'),
8468
8512
  children: [/*#__PURE__*/jsx(Thumbnail, {
8469
8513
  ...thumbnailProps,
8470
8514
  align: align || Alignment.left,
@@ -8474,7 +8518,7 @@ const Mosaic = forwardRef((props, ref) => {
8474
8518
  fillHeight: true,
8475
8519
  onClick: handleImageClick?.(index, onClick) || onClick
8476
8520
  }), thumbnails.length > 4 && index === 3 && /*#__PURE__*/jsx("div", {
8477
- className: `${CLASSNAME$E}__overlay`,
8521
+ className: element('overlay'),
8478
8522
  children: /*#__PURE__*/jsxs("span", {
8479
8523
  children: ["+", thumbnails.length - 4]
8480
8524
  })
@@ -8527,35 +8571,39 @@ const NavigationSection = forwardRef((props, ref) => {
8527
8571
  } = useContext(NavigationContext) || {};
8528
8572
  const theme = useTheme();
8529
8573
  const isDropdown = orientation === Orientation.horizontal;
8574
+ const item = useClassnames(ITEM_CLASSNAME);
8575
+ const {
8576
+ block,
8577
+ element
8578
+ } = useClassnames(CLASSNAME$D);
8530
8579
  return /*#__PURE__*/jsxs("li", {
8531
- className: classNames(className, CLASSNAME$D, ITEM_CLASSNAME, handleBasicClasses({
8532
- prefix: ITEM_CLASSNAME,
8533
- theme
8534
- })),
8580
+ className: block([className, item.block({
8581
+ [`theme-${theme}`]: Boolean(theme)
8582
+ })]),
8535
8583
  ref: ref,
8536
8584
  children: [/*#__PURE__*/jsxs(RawClickable, {
8537
8585
  as: "button",
8538
8586
  ...forwardedProps,
8539
8587
  "aria-controls": sectionId,
8540
8588
  "aria-expanded": isOpen,
8541
- className: classNames(`${ITEM_CLASSNAME}__link`),
8589
+ className: item.element('link'),
8542
8590
  ref: buttonRef,
8543
8591
  onClick: event => {
8544
8592
  setIsOpen(!isOpen);
8545
8593
  event.stopPropagation();
8546
8594
  },
8547
8595
  children: [icon ? /*#__PURE__*/jsx(Icon, {
8548
- className: `${ITEM_CLASSNAME}__icon`,
8596
+ className: item.element('icon'),
8549
8597
  icon: icon,
8550
8598
  size: Size.xs
8551
8599
  }) : null, /*#__PURE__*/jsx(Text, {
8552
8600
  as: "span",
8553
8601
  truncate: true,
8554
- className: `${ITEM_CLASSNAME}__label`,
8602
+ className: item.element('label'),
8555
8603
  ref: ref,
8556
8604
  children: label
8557
8605
  }), /*#__PURE__*/jsx(Icon, {
8558
- className: classNames(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME$D}__chevron`),
8606
+ className: element('chevron', [item.element('icon')]),
8559
8607
  icon: isOpen ? mdiChevronUp : mdiChevronDown
8560
8608
  })]
8561
8609
  }), isOpen && (isDropdown ? /*#__PURE__*/jsx(Popover, {
@@ -8571,7 +8619,9 @@ const NavigationSection = forwardRef((props, ref) => {
8571
8619
  children: /*#__PURE__*/jsx(ThemeProvider, {
8572
8620
  value: Theme.light,
8573
8621
  children: /*#__PURE__*/jsx("ul", {
8574
- className: `${CLASSNAME$D}__drawer--popover`,
8622
+ className: element('drawer', {
8623
+ popover: true
8624
+ }),
8575
8625
  id: sectionId,
8576
8626
  children: /*#__PURE__*/jsx(NavigationContext.Provider, {
8577
8627
  value: {
@@ -8582,7 +8632,7 @@ const NavigationSection = forwardRef((props, ref) => {
8582
8632
  })
8583
8633
  })
8584
8634
  }) : /*#__PURE__*/jsx("ul", {
8585
- className: `${CLASSNAME$D}__drawer`,
8635
+ className: element('drawer'),
8586
8636
  id: sectionId,
8587
8637
  children: children
8588
8638
  }))]
@@ -8605,32 +8655,34 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
8605
8655
  tooltipLabel,
8606
8656
  labelRef
8607
8657
  } = useOverflowTooltipLabel(label);
8658
+ const {
8659
+ block,
8660
+ element
8661
+ } = useClassnames(ITEM_CLASSNAME);
8608
8662
  return /*#__PURE__*/jsx("li", {
8609
- className: classNames(className, handleBasicClasses({
8610
- prefix: ITEM_CLASSNAME,
8611
- theme
8612
- })),
8663
+ className: block({
8664
+ [`theme-${theme}`]: Boolean(theme)
8665
+ }, className),
8613
8666
  children: /*#__PURE__*/jsx(Tooltip, {
8614
8667
  label: tooltipLabel,
8615
8668
  placement: Placement.TOP,
8616
8669
  children: /*#__PURE__*/jsxs(RawClickable, {
8617
8670
  as: Element,
8618
- className: handleBasicClasses({
8619
- prefix: `${ITEM_CLASSNAME}__link`,
8620
- isSelected: isCurrentPage
8671
+ className: element('link', {
8672
+ 'is-selected': isCurrentPage
8621
8673
  }),
8622
8674
  ref: ref,
8623
8675
  "aria-current": isCurrentPage ? 'page' : undefined,
8624
8676
  ...forwardedProps,
8625
8677
  children: [icon ? /*#__PURE__*/jsx(Icon, {
8626
- className: `${ITEM_CLASSNAME}__icon`,
8678
+ className: element('icon'),
8627
8679
  icon: icon,
8628
8680
  size: Size.xs,
8629
8681
  theme: theme
8630
8682
  }) : null, /*#__PURE__*/jsx(Text, {
8631
8683
  as: "span",
8632
8684
  truncate: true,
8633
- className: `${ITEM_CLASSNAME}__label`,
8685
+ className: element('label'),
8634
8686
  ref: labelRef,
8635
8687
  children: label
8636
8688
  })]
@@ -8667,14 +8719,17 @@ const Navigation = forwardRef((props, ref) => {
8667
8719
  orientation = DEFAULT_PROPS$B.orientation,
8668
8720
  ...forwardedProps
8669
8721
  } = props;
8722
+ const {
8723
+ block,
8724
+ element
8725
+ } = useClassnames(CLASSNAME$C);
8670
8726
  return /*#__PURE__*/jsx(ThemeProvider, {
8671
8727
  value: theme,
8672
8728
  children: /*#__PURE__*/jsx("nav", {
8673
- className: classNames(className, handleBasicClasses({
8674
- prefix: CLASSNAME$C,
8675
- theme,
8676
- orientation
8677
- })),
8729
+ className: block({
8730
+ [`theme-${theme}`]: Boolean(theme),
8731
+ [`orientation-${orientation}`]: Boolean(orientation)
8732
+ }, className),
8678
8733
  ref: ref,
8679
8734
  ...forwardedProps,
8680
8735
  children: /*#__PURE__*/jsx(NavigationContext.Provider, {
@@ -8682,7 +8737,7 @@ const Navigation = forwardRef((props, ref) => {
8682
8737
  orientation
8683
8738
  },
8684
8739
  children: /*#__PURE__*/jsx("ul", {
8685
- className: `${CLASSNAME$C}__list`,
8740
+ className: element('list'),
8686
8741
  children: children
8687
8742
  })
8688
8743
  })
@@ -8772,6 +8827,10 @@ const Notification = forwardRef((props, ref) => {
8772
8827
  const rootRef = useRef(null);
8773
8828
  const isVisible = useTransitionVisibility(rootRef, !!isOpen, NOTIFICATION_TRANSITION_DURATION);
8774
8829
  const hasAction = Boolean(onActionClick) && Boolean(actionLabel);
8830
+ const {
8831
+ block,
8832
+ element
8833
+ } = useClassnames(CLASSNAME$B);
8775
8834
  const handleCallback = evt => {
8776
8835
  if (isFunction(onActionClick)) {
8777
8836
  onActionClick();
@@ -8787,28 +8846,27 @@ const Notification = forwardRef((props, ref) => {
8787
8846
  ref: mergeRefs(ref, rootRef),
8788
8847
  role: "alert",
8789
8848
  ...forwardedProps,
8790
- className: classNames(className, handleBasicClasses({
8791
- color,
8792
- hasAction,
8793
- isHidden: !isOpen,
8794
- prefix: CLASSNAME$B
8795
- })),
8849
+ className: block({
8850
+ [`color-${color}`]: Boolean(color),
8851
+ 'has-action': hasAction,
8852
+ 'is-hidden': !isOpen
8853
+ }, className),
8796
8854
  onClick: onClick,
8797
8855
  style: {
8798
8856
  ...style,
8799
8857
  zIndex
8800
8858
  },
8801
8859
  children: [/*#__PURE__*/jsx("div", {
8802
- className: `${CLASSNAME$B}__icon`,
8860
+ className: element('icon'),
8803
8861
  children: /*#__PURE__*/jsx(Icon, {
8804
8862
  icon: icon,
8805
8863
  size: Size.s
8806
8864
  })
8807
8865
  }), /*#__PURE__*/jsx("div", {
8808
- className: `${CLASSNAME$B}__content`,
8866
+ className: element('content'),
8809
8867
  children: content
8810
8868
  }), hasAction && /*#__PURE__*/jsx("div", {
8811
- className: `${CLASSNAME$B}__action`,
8869
+ className: element('action'),
8812
8870
  children: /*#__PURE__*/jsx(Button, {
8813
8871
  emphasis: Emphasis.medium,
8814
8872
  theme: theme,
@@ -8857,10 +8915,13 @@ const PopoverDialog = forwardRef((props, ref) => {
8857
8915
  className,
8858
8916
  ...forwardedProps
8859
8917
  } = props;
8918
+ const {
8919
+ block
8920
+ } = useClassnames(CLASSNAME$A);
8860
8921
  return /*#__PURE__*/jsx(Popover, {
8861
8922
  ...forwardedProps,
8862
8923
  ref: ref,
8863
- className: classNames(className, CLASSNAME$A),
8924
+ className: block([className]),
8864
8925
  role: "dialog",
8865
8926
  "aria-modal": "true"
8866
8927
  /**
@@ -8924,53 +8985,56 @@ const PostBlock = forwardRef((props, ref) => {
8924
8985
  title,
8925
8986
  ...forwardedProps
8926
8987
  } = props;
8988
+ const {
8989
+ block,
8990
+ element
8991
+ } = useClassnames(CLASSNAME$z);
8927
8992
  return /*#__PURE__*/jsxs("div", {
8928
8993
  ref: ref,
8929
- className: classNames(className, handleBasicClasses({
8930
- prefix: CLASSNAME$z,
8931
- orientation,
8932
- theme
8933
- })),
8994
+ className: block({
8995
+ [`orientation-${orientation}`]: Boolean(orientation),
8996
+ [`theme-${theme}`]: Boolean(theme)
8997
+ }, className),
8934
8998
  ...forwardedProps,
8935
8999
  children: [thumbnailProps && /*#__PURE__*/jsx("div", {
8936
- className: `${CLASSNAME$z}__thumbnail`,
9000
+ className: element('thumbnail'),
8937
9001
  children: /*#__PURE__*/jsx(Thumbnail, {
8938
9002
  ...thumbnailProps,
8939
9003
  theme: theme,
8940
9004
  variant: ThumbnailVariant.rounded
8941
9005
  })
8942
9006
  }), /*#__PURE__*/jsxs("div", {
8943
- className: `${CLASSNAME$z}__wrapper`,
9007
+ className: element('wrapper'),
8944
9008
  children: [author && /*#__PURE__*/jsx("div", {
8945
- className: `${CLASSNAME$z}__author`,
9009
+ className: element('author'),
8946
9010
  children: author
8947
9011
  }), title && /*#__PURE__*/jsx("button", {
8948
9012
  type: "button",
8949
- className: `${CLASSNAME$z}__title`,
9013
+ className: element('title'),
8950
9014
  onClick: onClick,
8951
9015
  children: title
8952
9016
  }), meta && /*#__PURE__*/jsx("span", {
8953
- className: `${CLASSNAME$z}__meta`,
9017
+ className: element('meta'),
8954
9018
  children: meta
8955
9019
  }), isObject(text) && text.__html ?
8956
9020
  /*#__PURE__*/
8957
9021
  // eslint-disable-next-line react/no-danger
8958
9022
  jsx("p", {
8959
9023
  dangerouslySetInnerHTML: text,
8960
- className: `${CLASSNAME$z}__text`
9024
+ className: element('text')
8961
9025
  }) : /*#__PURE__*/jsx("p", {
8962
- className: `${CLASSNAME$z}__text`,
9026
+ className: element('text'),
8963
9027
  children: text
8964
9028
  }), attachments && /*#__PURE__*/jsx("div", {
8965
- className: `${CLASSNAME$z}__attachments`,
9029
+ className: element('attachments'),
8966
9030
  children: attachments
8967
9031
  }), (tags || actions) && /*#__PURE__*/jsxs("div", {
8968
- className: `${CLASSNAME$z}__toolbar`,
9032
+ className: element('toolbar'),
8969
9033
  children: [tags && /*#__PURE__*/jsx("div", {
8970
- className: `${CLASSNAME$z}__tags`,
9034
+ className: element('tags'),
8971
9035
  children: tags
8972
9036
  }), actions && /*#__PURE__*/jsx("div", {
8973
- className: `${CLASSNAME$z}__actions`,
9037
+ className: element('actions'),
8974
9038
  children: actions
8975
9039
  })]
8976
9040
  })]
@@ -9010,17 +9074,20 @@ const ProgressLinear = forwardRef((props, ref) => {
9010
9074
  theme = defaultTheme,
9011
9075
  ...forwardedProps
9012
9076
  } = props;
9077
+ const {
9078
+ block,
9079
+ element
9080
+ } = useClassnames(CLASSNAME$y);
9013
9081
  return /*#__PURE__*/jsxs("div", {
9014
9082
  ref: ref,
9015
9083
  ...forwardedProps,
9016
- className: classNames(className, handleBasicClasses({
9017
- prefix: CLASSNAME$y,
9018
- theme
9019
- })),
9084
+ className: block({
9085
+ [`theme-${theme}`]: Boolean(theme)
9086
+ }, className),
9020
9087
  children: [/*#__PURE__*/jsx("div", {
9021
- className: "lumx-progress-linear__line1"
9088
+ className: element('line1')
9022
9089
  }), /*#__PURE__*/jsx("div", {
9023
- className: "lumx-progress-linear__line2"
9090
+ className: element('line2')
9024
9091
  })]
9025
9092
  });
9026
9093
  });
@@ -9063,24 +9130,27 @@ const ProgressCircular = forwardRef((props, ref) => {
9063
9130
  ...forwardedProps
9064
9131
  } = props;
9065
9132
  const Element = display === 'block' ? 'div' : 'span';
9133
+ const {
9134
+ block,
9135
+ element
9136
+ } = useClassnames(CLASSNAME$x);
9066
9137
  return /*#__PURE__*/jsxs(Element, {
9067
9138
  ref: ref,
9068
9139
  ...forwardedProps,
9069
- className: classNames(className, handleBasicClasses({
9070
- prefix: CLASSNAME$x,
9071
- theme,
9072
- size,
9073
- display
9074
- })),
9140
+ className: block({
9141
+ [`theme-${theme}`]: Boolean(theme),
9142
+ [`size-${size}`]: Boolean(size),
9143
+ [`display-${display}`]: Boolean(display)
9144
+ }, className),
9075
9145
  children: [/*#__PURE__*/jsx(Element, {
9076
- className: "lumx-progress-circular__double-bounce1"
9146
+ className: element('double-bounce1')
9077
9147
  }), /*#__PURE__*/jsx(Element, {
9078
- className: "lumx-progress-circular__double-bounce2"
9148
+ className: element('double-bounce2')
9079
9149
  }), /*#__PURE__*/jsx("svg", {
9080
- className: "lumx-progress-circular__svg",
9150
+ className: element('svg'),
9081
9151
  viewBox: "25 25 50 50",
9082
9152
  children: /*#__PURE__*/jsx("circle", {
9083
- className: "lumx-progress-circular__path",
9153
+ className: element('path'),
9084
9154
  cx: "50",
9085
9155
  cy: "50",
9086
9156
  r: "20",
@@ -9136,14 +9206,16 @@ const Progress = forwardRef((props, ref) => {
9136
9206
  variant = DEFAULT_PROPS$v.variant,
9137
9207
  ...forwardedProps
9138
9208
  } = props;
9209
+ const {
9210
+ block
9211
+ } = useClassnames(CLASSNAME$w);
9139
9212
  return /*#__PURE__*/jsxs("div", {
9140
9213
  ref: ref,
9141
9214
  ...forwardedProps,
9142
- className: classNames(className, handleBasicClasses({
9143
- prefix: CLASSNAME$w,
9144
- theme,
9145
- variant
9146
- })),
9215
+ className: block({
9216
+ [`theme-${theme}`]: Boolean(theme),
9217
+ [`variant-${variant}`]: Boolean(variant)
9218
+ }, className),
9147
9219
  children: [variant === ProgressVariant.circular && /*#__PURE__*/jsx(ProgressCircular, {
9148
9220
  theme: theme
9149
9221
  }), variant === ProgressVariant.linear && /*#__PURE__*/jsx(ProgressLinear, {
@@ -9438,6 +9510,10 @@ const ProgressTracker = forwardRef((props, ref) => {
9438
9510
  className,
9439
9511
  ...forwardedProps
9440
9512
  } = props;
9513
+ const {
9514
+ block,
9515
+ element
9516
+ } = useClassnames(CLASSNAME$v);
9441
9517
  const stepListRef = React__default.useRef(null);
9442
9518
  useRovingTabIndex({
9443
9519
  parentRef: stepListRef,
@@ -9452,20 +9528,20 @@ const ProgressTracker = forwardRef((props, ref) => {
9452
9528
  return /*#__PURE__*/jsxs("div", {
9453
9529
  ref: mergeRefs(ref, stepListRef),
9454
9530
  ...forwardedProps,
9455
- className: classNames(className, CLASSNAME$v),
9531
+ className: block([className]),
9456
9532
  children: [/*#__PURE__*/jsx("div", {
9457
- className: `${CLASSNAME$v}__steps`,
9533
+ className: element('steps'),
9458
9534
  role: "tablist",
9459
9535
  "aria-label": ariaLabel,
9460
9536
  children: children
9461
9537
  }), /*#__PURE__*/jsx("div", {
9462
- className: `${CLASSNAME$v}__background-bar`,
9538
+ className: element('background-bar'),
9463
9539
  style: {
9464
9540
  left: `${backgroundPosition}%`,
9465
9541
  right: `${backgroundPosition}%`
9466
9542
  }
9467
9543
  }), /*#__PURE__*/jsx("div", {
9468
- className: `${CLASSNAME$v}__foreground-bar`,
9544
+ className: element('foreground-bar'),
9469
9545
  style: {
9470
9546
  left: `${backgroundPosition}%`,
9471
9547
  right: `${backgroundPosition}%`,
@@ -9522,6 +9598,10 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
9522
9598
  } = otherProps;
9523
9599
  const state = useTabProviderContext('tab', id);
9524
9600
  const isActive = propIsActive || state?.isActive;
9601
+ const {
9602
+ block,
9603
+ element
9604
+ } = useClassnames(CLASSNAME$u);
9525
9605
  const changeToCurrentTab = useCallback(() => {
9526
9606
  if (isAnyDisabled) {
9527
9607
  return;
@@ -9555,13 +9635,12 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
9555
9635
  ...forwardedProps,
9556
9636
  type: "button",
9557
9637
  id: state?.tabId,
9558
- className: classNames(className, handleBasicClasses({
9559
- prefix: CLASSNAME$u,
9560
- hasError,
9561
- isActive,
9562
- isClickable: state && !isAnyDisabled,
9563
- isComplete
9564
- })),
9638
+ className: block({
9639
+ 'has-error': hasError,
9640
+ 'is-active': isActive,
9641
+ 'is-clickable': Boolean(state && !isAnyDisabled),
9642
+ 'is-complete': isComplete
9643
+ }, className),
9565
9644
  onClick: changeToCurrentTab,
9566
9645
  onKeyPress: handleKeyPress,
9567
9646
  onFocus: handleFocus,
@@ -9571,16 +9650,16 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
9571
9650
  "aria-selected": isActive,
9572
9651
  "aria-controls": state?.tabPanelId,
9573
9652
  children: [/*#__PURE__*/jsx(Icon, {
9574
- className: `${CLASSNAME$u}__state`,
9653
+ className: element('state'),
9575
9654
  icon: getIcon(),
9576
9655
  size: Size.s
9577
9656
  }), /*#__PURE__*/jsx(InputLabel, {
9578
9657
  htmlFor: state?.tabId || '',
9579
- className: `${CLASSNAME$u}__label`,
9658
+ className: element('label'),
9580
9659
  children: label
9581
9660
  }), helper && /*#__PURE__*/jsx(InputHelper, {
9582
9661
  kind: hasError ? Kind.error : Kind.info,
9583
- className: `${CLASSNAME$u}__helper`,
9662
+ className: element('helper'),
9584
9663
  children: helper
9585
9664
  })]
9586
9665
  });
@@ -9623,14 +9702,16 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
9623
9702
  } = props;
9624
9703
  const state = useTabProviderContext('tabPanel', id);
9625
9704
  const isActive = propIsActive || state?.isActive;
9705
+ const {
9706
+ block
9707
+ } = useClassnames(CLASSNAME$t);
9626
9708
  return /*#__PURE__*/jsx("div", {
9627
9709
  ref: ref,
9628
9710
  ...forwardedProps,
9629
9711
  id: state?.tabPanelId,
9630
- className: classNames(className, handleBasicClasses({
9631
- prefix: CLASSNAME$t,
9632
- isActive
9633
- })),
9712
+ className: block({
9713
+ 'is-active': isActive
9714
+ }, className),
9634
9715
  role: "tabpanel",
9635
9716
  tabIndex: isActive ? 0 : -1,
9636
9717
  "aria-labelledby": state?.tabId,
@@ -9685,6 +9766,10 @@ const RadioButton = forwardRef((props, ref) => {
9685
9766
  inputProps,
9686
9767
  ...forwardedProps
9687
9768
  } = otherProps;
9769
+ const {
9770
+ block,
9771
+ element
9772
+ } = useClassnames(CLASSNAME$s);
9688
9773
  const generatedInputId = useId();
9689
9774
  const inputId = id || generatedInputId;
9690
9775
  const handleChange = event => {
@@ -9695,18 +9780,17 @@ const RadioButton = forwardRef((props, ref) => {
9695
9780
  return /*#__PURE__*/jsxs("div", {
9696
9781
  ref: ref,
9697
9782
  ...forwardedProps,
9698
- className: classNames(className, handleBasicClasses({
9699
- isChecked,
9700
- isDisabled: isAnyDisabled,
9701
- isUnchecked: !isChecked,
9702
- prefix: CLASSNAME$s,
9703
- theme
9704
- })),
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),
9705
9789
  children: [/*#__PURE__*/jsxs("div", {
9706
- className: `${CLASSNAME$s}__input-wrapper`,
9790
+ className: element('input-wrapper'),
9707
9791
  children: [/*#__PURE__*/jsx("input", {
9708
9792
  ref: inputRef,
9709
- className: `${CLASSNAME$s}__input-native`,
9793
+ className: element('input-native'),
9710
9794
  ...disabledStateProps,
9711
9795
  id: inputId,
9712
9796
  type: "radio",
@@ -9718,24 +9802,24 @@ const RadioButton = forwardRef((props, ref) => {
9718
9802
  "aria-describedby": helper ? `${inputId}-helper` : undefined,
9719
9803
  ...inputProps
9720
9804
  }), /*#__PURE__*/jsxs("div", {
9721
- className: `${CLASSNAME$s}__input-placeholder`,
9805
+ className: element('input-placeholder'),
9722
9806
  children: [/*#__PURE__*/jsx("div", {
9723
- className: `${CLASSNAME$s}__input-background`
9807
+ className: element('input-background')
9724
9808
  }), /*#__PURE__*/jsx("div", {
9725
- className: `${CLASSNAME$s}__input-indicator`
9809
+ className: element('input-indicator')
9726
9810
  })]
9727
9811
  })]
9728
9812
  }), /*#__PURE__*/jsxs("div", {
9729
- className: `${CLASSNAME$s}__content`,
9813
+ className: element('content'),
9730
9814
  children: [label && /*#__PURE__*/jsx(InputLabel, {
9731
9815
  htmlFor: inputId,
9732
9816
  theme: theme,
9733
- className: `${CLASSNAME$s}__label`,
9817
+ className: element('label'),
9734
9818
  children: label
9735
9819
  }), helper && /*#__PURE__*/jsx(InputHelper, {
9736
9820
  id: `${inputId}-helper`,
9737
9821
  theme: theme,
9738
- className: `${CLASSNAME$s}__helper`,
9822
+ className: element('helper'),
9739
9823
  children: helper
9740
9824
  })]
9741
9825
  })]
@@ -9768,10 +9852,13 @@ const RadioGroup = forwardRef((props, ref) => {
9768
9852
  className,
9769
9853
  ...forwardedProps
9770
9854
  } = props;
9855
+ const {
9856
+ block
9857
+ } = useClassnames(CLASSNAME$r);
9771
9858
  return /*#__PURE__*/jsx("div", {
9772
9859
  ref: ref,
9773
9860
  ...forwardedProps,
9774
- className: classNames(className, CLASSNAME$r),
9861
+ className: block([className]),
9775
9862
  children: children
9776
9863
  });
9777
9864
  });
@@ -9806,6 +9893,10 @@ function useListenFocus(ref) {
9806
9893
  const CLASSNAME$q = 'lumx-select';
9807
9894
  const WithSelectContext = (SelectElement, props, ref) => {
9808
9895
  const defaultTheme = useTheme() || Theme.light;
9896
+ const {
9897
+ block,
9898
+ element
9899
+ } = useClassnames(CLASSNAME$q);
9809
9900
  const {
9810
9901
  children,
9811
9902
  className,
@@ -9856,19 +9947,18 @@ const WithSelectContext = (SelectElement, props, ref) => {
9856
9947
  useFocusTrap(isOpen && dropdownRef.current, focusElement?.current);
9857
9948
  return /*#__PURE__*/jsxs("div", {
9858
9949
  ref: mergeRefs(ref, selectRef),
9859
- className: classNames(className, handleBasicClasses({
9860
- hasError,
9861
- hasLabel: Boolean(label),
9862
- hasPlaceholder: Boolean(placeholder),
9863
- hasValue: !isEmpty,
9864
- isDisabled,
9865
- isEmpty,
9866
- isFocus,
9867
- isOpen,
9868
- isValid,
9869
- prefix: CLASSNAME$q,
9870
- theme: theme === Theme.light ? Theme.light : Theme.dark
9871
- })),
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),
9872
9962
  children: [/*#__PURE__*/jsx(SelectElement, {
9873
9963
  ...forwardedProps,
9874
9964
  anchorRef: anchorRef,
@@ -9899,12 +9989,12 @@ const WithSelectContext = (SelectElement, props, ref) => {
9899
9989
  ref: dropdownRef,
9900
9990
  children: children
9901
9991
  }), hasError && error && /*#__PURE__*/jsx(InputHelper, {
9902
- className: `${CLASSNAME$q}__helper`,
9992
+ className: element('helper'),
9903
9993
  kind: Kind.error,
9904
9994
  theme: theme,
9905
9995
  children: error
9906
9996
  }), helper && /*#__PURE__*/jsx(InputHelper, {
9907
- className: `${CLASSNAME$q}__helper`,
9997
+ className: element('helper'),
9908
9998
  theme: theme,
9909
9999
  children: helper
9910
10000
  })]
@@ -9960,13 +10050,16 @@ const SelectField = props => {
9960
10050
  selectElementRef,
9961
10051
  ...forwardedProps
9962
10052
  } = props;
10053
+ const {
10054
+ element
10055
+ } = useClassnames(CLASSNAME$p);
9963
10056
  return /*#__PURE__*/jsxs(Fragment, {
9964
10057
  children: [variant === SelectVariant.input && /*#__PURE__*/jsxs(Fragment, {
9965
10058
  children: [label && /*#__PURE__*/jsx("div", {
9966
- className: `${CLASSNAME$p}__header`,
10059
+ className: element('header'),
9967
10060
  children: /*#__PURE__*/jsx(InputLabel, {
9968
10061
  htmlFor: id,
9969
- className: `${CLASSNAME$p}__label`,
10062
+ className: element('label'),
9970
10063
  isRequired: isRequired,
9971
10064
  theme: theme,
9972
10065
  children: label
@@ -9974,33 +10067,35 @@ const SelectField = props => {
9974
10067
  }), /*#__PURE__*/jsxs("div", {
9975
10068
  ref: mergeRefs(anchorRef, selectElementRef),
9976
10069
  id: id,
9977
- className: `${CLASSNAME$p}__wrapper`,
10070
+ className: element('wrapper'),
9978
10071
  onClick: onInputClick,
9979
10072
  onKeyDown: handleKeyboardNav,
9980
10073
  tabIndex: isDisabled ? undefined : 0,
9981
10074
  "aria-disabled": isDisabled || undefined,
9982
10075
  ...forwardedProps,
9983
10076
  children: [icon && /*#__PURE__*/jsx(Icon, {
9984
- className: `${CLASSNAME$p}__input-icon`,
10077
+ className: element('input-icon'),
9985
10078
  color: theme === Theme.dark ? 'light' : undefined,
9986
10079
  icon: icon,
9987
10080
  size: Size.xs
9988
10081
  }), /*#__PURE__*/jsxs("div", {
9989
- className: classNames([`${CLASSNAME$p}__input-native`, isEmpty && placeholder && `${CLASSNAME$p}__input-native--placeholder`]),
10082
+ className: element('input-native', {
10083
+ placeholder: isEmpty && placeholder
10084
+ }),
9990
10085
  children: [!isEmpty && /*#__PURE__*/jsx("span", {
9991
10086
  children: selectedValueRender?.(value)
9992
10087
  }), isEmpty && placeholder && /*#__PURE__*/jsx("span", {
9993
10088
  children: placeholder
9994
10089
  })]
9995
10090
  }), (isValid || hasError) && /*#__PURE__*/jsx("div", {
9996
- className: `${CLASSNAME$p}__input-validity`,
10091
+ className: element('input-validity'),
9997
10092
  children: /*#__PURE__*/jsx(Icon, {
9998
10093
  icon: isValid ? mdiCheckCircle : mdiAlertCircle,
9999
10094
  size: Size.xxs
10000
10095
  })
10001
10096
  }), hasInputClear && clearButtonProps && /*#__PURE__*/jsx(IconButton, {
10002
10097
  ...clearButtonProps,
10003
- className: `${CLASSNAME$p}__input-clear`,
10098
+ className: element('input-clear'),
10004
10099
  icon: mdiCloseCircle,
10005
10100
  emphasis: Emphasis.low,
10006
10101
  size: Size.s,
@@ -10008,7 +10103,7 @@ const SelectField = props => {
10008
10103
  onClick: onClear,
10009
10104
  onKeyDown: stopPropagation
10010
10105
  }), /*#__PURE__*/jsx("div", {
10011
- className: `${CLASSNAME$p}__input-indicator`,
10106
+ className: element('input-indicator'),
10012
10107
  children: /*#__PURE__*/jsx(Icon, {
10013
10108
  icon: mdiMenuDown,
10014
10109
  size: Size.s
@@ -10046,14 +10141,16 @@ const SelectField = props => {
10046
10141
  const Select = forwardRef((props, ref) => {
10047
10142
  const isEmpty$1 = isEmpty(props.value);
10048
10143
  const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty$1;
10144
+ const {
10145
+ block
10146
+ } = useClassnames(CLASSNAME$p);
10049
10147
  return WithSelectContext(SelectField, {
10050
10148
  ...DEFAULT_PROPS$p,
10051
10149
  ...props,
10052
- className: classNames(props.className, handleBasicClasses({
10053
- hasInputClear,
10054
- hasUnique: !props.isEmpty,
10055
- prefix: CLASSNAME$p
10056
- })),
10150
+ className: block({
10151
+ 'has-input-clear': hasInputClear,
10152
+ 'has-unique': !props.isEmpty
10153
+ }, props.className),
10057
10154
  hasInputClear,
10058
10155
  isEmpty: isEmpty$1
10059
10156
  }, ref);
@@ -10091,6 +10188,9 @@ const DEFAULT_PROPS$o = {
10091
10188
  };
10092
10189
  const SelectMultipleField = props => {
10093
10190
  const defaultTheme = useTheme();
10191
+ const {
10192
+ element
10193
+ } = useClassnames(CLASSNAME$o);
10094
10194
  const {
10095
10195
  anchorRef,
10096
10196
  handleKeyboardNav,
@@ -10116,10 +10216,10 @@ const SelectMultipleField = props => {
10116
10216
  return /*#__PURE__*/jsxs(Fragment, {
10117
10217
  children: [variant === SelectVariant.input && /*#__PURE__*/jsxs(Fragment, {
10118
10218
  children: [label && /*#__PURE__*/jsx("div", {
10119
- className: `${CLASSNAME$o}__header`,
10219
+ className: element('header'),
10120
10220
  children: /*#__PURE__*/jsx(InputLabel, {
10121
10221
  htmlFor: id,
10122
- className: `${CLASSNAME$o}__label`,
10222
+ className: element('label'),
10123
10223
  isRequired: isRequired,
10124
10224
  theme: theme,
10125
10225
  children: label
@@ -10127,33 +10227,35 @@ const SelectMultipleField = props => {
10127
10227
  }), /*#__PURE__*/jsxs("div", {
10128
10228
  ref: mergeRefs(anchorRef, selectElementRef),
10129
10229
  id: id,
10130
- className: `${CLASSNAME$o}__wrapper`,
10230
+ className: element('wrapper'),
10131
10231
  onClick: onInputClick,
10132
10232
  onKeyDown: handleKeyboardNav,
10133
10233
  tabIndex: isDisabled ? undefined : 0,
10134
10234
  "aria-disabled": isDisabled || undefined,
10135
10235
  ...forwardedProps,
10136
10236
  children: [icon && /*#__PURE__*/jsx(Icon, {
10137
- className: `${CLASSNAME$o}__input-icon`,
10237
+ className: element('input-icon'),
10138
10238
  color: theme === Theme.dark ? 'light' : undefined,
10139
10239
  icon: icon,
10140
10240
  size: Size.xs
10141
10241
  }), /*#__PURE__*/jsx("div", {
10142
- className: `${CLASSNAME$o}__chips`,
10242
+ className: element('chips'),
10143
10243
  children: !isEmpty && value.map((val, index) => selectedChipRender?.(val, index, onClear, isDisabled, theme))
10144
10244
  }), isEmpty && placeholder && /*#__PURE__*/jsx("div", {
10145
- className: classNames([`${CLASSNAME$o}__input-native`, `${CLASSNAME$o}__input-native--placeholder`]),
10245
+ className: element('input-native', {
10246
+ placeholder: true
10247
+ }),
10146
10248
  children: /*#__PURE__*/jsx("span", {
10147
10249
  children: placeholder
10148
10250
  })
10149
10251
  }), (isValid || hasError) && /*#__PURE__*/jsx("div", {
10150
- className: `${CLASSNAME$o}__input-validity`,
10252
+ className: element('input-validity'),
10151
10253
  children: /*#__PURE__*/jsx(Icon, {
10152
10254
  icon: isValid ? mdiCheckCircle : mdiAlertCircle,
10153
10255
  size: Size.xxs
10154
10256
  })
10155
10257
  }), /*#__PURE__*/jsx("div", {
10156
- className: `${CLASSNAME$o}__input-indicator`,
10258
+ className: element('input-indicator'),
10157
10259
  children: /*#__PURE__*/jsx(Icon, {
10158
10260
  icon: mdiMenuDown,
10159
10261
  size: Size.s
@@ -10193,13 +10295,15 @@ const SelectMultipleField = props => {
10193
10295
  * @return React element.
10194
10296
  */
10195
10297
  const SelectMultiple = forwardRef((props, ref) => {
10298
+ const {
10299
+ block
10300
+ } = useClassnames(CLASSNAME$o);
10196
10301
  return WithSelectContext(SelectMultipleField, {
10197
10302
  ...DEFAULT_PROPS$o,
10198
10303
  ...props,
10199
- className: classNames(props.className, handleBasicClasses({
10200
- hasMultiple: !props.isEmpty,
10201
- prefix: CLASSNAME$o
10202
- })),
10304
+ className: block({
10305
+ 'has-multiple': !props.isEmpty
10306
+ }, props.className),
10203
10307
  isEmpty: props.value.length === 0,
10204
10308
  isMultiple: true
10205
10309
  }, ref);
@@ -10233,11 +10337,14 @@ const SideNavigation = forwardRef((props, ref) => {
10233
10337
  theme = defaultTheme,
10234
10338
  ...forwardedProps
10235
10339
  } = props;
10340
+ const {
10341
+ block
10342
+ } = useClassnames(CLASSNAME$n);
10236
10343
  const content = Children.toArray(children).filter(isComponent(SideNavigationItem));
10237
10344
  return /*#__PURE__*/jsx("ul", {
10238
10345
  ref: ref,
10239
10346
  ...forwardedProps,
10240
- className: classNames(className, theme === Theme.dark && 'lumx-color-font-light-N', CLASSNAME$n),
10347
+ className: block([className, theme === Theme.dark && classNames.font('light')]),
10241
10348
  children: content
10242
10349
  });
10243
10350
  });
@@ -10290,6 +10397,10 @@ const SideNavigationItem = forwardRef((props, ref) => {
10290
10397
  const hasContent = !isEmpty(content);
10291
10398
  const shouldSplitActions = Boolean(onActionClick);
10292
10399
  const showChildren = hasContent && isOpen;
10400
+ const {
10401
+ block,
10402
+ element
10403
+ } = useClassnames(CLASSNAME$m);
10293
10404
  const contentId = useId();
10294
10405
  const ariaProps = {};
10295
10406
  if (hasContent) {
@@ -10300,21 +10411,20 @@ const SideNavigationItem = forwardRef((props, ref) => {
10300
10411
  return /*#__PURE__*/jsxs("li", {
10301
10412
  ref: ref,
10302
10413
  ...forwardedProps,
10303
- className: classNames(className, handleBasicClasses({
10304
- emphasis,
10305
- isOpen: showChildren,
10306
- isSelected,
10307
- prefix: CLASSNAME$m
10308
- })),
10414
+ className: block({
10415
+ [`emphasis-${emphasis}`]: Boolean(emphasis),
10416
+ 'is-open': showChildren,
10417
+ 'is-selected': isSelected
10418
+ }, className),
10309
10419
  children: [shouldSplitActions ? /*#__PURE__*/jsxs("div", {
10310
- className: `${CLASSNAME$m}__wrapper`,
10420
+ className: element('wrapper'),
10311
10421
  children: [/*#__PURE__*/jsxs(RawClickable, {
10312
10422
  as: linkAs || (linkProps?.href ? 'a' : 'button'),
10313
10423
  ...linkProps,
10314
- className: `${CLASSNAME$m}__link`,
10424
+ className: element('link'),
10315
10425
  onClick: onClick,
10316
10426
  children: [icon && /*#__PURE__*/jsx(Icon, {
10317
- className: `${CLASSNAME$m}__icon`,
10427
+ className: element('icon'),
10318
10428
  icon: icon,
10319
10429
  size: Size.xs
10320
10430
  }), /*#__PURE__*/jsx("span", {
@@ -10322,7 +10432,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
10322
10432
  })]
10323
10433
  }), /*#__PURE__*/jsx(IconButton, {
10324
10434
  ...toggleButtonProps,
10325
- className: `${CLASSNAME$m}__toggle`,
10435
+ className: element('toggle'),
10326
10436
  icon: isOpen ? mdiChevronUp : mdiChevronDown,
10327
10437
  size: Size.m,
10328
10438
  emphasis: Emphasis.low,
@@ -10332,22 +10442,22 @@ const SideNavigationItem = forwardRef((props, ref) => {
10332
10442
  }) : /*#__PURE__*/jsxs(RawClickable, {
10333
10443
  as: linkAs || (linkProps?.href ? 'a' : 'button'),
10334
10444
  ...linkProps,
10335
- className: `${CLASSNAME$m}__link`,
10445
+ className: element('link'),
10336
10446
  onClick: onClick,
10337
10447
  ...ariaProps,
10338
10448
  children: [icon && /*#__PURE__*/jsx(Icon, {
10339
- className: `${CLASSNAME$m}__icon`,
10449
+ className: element('icon'),
10340
10450
  icon: icon,
10341
10451
  size: Size.xs
10342
10452
  }), /*#__PURE__*/jsx("span", {
10343
10453
  children: label
10344
10454
  }), hasContent && /*#__PURE__*/jsx(Icon, {
10345
- className: `${CLASSNAME$m}__chevron`,
10455
+ className: element('chevron'),
10346
10456
  icon: isOpen ? mdiChevronUp : mdiChevronDown,
10347
10457
  size: Size.xs
10348
10458
  })]
10349
10459
  }), (closeMode === 'hide' || showChildren) && /*#__PURE__*/jsx("ul", {
10350
- className: `${CLASSNAME$m}__children`,
10460
+ className: element('children'),
10351
10461
  id: contentId,
10352
10462
  children: content
10353
10463
  })]
@@ -10385,15 +10495,17 @@ const SkeletonCircle = forwardRef((props, ref) => {
10385
10495
  theme = defaultTheme,
10386
10496
  ...forwardedProps
10387
10497
  } = props;
10498
+ const {
10499
+ block
10500
+ } = useClassnames(CLASSNAME$l);
10388
10501
  return /*#__PURE__*/jsx("div", {
10389
10502
  ref: ref,
10390
10503
  ...forwardedProps,
10391
- className: classNames(className, handleBasicClasses({
10392
- prefix: CLASSNAME$l,
10393
- size,
10394
- color,
10395
- theme
10396
- }))
10504
+ className: block({
10505
+ [`size-${size}`]: Boolean(size),
10506
+ [`color-${color}`]: Boolean(color),
10507
+ [`theme-${theme}`]: Boolean(theme)
10508
+ }, className)
10397
10509
  });
10398
10510
  });
10399
10511
  SkeletonCircle.displayName = COMPONENT_NAME$m;
@@ -10443,20 +10555,23 @@ const SkeletonRectangle = forwardRef((props, ref) => {
10443
10555
  color,
10444
10556
  ...forwardedProps
10445
10557
  } = props;
10558
+ const {
10559
+ block,
10560
+ element
10561
+ } = useClassnames(CLASSNAME$k);
10446
10562
  return /*#__PURE__*/jsx("div", {
10447
10563
  ref: ref,
10448
10564
  ...forwardedProps,
10449
- className: classNames(className, handleBasicClasses({
10450
- prefix: CLASSNAME$k,
10451
- aspectRatio,
10452
- height: aspectRatio ? undefined : height,
10453
- theme,
10454
- variant,
10455
- width,
10456
- color
10457
- })),
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),
10458
10573
  children: /*#__PURE__*/jsx("div", {
10459
- className: `${CLASSNAME$k}__inner`
10574
+ className: element('inner')
10460
10575
  })
10461
10576
  });
10462
10577
  });
@@ -10493,21 +10608,24 @@ const SkeletonTypography = forwardRef((props, ref) => {
10493
10608
  color,
10494
10609
  ...forwardedProps
10495
10610
  } = props;
10611
+ const {
10612
+ block,
10613
+ element
10614
+ } = useClassnames(CLASSNAME$j);
10496
10615
  return /*#__PURE__*/jsx("div", {
10497
10616
  ref: ref,
10498
10617
  ...forwardedProps,
10499
- className: classNames(className, handleBasicClasses({
10500
- prefix: CLASSNAME$j,
10501
- theme,
10502
- typography,
10503
- color
10504
- })),
10618
+ className: block({
10619
+ [`theme-${theme}`]: Boolean(theme),
10620
+ [`typography-${typography}`]: Boolean(typography),
10621
+ [`color-${color}`]: Boolean(color)
10622
+ }, className),
10505
10623
  style: {
10506
10624
  ...forwardedProps.style,
10507
10625
  width
10508
10626
  },
10509
10627
  children: /*#__PURE__*/jsx("div", {
10510
- className: `${CLASSNAME$j}__inner`
10628
+ className: element('inner')
10511
10629
  })
10512
10630
  });
10513
10631
  });
@@ -10620,6 +10738,10 @@ const Slider = forwardRef((props, ref) => {
10620
10738
  value,
10621
10739
  ...forwardedProps
10622
10740
  } = otherProps;
10741
+ const {
10742
+ block,
10743
+ element
10744
+ } = useClassnames(CLASSNAME$i);
10623
10745
  const generatedId = useId();
10624
10746
  const sliderId = id || generatedId;
10625
10747
  const sliderLabelId = useMemo(() => `label-${sliderId}`, [sliderId]);
@@ -10751,41 +10873,40 @@ const Slider = forwardRef((props, ref) => {
10751
10873
  return /*#__PURE__*/jsxs("div", {
10752
10874
  ref: ref,
10753
10875
  ...forwardedProps,
10754
- className: classNames(className, handleBasicClasses({
10755
- prefix: CLASSNAME$i,
10756
- theme,
10757
- hasLabel: Boolean(label)
10758
- })),
10876
+ className: block({
10877
+ 'has-label': Boolean(label),
10878
+ [`theme-${theme}`]: Boolean(theme)
10879
+ }, className),
10759
10880
  onMouseDown: handleMouseDown,
10760
10881
  children: [label && /*#__PURE__*/jsx(InputLabel, {
10761
10882
  id: sliderLabelId,
10762
10883
  htmlFor: sliderId,
10763
- className: `${CLASSNAME$i}__label`,
10884
+ className: element('label'),
10764
10885
  theme: theme,
10765
10886
  children: label
10766
10887
  }), helper && /*#__PURE__*/jsx(InputHelper, {
10767
- className: `${CLASSNAME$i}__helper`,
10888
+ className: element('helper'),
10768
10889
  theme: theme,
10769
10890
  children: helper
10770
10891
  }), /*#__PURE__*/jsxs("div", {
10771
- className: `${CLASSNAME$i}__ui-wrapper`,
10892
+ className: element('ui-wrapper'),
10772
10893
  children: [!hideMinMaxLabel && /*#__PURE__*/jsx("span", {
10773
- className: `${CLASSNAME$i}__value-label ${CLASSNAME$i}__value-label--min`,
10894
+ className: element('value-label', 'min'),
10774
10895
  children: min
10775
10896
  }), /*#__PURE__*/jsxs("div", {
10776
- className: `${CLASSNAME$i}__wrapper`,
10897
+ className: element('wrapper'),
10777
10898
  ref: sliderRef,
10778
10899
  children: [/*#__PURE__*/jsx("div", {
10779
- className: `${CLASSNAME$i}__track ${CLASSNAME$i}__track--background`
10900
+ className: element('track', 'background')
10780
10901
  }), /*#__PURE__*/jsx("div", {
10781
- className: `${CLASSNAME$i}__track ${CLASSNAME$i}__track--active`,
10902
+ className: element('track', 'active'),
10782
10903
  style: {
10783
10904
  width: percentString
10784
10905
  }
10785
10906
  }), steps ? /*#__PURE__*/jsx("div", {
10786
- className: `${CLASSNAME$i}__ticks`,
10907
+ className: element('ticks'),
10787
10908
  children: availableSteps.map((step, idx) => /*#__PURE__*/jsx("div", {
10788
- className: `${CLASSNAME$i}__tick`,
10909
+ className: element('tick'),
10789
10910
  style: {
10790
10911
  left: `${step * 100}%`
10791
10912
  }
@@ -10795,7 +10916,7 @@ const Slider = forwardRef((props, ref) => {
10795
10916
  "aria-labelledby": sliderLabelId,
10796
10917
  name: name,
10797
10918
  id: sliderId,
10798
- className: `${CLASSNAME$i}__handle`,
10919
+ className: element('handle'),
10799
10920
  style: {
10800
10921
  left: percentString
10801
10922
  },
@@ -10803,7 +10924,7 @@ const Slider = forwardRef((props, ref) => {
10803
10924
  ...disabledStateProps
10804
10925
  })]
10805
10926
  }), !hideMinMaxLabel && /*#__PURE__*/jsx("span", {
10806
- className: `${CLASSNAME$i}__value-label ${CLASSNAME$i}__value-label--max`,
10927
+ className: element('value-label', 'max'),
10807
10928
  children: max
10808
10929
  })]
10809
10930
  })]
@@ -11153,6 +11274,9 @@ const SlideshowItemGroup = forwardRef((props, ref) => {
11153
11274
  isDisplayed,
11154
11275
  ...forwardedProps
11155
11276
  } = props;
11277
+ const {
11278
+ block
11279
+ } = useClassnames(CLASSNAME$h);
11156
11280
  const groupRef = React__default.useRef(null);
11157
11281
  useSlideFocusManagement({
11158
11282
  isSlideDisplayed: isDisplayed,
@@ -11161,7 +11285,7 @@ const SlideshowItemGroup = forwardRef((props, ref) => {
11161
11285
  return /*#__PURE__*/jsx("div", {
11162
11286
  ref: mergeRefs(groupRef, ref),
11163
11287
  role: role,
11164
- className: classNames(className, CLASSNAME$h),
11288
+ className: block([className]),
11165
11289
  "aria-roledescription": "slide",
11166
11290
  "aria-label": label,
11167
11291
  ...forwardedProps,
@@ -11310,9 +11434,12 @@ const SlideshowItem = forwardRef((props, ref) => {
11310
11434
  children,
11311
11435
  ...forwardedProps
11312
11436
  } = props;
11437
+ const {
11438
+ block
11439
+ } = useClassnames(CLASSNAME$g);
11313
11440
  return /*#__PURE__*/jsx("div", {
11314
11441
  ref: ref,
11315
- className: classNames(className, CLASSNAME$g),
11442
+ className: block([className]),
11316
11443
  ...forwardedProps,
11317
11444
  children: children
11318
11445
  });
@@ -11427,6 +11554,10 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
11427
11554
  parent = parentRef instanceof HTMLElement ? parentRef : parentRef?.current;
11428
11555
  }
11429
11556
  const paginationRef = React__default.useRef(null);
11557
+ const {
11558
+ block,
11559
+ element
11560
+ } = useClassnames(CLASSNAME$f);
11430
11561
  // Listen to touch swipe navigate left & right.
11431
11562
  useSwipeNavigate(parent,
11432
11563
  // Go next without loopback.
@@ -11441,8 +11572,8 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
11441
11572
  parentRef: paginationRef,
11442
11573
  elementSelector: 'button',
11443
11574
  keepTabIndex: true,
11444
- onElementFocus: element => {
11445
- element.click();
11575
+ onElementFocus: el => {
11576
+ el.click();
11446
11577
  }
11447
11578
  });
11448
11579
 
@@ -11456,24 +11587,22 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
11456
11587
  return /*#__PURE__*/jsxs("div", {
11457
11588
  ref: ref,
11458
11589
  ...forwardedProps,
11459
- className: classNames(className, handleBasicClasses({
11460
- prefix: CLASSNAME$f,
11461
- theme
11462
- }), {
11463
- [`${CLASSNAME$f}--has-infinite-pagination`]: slidesCount > PAGINATION_ITEMS_MAX
11464
- }),
11590
+ className: block({
11591
+ [`theme-${theme}`]: Boolean(theme),
11592
+ 'has-infinite-pagination': slidesCount > PAGINATION_ITEMS_MAX
11593
+ }, className),
11465
11594
  children: [/*#__PURE__*/jsx(IconButton, {
11466
11595
  ...previousButtonProps,
11467
11596
  icon: mdiChevronLeft,
11468
- className: `${CLASSNAME$f}__navigation`,
11597
+ className: element('navigation'),
11469
11598
  color: theme === Theme.dark ? 'light' : 'dark',
11470
11599
  emphasis: Emphasis.low,
11471
11600
  onClick: onPreviousClick
11472
11601
  }), /*#__PURE__*/jsx("div", {
11473
11602
  ref: paginationRef,
11474
- className: `${CLASSNAME$f}__pagination`,
11603
+ className: element('pagination'),
11475
11604
  children: /*#__PURE__*/jsx("div", {
11476
- className: `${CLASSNAME$f}__pagination-items`,
11605
+ className: element('pagination-items'),
11477
11606
  style: wrapperStyle,
11478
11607
  role: "tablist",
11479
11608
  ...paginationProps,
@@ -11488,12 +11617,11 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
11488
11617
  } = paginationItemProps ? paginationItemProps(index) : {};
11489
11618
  const ariaLabel = label || paginationItemLabel?.(index) || `${index + 1} / ${slidesCount}`;
11490
11619
  return /*#__PURE__*/jsx("button", {
11491
- className: classNames(handleBasicClasses({
11492
- prefix: `${CLASSNAME$f}__pagination-item`,
11493
- isActive,
11494
- isOnEdge,
11495
- isOutRange
11496
- }), itemClassName),
11620
+ className: element('pagination-item', {
11621
+ 'is-active': isActive,
11622
+ 'is-on-edge': isOnEdge,
11623
+ 'is-out-range': isOutRange
11624
+ }, itemClassName),
11497
11625
  type: "button",
11498
11626
  tabIndex: isActive ? undefined : -1,
11499
11627
  role: "tab",
@@ -11502,18 +11630,18 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
11502
11630
  "aria-label": ariaLabel,
11503
11631
  ...itemProps
11504
11632
  }, index);
11505
- }), [slidesCount, visibleRange.min, visibleRange.max, activeIndex, paginationItemProps, paginationItemLabel, onPaginationClick])
11633
+ }), [element, slidesCount, visibleRange.min, visibleRange.max, activeIndex, paginationItemProps, paginationItemLabel, onPaginationClick])
11506
11634
  })
11507
11635
  }), playButtonProps ? /*#__PURE__*/jsx(IconButton, {
11508
11636
  ...playButtonProps,
11509
11637
  icon: isAutoPlaying ? mdiPauseCircleOutline : mdiPlayCircleOutline,
11510
- className: `${CLASSNAME$f}__play`,
11638
+ className: element('play'),
11511
11639
  color: theme === Theme.dark ? 'light' : 'dark',
11512
11640
  emphasis: Emphasis.low
11513
11641
  }) : null, /*#__PURE__*/jsx(IconButton, {
11514
11642
  ...nextButtonProps,
11515
11643
  icon: mdiChevronRight,
11516
- className: `${CLASSNAME$f}__navigation`,
11644
+ className: element('navigation'),
11517
11645
  color: theme === Theme.dark ? 'light' : 'dark',
11518
11646
  emphasis: Emphasis.low,
11519
11647
  onClick: onNextClick
@@ -11566,6 +11694,10 @@ const Slides = forwardRef((props, ref) => {
11566
11694
  const wrapperRef = React__default.useRef(null);
11567
11695
  const startIndexVisible = activeIndex;
11568
11696
  const endIndexVisible = startIndexVisible + 1;
11697
+ const {
11698
+ block,
11699
+ element
11700
+ } = useClassnames(CLASSNAME$e);
11569
11701
 
11570
11702
  // Inline style of wrapper element.
11571
11703
  const wrapperStyle = {
@@ -11579,23 +11711,21 @@ const Slides = forwardRef((props, ref) => {
11579
11711
  id: id,
11580
11712
  ref: ref,
11581
11713
  ...forwardedProps,
11582
- className: classNames(className, handleBasicClasses({
11583
- prefix: CLASSNAME$e,
11584
- theme
11585
- }), {
11586
- [`${CLASSNAME$e}--fill-height`]: fillHeight,
11587
- [`${CLASSNAME$e}--group-by-${groupBy}`]: Boolean(groupBy)
11588
- }),
11714
+ className: block({
11715
+ [`theme-${theme}`]: Boolean(theme),
11716
+ 'fill-height': fillHeight,
11717
+ [`group-by-${groupBy}`]: Boolean(groupBy)
11718
+ }, className),
11589
11719
  "aria-roledescription": "carousel",
11590
11720
  children: [/*#__PURE__*/jsx("div", {
11591
11721
  id: slidesId,
11592
- className: `${CLASSNAME$e}__slides`,
11722
+ className: element('slides'),
11593
11723
  onMouseEnter: toggleAutoPlay,
11594
11724
  onMouseLeave: toggleAutoPlay,
11595
11725
  "aria-live": isAutoPlaying ? 'off' : 'polite',
11596
11726
  children: /*#__PURE__*/jsx("div", {
11597
11727
  ref: wrapperRef,
11598
- className: `${CLASSNAME$e}__wrapper`,
11728
+ className: element('wrapper'),
11599
11729
  style: wrapperStyle,
11600
11730
  children: groups.map((group, index) => /*#__PURE__*/jsx(SlideshowItemGroup, {
11601
11731
  id: slidesId && buildSlideShowGroupId(slidesId, index),
@@ -11657,6 +11787,10 @@ const Switch = forwardRef((props, ref) => {
11657
11787
  inputProps = {},
11658
11788
  ...forwardedProps
11659
11789
  } = otherProps;
11790
+ const {
11791
+ block,
11792
+ element
11793
+ } = useClassnames(CLASSNAME$d);
11660
11794
  const generatedInputId = useId();
11661
11795
  const inputId = id || generatedInputId;
11662
11796
  const handleChange = event => {
@@ -11667,21 +11801,20 @@ const Switch = forwardRef((props, ref) => {
11667
11801
  return /*#__PURE__*/jsxs("div", {
11668
11802
  ref: ref,
11669
11803
  ...forwardedProps,
11670
- className: classNames(className, handleBasicClasses({
11671
- prefix: CLASSNAME$d,
11672
- isChecked,
11673
- isDisabled: isAnyDisabled,
11674
- position,
11675
- theme,
11676
- isUnchecked: !isChecked
11677
- })),
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),
11678
11811
  children: [/*#__PURE__*/jsxs("div", {
11679
- className: `${CLASSNAME$d}__input-wrapper`,
11812
+ className: element('input-wrapper'),
11680
11813
  children: [/*#__PURE__*/jsx("input", {
11681
11814
  type: "checkbox",
11682
11815
  role: "switch",
11683
11816
  id: inputId,
11684
- className: `${CLASSNAME$d}__input-native`,
11817
+ className: element('input-native'),
11685
11818
  name: name,
11686
11819
  value: value,
11687
11820
  ...disabledStateProps,
@@ -11692,24 +11825,24 @@ const Switch = forwardRef((props, ref) => {
11692
11825
  "aria-describedby": helper ? `${inputId}-helper` : undefined,
11693
11826
  ...inputProps
11694
11827
  }), /*#__PURE__*/jsxs("div", {
11695
- className: `${CLASSNAME$d}__input-placeholder`,
11828
+ className: element('input-placeholder'),
11696
11829
  children: [/*#__PURE__*/jsx("div", {
11697
- className: `${CLASSNAME$d}__input-background`
11830
+ className: element('input-background')
11698
11831
  }), /*#__PURE__*/jsx("div", {
11699
- className: `${CLASSNAME$d}__input-indicator`
11832
+ className: element('input-indicator')
11700
11833
  })]
11701
11834
  })]
11702
11835
  }), Children.count(children) > 0 && /*#__PURE__*/jsxs("div", {
11703
- className: `${CLASSNAME$d}__content`,
11836
+ className: element('content'),
11704
11837
  children: [/*#__PURE__*/jsx(InputLabel, {
11705
11838
  htmlFor: inputId,
11706
11839
  theme: theme,
11707
- className: `${CLASSNAME$d}__label`,
11840
+ className: element('label'),
11708
11841
  children: children
11709
- }), !isEmpty(helper) && /*#__PURE__*/jsx(InputHelper, {
11842
+ }), helper && /*#__PURE__*/jsx(InputHelper, {
11710
11843
  id: `${inputId}-helper`,
11711
11844
  theme: theme,
11712
- className: `${CLASSNAME$d}__helper`,
11845
+ className: element('helper'),
11713
11846
  children: helper
11714
11847
  })]
11715
11848
  })]
@@ -11751,15 +11884,17 @@ const Table = forwardRef((props, ref) => {
11751
11884
  theme = defaultTheme,
11752
11885
  ...forwardedProps
11753
11886
  } = props;
11887
+ const {
11888
+ block
11889
+ } = useClassnames(CLASSNAME$c);
11754
11890
  return /*#__PURE__*/jsx("table", {
11755
11891
  ref: ref,
11756
11892
  ...forwardedProps,
11757
- className: classNames(className, handleBasicClasses({
11758
- prefix: CLASSNAME$c,
11759
- hasBefore,
11760
- hasDividers,
11761
- theme
11762
- })),
11893
+ className: block({
11894
+ 'has-before': hasBefore,
11895
+ 'has-dividers': hasDividers,
11896
+ [`theme-${theme}`]: Boolean(theme)
11897
+ }, className),
11763
11898
  children: children
11764
11899
  });
11765
11900
  });
@@ -11790,10 +11925,13 @@ const TableBody = forwardRef((props, ref) => {
11790
11925
  className,
11791
11926
  ...forwardedProps
11792
11927
  } = props;
11928
+ const {
11929
+ block
11930
+ } = useClassnames(CLASSNAME$b);
11793
11931
  return /*#__PURE__*/jsx("tbody", {
11794
11932
  ref: ref,
11795
11933
  ...forwardedProps,
11796
- className: classNames(className, CLASSNAME$b),
11934
+ className: block([className]),
11797
11935
  children: children
11798
11936
  });
11799
11937
  });
@@ -11851,6 +11989,9 @@ const TableCell = forwardRef((props, ref) => {
11851
11989
  variant = DEFAULT_PROPS$e.variant,
11852
11990
  ...forwardedProps
11853
11991
  } = props;
11992
+ const {
11993
+ block
11994
+ } = useClassnames(CLASSNAME$a);
11854
11995
 
11855
11996
  // Use button if clickable
11856
11997
  const Wrapper = onHeaderClick ? 'button' : 'div';
@@ -11870,11 +12011,11 @@ const TableCell = forwardRef((props, ref) => {
11870
12011
  children: [variant === TableCellVariant.head && /*#__PURE__*/jsx("th", {
11871
12012
  ref: ref,
11872
12013
  ...forwardedProps,
11873
- className: classNames(handleBasicClasses({
11874
- prefix: CLASSNAME$a,
11875
- isSortable,
11876
- isSorted: isSortable && !!sortOrder
11877
- }), className, `${CLASSNAME$a}--head`),
12014
+ className: block({
12015
+ head: true,
12016
+ 'is-sortable': isSortable,
12017
+ 'is-sorted': Boolean(isSortable && sortOrder)
12018
+ }, [className]),
11878
12019
  "aria-sort": ariaSort,
11879
12020
  children: /*#__PURE__*/jsxs(Wrapper, {
11880
12021
  className: `${CLASSNAME$a}-wrapper`,
@@ -11898,7 +12039,9 @@ const TableCell = forwardRef((props, ref) => {
11898
12039
  })
11899
12040
  }), variant === TableCellVariant.body && /*#__PURE__*/jsx("td", {
11900
12041
  ...forwardedProps,
11901
- className: classNames(className, CLASSNAME$a, `${CLASSNAME$a}--body`),
12042
+ className: block({
12043
+ body: true
12044
+ }, [className]),
11902
12045
  children: /*#__PURE__*/jsx("div", {
11903
12046
  className: `${CLASSNAME$a}-content`,
11904
12047
  children: children
@@ -11938,10 +12081,13 @@ const TableHeader = forwardRef((props, ref) => {
11938
12081
  className,
11939
12082
  ...forwardedProps
11940
12083
  } = props;
12084
+ const {
12085
+ block
12086
+ } = useClassnames(CLASSNAME$9);
11941
12087
  return /*#__PURE__*/jsx("thead", {
11942
12088
  ref: ref,
11943
12089
  ...forwardedProps,
11944
- className: classNames(className, CLASSNAME$9),
12090
+ className: block([className]),
11945
12091
  children: children
11946
12092
  });
11947
12093
  });
@@ -11984,16 +12130,18 @@ const TableRow = forwardRef((props, ref) => {
11984
12130
  isSelected,
11985
12131
  ...forwardedProps
11986
12132
  } = otherProps;
12133
+ const {
12134
+ element
12135
+ } = useClassnames(CLASSNAME$c);
11987
12136
  return /*#__PURE__*/jsx("tr", {
11988
12137
  ref: ref,
11989
12138
  tabIndex: isClickable && !disabledStateProps.disabled ? 0 : -1,
11990
12139
  ...forwardedProps,
11991
- className: classNames(className, handleBasicClasses({
11992
- isClickable: isClickable && !isAnyDisabled,
11993
- isDisabled: isAnyDisabled,
11994
- isSelected: isSelected && !isAnyDisabled,
11995
- prefix: CLASSNAME$8
11996
- })),
12140
+ className: element('row', {
12141
+ 'is-clickable': Boolean(isClickable && !isAnyDisabled),
12142
+ 'is-disabled': isAnyDisabled,
12143
+ 'is-selected': Boolean(isSelected && !isAnyDisabled)
12144
+ }, className),
11997
12145
  "aria-disabled": isAnyDisabled,
11998
12146
  children: children
11999
12147
  });
@@ -12109,6 +12257,10 @@ const TabList = forwardRef((props, ref) => {
12109
12257
  ...forwardedProps
12110
12258
  } = props;
12111
12259
  const tabListRef = React__default.useRef(null);
12260
+ const {
12261
+ block,
12262
+ element
12263
+ } = useClassnames(TABS_CLASSNAME);
12112
12264
  useRovingTabIndex({
12113
12265
  parentRef: tabListRef,
12114
12266
  elementSelector: '[role="tab"]',
@@ -12118,14 +12270,13 @@ const TabList = forwardRef((props, ref) => {
12118
12270
  return /*#__PURE__*/jsx("div", {
12119
12271
  ref: mergeRefs(ref, tabListRef),
12120
12272
  ...forwardedProps,
12121
- className: classNames(className, handleBasicClasses({
12122
- prefix: TABS_CLASSNAME,
12123
- layout,
12124
- position,
12125
- theme
12126
- })),
12273
+ className: block({
12274
+ [`layout-${layout}`]: Boolean(layout),
12275
+ [`position-${position}`]: Boolean(position),
12276
+ [`theme-${theme}`]: Boolean(theme)
12277
+ }, className),
12127
12278
  children: /*#__PURE__*/jsx("div", {
12128
- className: `${TABS_CLASSNAME}__links`,
12279
+ className: element('links'),
12129
12280
  role: "tablist",
12130
12281
  "aria-label": ariaLabel,
12131
12282
  children: children
@@ -12179,6 +12330,9 @@ const Tab = forwardRef((props, ref) => {
12179
12330
  } = otherProps;
12180
12331
  const state = useTabProviderContext('tab', id);
12181
12332
  const isActive = propIsActive || state?.isActive;
12333
+ const {
12334
+ element
12335
+ } = useClassnames('lumx-tabs');
12182
12336
  const changeToCurrentTab = useCallback(() => {
12183
12337
  if (isAnyDisabled) {
12184
12338
  return;
@@ -12203,11 +12357,10 @@ const Tab = forwardRef((props, ref) => {
12203
12357
  ...forwardedProps,
12204
12358
  type: "button",
12205
12359
  id: state?.tabId,
12206
- className: classNames(className, handleBasicClasses({
12207
- prefix: CLASSNAME$7,
12208
- isActive,
12209
- isDisabled: isAnyDisabled
12210
- })),
12360
+ className: element('link', {
12361
+ 'is-active': isActive,
12362
+ 'is-disabled': isAnyDisabled
12363
+ }, className),
12211
12364
  onClick: changeToCurrentTab,
12212
12365
  onKeyPress: handleKeyPress,
12213
12366
  onFocus: handleFocus,
@@ -12265,14 +12418,16 @@ const TabPanel = forwardRef((props, ref) => {
12265
12418
  } = props;
12266
12419
  const state = useTabProviderContext('tabPanel', id);
12267
12420
  const isActive = propIsActive || state?.isActive;
12421
+ const {
12422
+ block
12423
+ } = useClassnames(CLASSNAME$6);
12268
12424
  return /*#__PURE__*/jsx("div", {
12269
12425
  ref: ref,
12270
12426
  ...forwardedProps,
12271
12427
  id: state?.tabPanelId,
12272
- className: classNames(className, handleBasicClasses({
12273
- prefix: CLASSNAME$6,
12274
- isActive
12275
- })),
12428
+ className: block({
12429
+ 'is-active': isActive
12430
+ }, className),
12276
12431
  role: "tabpanel",
12277
12432
  tabIndex: isActive ? 0 : -1,
12278
12433
  "aria-labelledby": state?.tabId,
@@ -12321,6 +12476,9 @@ const RawInputText = forwardRef((props, ref) => {
12321
12476
  ...forwardedProps
12322
12477
  } = props;
12323
12478
  const textareaRef = useRef(null);
12479
+ const {
12480
+ block
12481
+ } = useClassnames(INPUT_NATIVE_CLASSNAME);
12324
12482
  const handleChange = useCallback(evt => {
12325
12483
  onChange?.(evt.target.value, name, evt);
12326
12484
  }, [onChange, name]);
@@ -12329,10 +12487,10 @@ const RawInputText = forwardRef((props, ref) => {
12329
12487
  name: name,
12330
12488
  type: type,
12331
12489
  ref: useMergeRefs(ref, textareaRef),
12332
- className: classNames(className, handleBasicClasses({
12333
- prefix: INPUT_NATIVE_CLASSNAME,
12334
- theme
12335
- }), `${INPUT_NATIVE_CLASSNAME}--text`),
12490
+ className: block({
12491
+ [`theme-${theme}`]: Boolean(theme),
12492
+ text: true
12493
+ }, [className]),
12336
12494
  onChange: handleChange,
12337
12495
  value: value
12338
12496
  });
@@ -12403,16 +12561,19 @@ const RawInputTextarea = forwardRef((props, ref) => {
12403
12561
  } = props;
12404
12562
  const textareaRef = useRef(null);
12405
12563
  const rows = useFitRowsToContent(minimumRows, textareaRef, value);
12564
+ const {
12565
+ block
12566
+ } = useClassnames(INPUT_NATIVE_CLASSNAME);
12406
12567
  const handleChange = useCallback(evt => {
12407
12568
  onChange?.(evt.target.value, name, evt);
12408
12569
  }, [onChange, name]);
12409
12570
  return /*#__PURE__*/jsx("textarea", {
12410
12571
  ...forwardedProps,
12411
12572
  name: name,
12412
- className: classNames(className, handleBasicClasses({
12413
- prefix: INPUT_NATIVE_CLASSNAME,
12414
- theme
12415
- }), `${INPUT_NATIVE_CLASSNAME}--textarea`),
12573
+ className: block({
12574
+ [`theme-${theme}`]: Boolean(theme),
12575
+ textarea: true
12576
+ }, [className]),
12416
12577
  ref: useMergeRefs(ref, textareaRef),
12417
12578
  onChange: handleChange,
12418
12579
  value: value,
@@ -12472,6 +12633,10 @@ const TextField = forwardRef((props, ref) => {
12472
12633
  afterElement,
12473
12634
  ...forwardedProps
12474
12635
  } = otherProps;
12636
+ const {
12637
+ block,
12638
+ element
12639
+ } = useClassnames(CLASSNAME$5);
12475
12640
  const generatedTextFieldId = useId();
12476
12641
  const textFieldId = id || generatedTextFieldId;
12477
12642
  /** Keep a clean local input ref to manage focus */
@@ -12546,33 +12711,32 @@ const TextField = forwardRef((props, ref) => {
12546
12711
  });
12547
12712
  return /*#__PURE__*/jsxs("div", {
12548
12713
  ref: ref,
12549
- className: classNames(className, handleBasicClasses({
12550
- hasChips: Boolean(chips),
12551
- hasError: !isValid && hasError,
12552
- hasIcon: Boolean(icon),
12553
- hasInput: !multiline,
12554
- hasInputClear: clearButtonProps && isNotEmpty,
12555
- hasLabel: Boolean(label),
12556
- hasPlaceholder: Boolean(placeholder),
12557
- hasTextarea: multiline,
12558
- hasValue: Boolean(value),
12559
- isDisabled: isAnyDisabled,
12560
- isFocus: isFocus || forceFocusStyle,
12561
- isValid,
12562
- prefix: CLASSNAME$5,
12563
- theme
12564
- })),
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),
12565
12729
  children: [(label || maxLength) && /*#__PURE__*/jsxs("div", {
12566
- className: `${CLASSNAME$5}__header`,
12730
+ className: element('header'),
12567
12731
  children: [label && /*#__PURE__*/jsx(InputLabel, {
12568
12732
  ...labelProps,
12569
12733
  htmlFor: textFieldId,
12570
- className: `${CLASSNAME$5}__label`,
12734
+ className: element('label'),
12571
12735
  isRequired: isRequired,
12572
12736
  theme: theme,
12573
12737
  children: label
12574
12738
  }), maxLength && /*#__PURE__*/jsxs("div", {
12575
- className: `${CLASSNAME$5}__char-counter`,
12739
+ className: element('char-counter'),
12576
12740
  children: [/*#__PURE__*/jsx("span", {
12577
12741
  children: maxLength - valueLength
12578
12742
  }), maxLength - valueLength === 0 && /*#__PURE__*/jsx(Icon, {
@@ -12581,27 +12745,27 @@ const TextField = forwardRef((props, ref) => {
12581
12745
  })]
12582
12746
  })]
12583
12747
  }), /*#__PURE__*/jsxs("div", {
12584
- className: `${CLASSNAME$5}__wrapper`,
12748
+ className: element('wrapper'),
12585
12749
  ref: textFieldRef,
12586
12750
  children: [icon && /*#__PURE__*/jsx(Icon, {
12587
- className: `${CLASSNAME$5}__input-icon`,
12751
+ className: element('input-icon'),
12588
12752
  color: theme === Theme.dark ? 'light' : undefined,
12589
12753
  icon: icon,
12590
12754
  size: Size.xs
12591
12755
  }), chips ? /*#__PURE__*/jsxs("div", {
12592
- className: `${CLASSNAME$5}__chips`,
12756
+ className: element('chips'),
12593
12757
  children: [chips, input]
12594
12758
  }) : /*#__PURE__*/jsx("div", {
12595
- className: `${CLASSNAME$5}__input-wrapper`,
12759
+ className: element(`input-wrapper`),
12596
12760
  children: input
12597
12761
  }), (isValid || hasError) && /*#__PURE__*/jsx(Icon, {
12598
- className: `${CLASSNAME$5}__input-validity`,
12762
+ className: element('input-validity'),
12599
12763
  color: theme === Theme.dark ? 'light' : undefined,
12600
12764
  icon: isValid ? mdiCheckCircle : mdiAlertCircle,
12601
12765
  size: Size.xxs
12602
12766
  }), clearButtonProps && isNotEmpty && !isAnyDisabled && /*#__PURE__*/jsx(IconButton, {
12603
12767
  ...clearButtonProps,
12604
- className: `${CLASSNAME$5}__input-clear`,
12768
+ className: element('input-clear'),
12605
12769
  icon: mdiCloseCircle,
12606
12770
  emphasis: Emphasis.low,
12607
12771
  size: Size.s,
@@ -12609,17 +12773,17 @@ const TextField = forwardRef((props, ref) => {
12609
12773
  onClick: handleClear,
12610
12774
  type: "button"
12611
12775
  }), afterElement && /*#__PURE__*/jsx("div", {
12612
- className: `${CLASSNAME$5}__after-element`,
12776
+ className: element('after-element'),
12613
12777
  children: afterElement
12614
12778
  })]
12615
12779
  }), hasError && error && /*#__PURE__*/jsx(InputHelper, {
12616
- className: `${CLASSNAME$5}__helper`,
12780
+ className: element('helper'),
12617
12781
  kind: Kind.error,
12618
12782
  theme: theme,
12619
12783
  id: errorId,
12620
12784
  children: error
12621
12785
  }), helper && /*#__PURE__*/jsx(InputHelper, {
12622
- className: `${CLASSNAME$5}__helper`,
12786
+ className: element('helper'),
12623
12787
  theme: theme,
12624
12788
  id: helperId,
12625
12789
  children: helper
@@ -12826,6 +12990,10 @@ const Thumbnail = forwardRef((props, ref) => {
12826
12990
  ...forwardedProps
12827
12991
  } = otherProps;
12828
12992
  const [imgElement, setImgElement] = useState();
12993
+ const {
12994
+ block,
12995
+ element
12996
+ } = useClassnames(CLASSNAME$4);
12829
12997
 
12830
12998
  // Image loading state.
12831
12999
  const loadingState = useImageLoad(image, imgElement);
@@ -12872,23 +13040,23 @@ const Thumbnail = forwardRef((props, ref) => {
12872
13040
  return /*#__PURE__*/jsxs(Wrapper, {
12873
13041
  ...wrapperProps,
12874
13042
  ref: ref,
12875
- className: classNames(linkProps?.className, className, handleBasicClasses({
12876
- align,
12877
- aspectRatio,
12878
- prefix: CLASSNAME$4,
12879
- size,
12880
- theme,
12881
- variant,
12882
- isClickable,
12883
- hasError,
12884
- hasIconErrorFallback,
12885
- hasCustomErrorFallback,
12886
- isLoading,
12887
- objectFit,
12888
- hasBadge: !!badge
12889
- }), fillHeight && `${CLASSNAME$4}--fill-height`),
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]),
12890
13058
  children: [/*#__PURE__*/jsxs("span", {
12891
- className: `${CLASSNAME$4}__background`,
13059
+ className: element('background'),
12892
13060
  children: [/*#__PURE__*/jsx("img", {
12893
13061
  // Use placeholder image size
12894
13062
  width: loadingPlaceholderImage?.naturalWidth,
@@ -12903,17 +13071,16 @@ const Thumbnail = forwardRef((props, ref) => {
12903
13071
  ...loadingStyle
12904
13072
  },
12905
13073
  ref: useMergeRefs(setImgElement, propImgRef),
12906
- className: classNames(handleBasicClasses({
12907
- prefix: `${CLASSNAME$4}__image`,
12908
- isLoading,
12909
- hasDefinedSize: Boolean(imgProps?.height && imgProps.width)
12910
- }), imgProps?.className),
13074
+ className: element('image', {
13075
+ 'is-loading': Boolean(isLoading),
13076
+ 'has-defined-size': Boolean(imgProps?.height && imgProps.width)
13077
+ }, imgProps?.className),
12911
13078
  crossOrigin: crossOrigin,
12912
13079
  src: image,
12913
13080
  alt: alt,
12914
13081
  loading: loading
12915
13082
  }), !isLoading && hasError && /*#__PURE__*/jsx("span", {
12916
- className: `${CLASSNAME$4}__fallback`,
13083
+ className: element('fallback'),
12917
13084
  children: hasIconErrorFallback ? /*#__PURE__*/jsx(Icon, {
12918
13085
  icon: fallback,
12919
13086
  size: Size.xxs,
@@ -12921,7 +13088,7 @@ const Thumbnail = forwardRef((props, ref) => {
12921
13088
  }) : fallback
12922
13089
  })]
12923
13090
  }), badge && /*#__PURE__*/React__default.cloneElement(badge, {
12924
- className: classNames(`${CLASSNAME$4}__badge`, badge.props.className)
13091
+ className: element('badge', [badge.props.className])
12925
13092
  })]
12926
13093
  });
12927
13094
  });
@@ -12996,23 +13163,26 @@ const Toolbar = forwardRef((props, ref) => {
12996
13163
  label,
12997
13164
  ...forwardedProps
12998
13165
  } = props;
13166
+ const {
13167
+ block,
13168
+ element
13169
+ } = useClassnames(CLASSNAME$3);
12999
13170
  return /*#__PURE__*/jsxs("div", {
13000
13171
  ref: ref,
13001
13172
  ...forwardedProps,
13002
- className: classNames(className, handleBasicClasses({
13003
- hasAfter: Boolean(after),
13004
- hasBefore: Boolean(before),
13005
- hasLabel: Boolean(label),
13006
- prefix: CLASSNAME$3
13007
- })),
13173
+ className: block({
13174
+ 'has-after': Boolean(after),
13175
+ 'has-before': Boolean(before),
13176
+ 'has-label': Boolean(label)
13177
+ }, className),
13008
13178
  children: [before && /*#__PURE__*/jsx("div", {
13009
- className: `${CLASSNAME$3}__before`,
13179
+ className: element('before'),
13010
13180
  children: before
13011
13181
  }), label && /*#__PURE__*/jsx("div", {
13012
- className: `${CLASSNAME$3}__label`,
13182
+ className: element('label'),
13013
13183
  children: label
13014
13184
  }), after && /*#__PURE__*/jsx("div", {
13015
- className: `${CLASSNAME$3}__after`,
13185
+ className: element('after'),
13016
13186
  children: after
13017
13187
  })]
13018
13188
  });
@@ -13298,6 +13468,10 @@ const Tooltip = forwardRef((props, ref) => {
13298
13468
  }, [isOpen, update, popperElement]);
13299
13469
  const labelLines = label ? label.split('\n') : [];
13300
13470
  const tooltipRef = useMergeRefs(ref, setPopperElement, onPopperMount);
13471
+ const {
13472
+ block,
13473
+ element
13474
+ } = useClassnames(CLASSNAME$2);
13301
13475
  return /*#__PURE__*/jsxs(Fragment, {
13302
13476
  children: [/*#__PURE__*/jsx(TooltipContextProvider, {
13303
13477
  children: wrappedChildren
@@ -13307,20 +13481,19 @@ const Tooltip = forwardRef((props, ref) => {
13307
13481
  ...forwardedProps,
13308
13482
  id: id,
13309
13483
  role: "tooltip",
13310
- className: classNames(className, handleBasicClasses({
13311
- prefix: CLASSNAME$2,
13312
- position,
13313
- isInitializing: !styles.popper?.transform
13314
- }), isHidden && VISUALLY_HIDDEN),
13484
+ className: block({
13485
+ [`position-${position}`]: Boolean(position),
13486
+ 'is-initializing': !styles.popper?.transform
13487
+ }, [className, isHidden && classNames.visuallyHidden()]),
13315
13488
  style: {
13316
13489
  ...(isHidden ? undefined : styles.popper),
13317
13490
  zIndex
13318
13491
  },
13319
13492
  ...attributes.popper,
13320
13493
  children: [/*#__PURE__*/jsx("div", {
13321
- className: `${CLASSNAME$2}__arrow`
13494
+ className: element('arrow')
13322
13495
  }), /*#__PURE__*/jsx("div", {
13323
- className: `${CLASSNAME$2}__inner`,
13496
+ className: element('inner'),
13324
13497
  children: labelLines.map(line => /*#__PURE__*/jsx("p", {
13325
13498
  children: line
13326
13499
  }, line))
@@ -13378,6 +13551,10 @@ const DEFAULT_PROPS$1 = {
13378
13551
  * @return React element.
13379
13552
  */
13380
13553
  const Uploader = forwardRef((props, ref) => {
13554
+ const {
13555
+ block,
13556
+ element
13557
+ } = useClassnames(CLASSNAME$1);
13381
13558
  const {
13382
13559
  disabledStateProps,
13383
13560
  otherProps,
@@ -13433,31 +13610,30 @@ const Uploader = forwardRef((props, ref) => {
13433
13610
  ...wrapper.props,
13434
13611
  ...forwardedProps,
13435
13612
  onClick: handleClick,
13436
- className: classNames(className, handleBasicClasses({
13437
- aspectRatio: adjustedAspectRatio,
13438
- prefix: CLASSNAME$1,
13439
- size,
13440
- theme,
13441
- variant,
13442
- isDragHovering,
13443
- isDisabled: isAnyDisabled
13444
- })),
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),
13445
13621
  children: [/*#__PURE__*/jsx("span", {
13446
- className: `${CLASSNAME$1}__background`
13622
+ className: element('background')
13447
13623
  }), /*#__PURE__*/jsxs("span", {
13448
- className: `${CLASSNAME$1}__wrapper`,
13624
+ className: element('wrapper'),
13449
13625
  children: [icon && /*#__PURE__*/jsx(Icon, {
13450
- className: `${CLASSNAME$1}__icon`,
13626
+ className: element('icon'),
13451
13627
  icon: icon,
13452
13628
  size: Size.s
13453
13629
  }), label && /*#__PURE__*/jsx("span", {
13454
- className: `${CLASSNAME$1}__label`,
13630
+ className: element('label'),
13455
13631
  children: label
13456
13632
  })]
13457
13633
  }), fileInputProps && /*#__PURE__*/jsx("input", {
13458
13634
  type: "file",
13459
13635
  id: inputId,
13460
- className: `${CLASSNAME$1}__input ${VISUALLY_HIDDEN}`,
13636
+ className: element('input', [classNames.visuallyHidden()]),
13461
13637
  ...disabledStateProps,
13462
13638
  ...fileInputProps,
13463
13639
  readOnly: isAnyDisabled,
@@ -13520,6 +13696,10 @@ const UserBlock = forwardRef((props, ref) => {
13520
13696
  after,
13521
13697
  ...forwardedProps
13522
13698
  } = props;
13699
+ const {
13700
+ block,
13701
+ element
13702
+ } = useClassnames(CLASSNAME);
13523
13703
  let componentSize = size;
13524
13704
 
13525
13705
  // Special case - When using vertical orientation force the size to be Sizes.l.
@@ -13536,7 +13716,7 @@ const UserBlock = forwardRef((props, ref) => {
13536
13716
  let NameComponent = 'span';
13537
13717
  const nProps = {
13538
13718
  ...nameProps,
13539
- className: classNames(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className)
13719
+ className: element('name', [linkProps?.className, nameProps?.className])
13540
13720
  };
13541
13721
  if (isClickable) {
13542
13722
  NameComponent = Link;
@@ -13555,25 +13735,24 @@ const UserBlock = forwardRef((props, ref) => {
13555
13735
  ...nProps,
13556
13736
  children: name
13557
13737
  });
13558
- }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
13738
+ }, [avatarProps, element, isClickable, linkAs, linkProps, name, nameProps, onClick]);
13559
13739
  const shouldDisplayFields = componentSize !== Size.s && componentSize !== Size.xs;
13560
13740
  const fieldsBlock = fields && shouldDisplayFields && /*#__PURE__*/jsx("div", {
13561
- className: `${CLASSNAME}__fields`,
13741
+ className: element('fields'),
13562
13742
  children: fields.map((field, idx) => /*#__PURE__*/jsx("span", {
13563
- className: `${CLASSNAME}__field`,
13743
+ className: element('field'),
13564
13744
  children: field
13565
13745
  }, idx))
13566
13746
  });
13567
13747
  return /*#__PURE__*/jsxs("div", {
13568
13748
  ref: ref,
13569
13749
  ...forwardedProps,
13570
- className: classNames(className, handleBasicClasses({
13571
- prefix: CLASSNAME,
13572
- orientation,
13573
- size: componentSize,
13574
- theme,
13575
- isClickable
13576
- })),
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),
13577
13756
  onMouseLeave: onMouseLeave,
13578
13757
  onMouseEnter: onMouseEnter,
13579
13758
  children: [avatarProps && /*#__PURE__*/jsx(Avatar, {
@@ -13581,21 +13760,21 @@ const UserBlock = forwardRef((props, ref) => {
13581
13760
  linkProps: linkProps,
13582
13761
  alt: "",
13583
13762
  ...avatarProps,
13584
- className: classNames(`${CLASSNAME}__avatar`, avatarProps.className),
13763
+ className: element('avatar', [avatarProps.className]),
13585
13764
  size: componentSize,
13586
13765
  onClick: onClick,
13587
13766
  theme: theme
13588
13767
  }), (fields || name || children || additionalFields) && /*#__PURE__*/jsxs("div", {
13589
- className: `${CLASSNAME}__wrapper`,
13768
+ className: element('wrapper'),
13590
13769
  children: [children || nameBlock, fieldsBlock, shouldDisplayFields ? additionalFields : null]
13591
13770
  }), shouldDisplayActions && simpleAction && /*#__PURE__*/jsx("div", {
13592
- className: `${CLASSNAME}__action`,
13771
+ className: element('action'),
13593
13772
  children: simpleAction
13594
13773
  }), shouldDisplayActions && multipleActions && /*#__PURE__*/jsx("div", {
13595
- className: `${CLASSNAME}__actions`,
13774
+ className: element('actions'),
13596
13775
  children: multipleActions
13597
13776
  }), after ? /*#__PURE__*/jsx("div", {
13598
- className: `${CLASSNAME}__after`,
13777
+ className: element('after'),
13599
13778
  children: after
13600
13779
  }) : null]
13601
13780
  });