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

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