@lumx/react 4.2.1-alpha.9 → 4.3.1-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/index.d.ts +207 -128
  2. package/index.js +933 -557
  3. package/index.js.map +1 -1
  4. package/package.json +4 -4
package/index.js CHANGED
@@ -47,6 +47,7 @@ import take from 'lodash/take';
47
47
  import { mdiRadioboxBlank } from '@lumx/icons/esm/radiobox-blank';
48
48
  import { mdiRadioboxMarked } from '@lumx/icons/esm/radiobox-marked';
49
49
  import { mdiMenuDown } from '@lumx/icons/esm/menu-down';
50
+ import { getWithSelector } from '@lumx/core/js/utils/selectors/getWithSelector';
50
51
  import { mdiArrowDown } from '@lumx/icons/esm/arrow-down';
51
52
  import { mdiArrowUp } from '@lumx/icons/esm/arrow-up';
52
53
  import set from 'lodash/set';
@@ -100,15 +101,15 @@ const COMPONENT_NAME$1k = 'AlertDialog';
100
101
  /**
101
102
  * Component default class name and class prefix.
102
103
  */
103
- const CLASSNAME$1i = 'lumx-alert-dialog';
104
+ const CLASSNAME$1j = 'lumx-alert-dialog';
104
105
  const {
105
- block: block$13
106
- } = classNames.bem(CLASSNAME$1i);
106
+ block: block$14
107
+ } = classNames.bem(CLASSNAME$1j);
107
108
 
108
109
  /**
109
110
  * Component default props.
110
111
  */
111
- const DEFAULT_PROPS$16 = {
112
+ const DEFAULT_PROPS$18 = {
112
113
  size: Size$1.tiny,
113
114
  kind: Kind$1.info
114
115
  };
@@ -129,8 +130,8 @@ const AlertDialog = forwardRef((props, ref) => {
129
130
  className,
130
131
  cancelProps,
131
132
  confirmProps,
132
- kind = DEFAULT_PROPS$16.kind,
133
- size = DEFAULT_PROPS$16.size,
133
+ kind = DEFAULT_PROPS$18.kind,
134
+ size = DEFAULT_PROPS$18.size,
134
135
  dialogProps,
135
136
  children,
136
137
  ...forwardedProps
@@ -171,7 +172,7 @@ const AlertDialog = forwardRef((props, ref) => {
171
172
  'aria-describedby': descriptionId,
172
173
  ...dialogProps
173
174
  },
174
- className: classNames.join(className, block$13({
175
+ className: classNames.join(className, block$14({
175
176
  [`kind-${kind}`]: Boolean(kind)
176
177
  })),
177
178
  ...forwardedProps,
@@ -217,8 +218,8 @@ const AlertDialog = forwardRef((props, ref) => {
217
218
  });
218
219
  });
219
220
  AlertDialog.displayName = COMPONENT_NAME$1k;
220
- AlertDialog.className = CLASSNAME$1i;
221
- AlertDialog.defaultProps = DEFAULT_PROPS$16;
221
+ AlertDialog.className = CLASSNAME$1j;
222
+ AlertDialog.defaultProps = DEFAULT_PROPS$18;
222
223
 
223
224
  /**
224
225
  * Hook focusing an element when defined and `focus` boolean `true`.
@@ -315,12 +316,12 @@ const COMPONENT_NAME$1j = 'Autocomplete';
315
316
  /**
316
317
  * Component default class name and class prefix.
317
318
  */
318
- const CLASSNAME$1h = 'lumx-autocomplete';
319
+ const CLASSNAME$1i = 'lumx-autocomplete';
319
320
 
320
321
  /**
321
322
  * Component default props.
322
323
  */
323
- const DEFAULT_PROPS$15 = {
324
+ const DEFAULT_PROPS$17 = {
324
325
  anchorToInput: false,
325
326
  closeOnClick: false,
326
327
  closeOnClickAway: true,
@@ -342,13 +343,13 @@ const Autocomplete = forwardRef((props, ref) => {
342
343
  otherProps
343
344
  } = useDisableStateProps(props);
344
345
  const {
345
- anchorToInput = DEFAULT_PROPS$15.anchorToInput,
346
+ anchorToInput = DEFAULT_PROPS$17.anchorToInput,
346
347
  children,
347
348
  chips,
348
349
  className,
349
- closeOnClick = DEFAULT_PROPS$15.closeOnClick,
350
- closeOnClickAway = DEFAULT_PROPS$15.closeOnClickAway,
351
- closeOnEscape = DEFAULT_PROPS$15.closeOnEscape,
350
+ closeOnClick = DEFAULT_PROPS$17.closeOnClick,
351
+ closeOnClickAway = DEFAULT_PROPS$17.closeOnClickAway,
352
+ closeOnEscape = DEFAULT_PROPS$17.closeOnEscape,
352
353
  error,
353
354
  fitToAnchorWidth,
354
355
  hasError,
@@ -369,7 +370,7 @@ const Autocomplete = forwardRef((props, ref) => {
369
370
  onInfiniteScroll,
370
371
  placeholder,
371
372
  placement,
372
- shouldFocusOnClose = DEFAULT_PROPS$15.shouldFocusOnClose,
373
+ shouldFocusOnClose = DEFAULT_PROPS$17.shouldFocusOnClose,
373
374
  theme = defaultTheme,
374
375
  value,
375
376
  textFieldProps = {},
@@ -382,7 +383,7 @@ const Autocomplete = forwardRef((props, ref) => {
382
383
  return /*#__PURE__*/jsxs("div", {
383
384
  ref: ref,
384
385
  ...forwardedProps,
385
- className: classNames.join(className, CLASSNAME$1h),
386
+ className: classNames.join(className, CLASSNAME$1i),
386
387
  children: [/*#__PURE__*/jsx(TextField, {
387
388
  ...textFieldProps,
388
389
  chips: chips,
@@ -423,8 +424,8 @@ const Autocomplete = forwardRef((props, ref) => {
423
424
  });
424
425
  });
425
426
  Autocomplete.displayName = COMPONENT_NAME$1j;
426
- Autocomplete.className = CLASSNAME$1h;
427
- Autocomplete.defaultProps = DEFAULT_PROPS$15;
427
+ Autocomplete.className = CLASSNAME$1i;
428
+ Autocomplete.defaultProps = DEFAULT_PROPS$17;
428
429
 
429
430
  /**
430
431
  * Component display name.
@@ -434,12 +435,12 @@ const COMPONENT_NAME$1i = 'AutocompleteMultiple';
434
435
  /**
435
436
  * Component default class name and class prefix.
436
437
  */
437
- const CLASSNAME$1g = 'lumx-autocomplete-multiple';
438
+ const CLASSNAME$1h = 'lumx-autocomplete-multiple';
438
439
 
439
440
  /**
440
441
  * Component default props.
441
442
  */
442
- const DEFAULT_PROPS$14 = {
443
+ const DEFAULT_PROPS$16 = {
443
444
  closeOnClickAway: true,
444
445
  closeOnEscape: true,
445
446
  selectedChipRender(choice, index, onClear, isDisabled) {
@@ -479,8 +480,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
479
480
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
480
481
  chipsAlignment,
481
482
  className,
482
- closeOnClickAway = DEFAULT_PROPS$14.closeOnClickAway,
483
- closeOnEscape = DEFAULT_PROPS$14.closeOnEscape,
483
+ closeOnClickAway = DEFAULT_PROPS$16.closeOnClickAway,
484
+ closeOnEscape = DEFAULT_PROPS$16.closeOnEscape,
484
485
  fitToAnchorWidth,
485
486
  hasError,
486
487
  helper,
@@ -502,19 +503,19 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
502
503
  onKeyDown,
503
504
  placeholder,
504
505
  placement,
505
- selectedChipRender = DEFAULT_PROPS$14.selectedChipRender,
506
+ selectedChipRender = DEFAULT_PROPS$16.selectedChipRender,
506
507
  shouldFocusOnClose,
507
508
  theme = defaultTheme,
508
509
  type,
509
510
  value,
510
- values = DEFAULT_PROPS$14.values,
511
+ values = DEFAULT_PROPS$16.values,
511
512
  ...forwardedProps
512
513
  } = otherProps;
513
514
  return /*#__PURE__*/jsx(Autocomplete, {
514
515
  ref: ref,
515
516
  ...forwardedProps,
516
517
  anchorToInput: anchorToInput,
517
- className: classNames.join(className, CLASSNAME$1g),
518
+ className: classNames.join(className, CLASSNAME$1h),
518
519
  name: name,
519
520
  value: value,
520
521
  onChange: onChange,
@@ -548,8 +549,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
548
549
  });
549
550
  });
550
551
  AutocompleteMultiple.displayName = COMPONENT_NAME$1i;
551
- AutocompleteMultiple.className = CLASSNAME$1g;
552
- AutocompleteMultiple.defaultProps = DEFAULT_PROPS$14;
552
+ AutocompleteMultiple.className = CLASSNAME$1h;
553
+ AutocompleteMultiple.defaultProps = DEFAULT_PROPS$16;
553
554
 
554
555
  /**
555
556
  * Component display name.
@@ -559,16 +560,16 @@ const COMPONENT_NAME$1h = 'Avatar';
559
560
  /**
560
561
  * Component default class name and class prefix.
561
562
  */
562
- const CLASSNAME$1f = 'lumx-avatar';
563
+ const CLASSNAME$1g = 'lumx-avatar';
563
564
  const {
564
- block: block$12,
565
- element: element$M
566
- } = classNames.bem(CLASSNAME$1f);
565
+ block: block$13,
566
+ element: element$N
567
+ } = classNames.bem(CLASSNAME$1g);
567
568
 
568
569
  /**
569
570
  * Component default props.
570
571
  */
571
- const DEFAULT_PROPS$13 = {
572
+ const DEFAULT_PROPS$15 = {
572
573
  size: Size$1.m
573
574
  };
574
575
 
@@ -591,7 +592,7 @@ const Avatar = forwardRef((props, ref) => {
591
592
  linkAs,
592
593
  onClick,
593
594
  onKeyPress,
594
- size = DEFAULT_PROPS$13.size,
595
+ size = DEFAULT_PROPS$15.size,
595
596
  theme = defaultTheme,
596
597
  thumbnailProps,
597
598
  ...forwardedProps
@@ -599,14 +600,14 @@ const Avatar = forwardRef((props, ref) => {
599
600
  return /*#__PURE__*/jsxs("div", {
600
601
  ref: ref,
601
602
  ...forwardedProps,
602
- className: classNames.join(className, block$12({
603
+ className: classNames.join(className, block$13({
603
604
  [`size-${size}`]: Boolean(size),
604
605
  [`theme-${theme}`]: Boolean(theme)
605
606
  })),
606
607
  children: [/*#__PURE__*/jsx(Thumbnail, {
607
608
  linkProps: linkProps,
608
609
  linkAs: linkAs,
609
- className: element$M('thumbnail'),
610
+ className: element$N('thumbnail'),
610
611
  onClick: onClick,
611
612
  onKeyPress: onKeyPress,
612
613
  ...thumbnailProps,
@@ -616,17 +617,17 @@ const Avatar = forwardRef((props, ref) => {
616
617
  alt: alt,
617
618
  theme: theme
618
619
  }), actions && /*#__PURE__*/jsx("div", {
619
- className: element$M('actions'),
620
+ className: element$N('actions'),
620
621
  children: actions
621
622
  }), badge && /*#__PURE__*/jsx("div", {
622
- className: element$M('badge'),
623
+ className: element$N('badge'),
623
624
  children: badge
624
625
  })]
625
626
  });
626
627
  });
627
628
  Avatar.displayName = COMPONENT_NAME$1h;
628
- Avatar.className = CLASSNAME$1f;
629
- Avatar.defaultProps = DEFAULT_PROPS$13;
629
+ Avatar.className = CLASSNAME$1g;
630
+ Avatar.defaultProps = DEFAULT_PROPS$15;
630
631
 
631
632
  /**
632
633
  * Component display name.
@@ -636,15 +637,15 @@ const COMPONENT_NAME$1g = 'Badge';
636
637
  /**
637
638
  * Component default class name and class prefix.
638
639
  */
639
- const CLASSNAME$1e = 'lumx-badge';
640
+ const CLASSNAME$1f = 'lumx-badge';
640
641
  const {
641
- block: block$11
642
- } = classNames.bem(CLASSNAME$1e);
642
+ block: block$12
643
+ } = classNames.bem(CLASSNAME$1f);
643
644
 
644
645
  /**
645
646
  * Component default props.
646
647
  */
647
- const DEFAULT_PROPS$12 = {
648
+ const DEFAULT_PROPS$14 = {
648
649
  color: ColorPalette$1.primary
649
650
  };
650
651
 
@@ -659,30 +660,30 @@ const Badge = forwardRef((props, ref) => {
659
660
  const {
660
661
  children,
661
662
  className,
662
- color = DEFAULT_PROPS$12.color,
663
+ color = DEFAULT_PROPS$14.color,
663
664
  ...forwardedProps
664
665
  } = props;
665
666
  return /*#__PURE__*/jsx("div", {
666
667
  ref: ref,
667
668
  ...forwardedProps,
668
- className: classNames.join(className, block$11({
669
+ className: classNames.join(className, block$12({
669
670
  [`color-${color}`]: Boolean(color)
670
671
  })),
671
672
  children: children
672
673
  });
673
674
  });
674
675
  Badge.displayName = COMPONENT_NAME$1g;
675
- Badge.className = CLASSNAME$1e;
676
- Badge.defaultProps = DEFAULT_PROPS$12;
676
+ Badge.className = CLASSNAME$1f;
677
+ Badge.defaultProps = DEFAULT_PROPS$14;
677
678
 
678
679
  /**
679
680
  * Component default class name and class prefix.
680
681
  */
681
- const CLASSNAME$1d = 'lumx-badge-wrapper';
682
+ const CLASSNAME$1e = 'lumx-badge-wrapper';
682
683
  const {
683
- block: block$10,
684
- element: element$L
685
- } = classNames.bem(CLASSNAME$1d);
684
+ block: block$11,
685
+ element: element$M
686
+ } = classNames.bem(CLASSNAME$1e);
686
687
  const BadgeWrapper = forwardRef((props, ref) => {
687
688
  const {
688
689
  badge,
@@ -693,15 +694,15 @@ const BadgeWrapper = forwardRef((props, ref) => {
693
694
  return /*#__PURE__*/jsxs("div", {
694
695
  ref: ref,
695
696
  ...forwardedProps,
696
- className: classNames.join(className, block$10()),
697
+ className: classNames.join(className, block$11()),
697
698
  children: [children, badge && /*#__PURE__*/jsx("div", {
698
- className: element$L('badge'),
699
+ className: element$M('badge'),
699
700
  children: badge
700
701
  })]
701
702
  });
702
703
  });
703
704
  BadgeWrapper.displayName = 'BadgeWrapper';
704
- BadgeWrapper.className = CLASSNAME$1d;
705
+ BadgeWrapper.className = CLASSNAME$1e;
705
706
 
706
707
  /**
707
708
  * Alignments.
@@ -925,7 +926,7 @@ function modifier$1(baseName, modifiers) {
925
926
  * block('button', { active: true, disabled: false }); // 'button button--active'
926
927
  */
927
928
 
928
- function block$$(baseName, modifiersOrAdditionalClasses, additionalClasses) {
929
+ function block$10(baseName, modifiersOrAdditionalClasses, additionalClasses) {
929
930
  let modifiers;
930
931
  let classes;
931
932
  if (Array.isArray(modifiersOrAdditionalClasses)) {
@@ -960,11 +961,11 @@ function block$$(baseName, modifiersOrAdditionalClasses, additionalClasses) {
960
961
  * element('my-button', 'icon', { active: true }); // 'my-button__icon my-button__icon--active'
961
962
  */
962
963
 
963
- function element$K(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
964
+ function element$L(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
964
965
  if (Array.isArray(modifiersOrAdditionalClasses)) {
965
- return block$$(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
966
+ return block$10(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
966
967
  }
967
- return block$$(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
968
+ return block$10(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
968
969
  }
969
970
 
970
971
  /**
@@ -973,15 +974,15 @@ function element$K(baseClass, elem, modifiersOrAdditionalClasses, additionalClas
973
974
  function bem(baseName) {
974
975
  function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
975
976
  if (Array.isArray(modifiersOrAdditionalClasses)) {
976
- return block$$(baseName, modifiersOrAdditionalClasses);
977
+ return block$10(baseName, modifiersOrAdditionalClasses);
977
978
  }
978
- return block$$(baseName, modifiersOrAdditionalClasses, additionalClasses);
979
+ return block$10(baseName, modifiersOrAdditionalClasses, additionalClasses);
979
980
  }
980
981
  function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
981
982
  if (Array.isArray(modifiersOrAdditionalClasses)) {
982
- return element$K(baseName, elem, modifiersOrAdditionalClasses);
983
+ return element$L(baseName, elem, modifiersOrAdditionalClasses);
983
984
  }
984
- return element$K(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
985
+ return element$L(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
985
986
  }
986
987
  return {
987
988
  block: blockFn,
@@ -1018,9 +1019,9 @@ const RawClickable$1 = props => {
1018
1019
  };
1019
1020
  }
1020
1021
  return /*#__PURE__*/jsx(Component, {
1022
+ "aria-disabled": isAnyDisabled || undefined,
1021
1023
  ...forwardedProps,
1022
1024
  ...clickableProps,
1023
- "aria-disabled": isAnyDisabled || undefined,
1024
1025
  onClick: event => {
1025
1026
  if (isAnyDisabled) {
1026
1027
  event.stopPropagation();
@@ -1149,15 +1150,15 @@ const COMPONENT_NAME$1e = 'Button';
1149
1150
  /**
1150
1151
  * Component default class name and class prefix.
1151
1152
  */
1152
- const CLASSNAME$1c = 'lumx-button';
1153
+ const CLASSNAME$1d = 'lumx-button';
1153
1154
  const {
1154
1155
  modifier
1155
- } = bem(CLASSNAME$1c);
1156
+ } = bem(CLASSNAME$1d);
1156
1157
 
1157
1158
  /**
1158
1159
  * Component default props.
1159
1160
  */
1160
- const DEFAULT_PROPS$11 = {
1161
+ const DEFAULT_PROPS$13 = {
1161
1162
  emphasis: Emphasis.high,
1162
1163
  size: Size.m
1163
1164
  };
@@ -1171,10 +1172,10 @@ const DEFAULT_PROPS$11 = {
1171
1172
  const Button$1 = props => {
1172
1173
  const {
1173
1174
  className,
1174
- emphasis = DEFAULT_PROPS$11.emphasis,
1175
+ emphasis = DEFAULT_PROPS$13.emphasis,
1175
1176
  leftIcon,
1176
1177
  rightIcon,
1177
- size = DEFAULT_PROPS$11.size,
1178
+ size = DEFAULT_PROPS$13.size,
1178
1179
  ...forwardedProps
1179
1180
  } = props;
1180
1181
  const buttonClassName = classnames(className, modifier({
@@ -1190,8 +1191,8 @@ const Button$1 = props => {
1190
1191
  });
1191
1192
  };
1192
1193
  Button$1.displayName = COMPONENT_NAME$1e;
1193
- Button$1.className = CLASSNAME$1c;
1194
- Button$1.defaultProps = DEFAULT_PROPS$11;
1194
+ Button$1.className = CLASSNAME$1d;
1195
+ Button$1.defaultProps = DEFAULT_PROPS$13;
1195
1196
 
1196
1197
  /**
1197
1198
  * Properties of a component to use to determine it's name.
@@ -1258,8 +1259,8 @@ const Button = forwardRef((props, ref) => {
1258
1259
  });
1259
1260
  });
1260
1261
  Button.displayName = COMPONENT_NAME$1e;
1261
- Button.className = CLASSNAME$1c;
1262
- Button.defaultProps = DEFAULT_PROPS$11;
1262
+ Button.className = CLASSNAME$1d;
1263
+ Button.defaultProps = DEFAULT_PROPS$13;
1263
1264
 
1264
1265
  const COMPONENT_NAME$1d = 'Icon';
1265
1266
  const IconClassName = 'lumx-icon';
@@ -1268,15 +1269,15 @@ const IconClassName = 'lumx-icon';
1268
1269
  * Defines the props of the component.
1269
1270
  */
1270
1271
 
1271
- const CLASSNAME$1b = IconClassName;
1272
+ const CLASSNAME$1c = IconClassName;
1272
1273
  const {
1273
- block: block$_
1274
- } = bem(CLASSNAME$1b);
1274
+ block: block$$
1275
+ } = bem(CLASSNAME$1c);
1275
1276
 
1276
1277
  /**
1277
1278
  * Component default props.
1278
1279
  */
1279
- const DEFAULT_PROPS$10 = {};
1280
+ const DEFAULT_PROPS$12 = {};
1280
1281
 
1281
1282
  /**
1282
1283
  * Icon component.
@@ -1325,7 +1326,7 @@ const Icon$1 = props => {
1325
1326
  return /*#__PURE__*/jsx("i", {
1326
1327
  ref: ref,
1327
1328
  ...forwardedProps,
1328
- className: classnames(className, block$_({
1329
+ className: classnames(className, block$$({
1329
1330
  [`color-${iconColor}`]: Boolean(iconColor),
1330
1331
  [`color-variant-${iconColorVariant}`]: Boolean(iconColorVariant),
1331
1332
  'has-shape': hasShape,
@@ -1355,8 +1356,8 @@ const Icon$1 = props => {
1355
1356
  });
1356
1357
  };
1357
1358
  Icon$1.displayName = COMPONENT_NAME$1d;
1358
- Icon$1.className = CLASSNAME$1b;
1359
- Icon$1.defaultProps = DEFAULT_PROPS$10;
1359
+ Icon$1.className = CLASSNAME$1c;
1360
+ Icon$1.defaultProps = DEFAULT_PROPS$12;
1360
1361
 
1361
1362
  /**
1362
1363
  * Component display name.
@@ -1366,12 +1367,12 @@ const COMPONENT_NAME$1c = 'IconButton';
1366
1367
  /**
1367
1368
  * Component default class name and class prefix.
1368
1369
  */
1369
- const CLASSNAME$1a = 'lumx-icon-button';
1370
+ const CLASSNAME$1b = 'lumx-icon-button';
1370
1371
 
1371
1372
  /**
1372
1373
  * Component default props.
1373
1374
  */
1374
- const DEFAULT_PROPS$$ = {
1375
+ const DEFAULT_PROPS$11 = {
1375
1376
  emphasis: Emphasis.high,
1376
1377
  size: Size.m
1377
1378
  };
@@ -1384,11 +1385,11 @@ const DEFAULT_PROPS$$ = {
1384
1385
  */
1385
1386
  const IconButton$1 = props => {
1386
1387
  const {
1387
- emphasis = DEFAULT_PROPS$$.emphasis,
1388
+ emphasis = DEFAULT_PROPS$11.emphasis,
1388
1389
  image,
1389
1390
  icon,
1390
1391
  label,
1391
- size = DEFAULT_PROPS$$.size,
1392
+ size = DEFAULT_PROPS$11.size,
1392
1393
  ...forwardedProps
1393
1394
  } = props;
1394
1395
  const defaultChildren = image ? /*#__PURE__*/jsx("img", {
@@ -1408,8 +1409,8 @@ const IconButton$1 = props => {
1408
1409
  });
1409
1410
  };
1410
1411
  IconButton$1.displayName = COMPONENT_NAME$1c;
1411
- IconButton$1.className = CLASSNAME$1a;
1412
- IconButton$1.defaultProps = DEFAULT_PROPS$$;
1412
+ IconButton$1.className = CLASSNAME$1b;
1413
+ IconButton$1.defaultProps = DEFAULT_PROPS$11;
1413
1414
 
1414
1415
  /**
1415
1416
  * IconButton component.
@@ -1445,8 +1446,8 @@ const IconButton = forwardRef((props, ref) => {
1445
1446
  });
1446
1447
  });
1447
1448
  IconButton.displayName = COMPONENT_NAME$1c;
1448
- IconButton.className = CLASSNAME$1a;
1449
- IconButton.defaultProps = DEFAULT_PROPS$$;
1449
+ IconButton.className = CLASSNAME$1b;
1450
+ IconButton.defaultProps = DEFAULT_PROPS$11;
1450
1451
 
1451
1452
  /**
1452
1453
  * Component display name.
@@ -1456,12 +1457,12 @@ const COMPONENT_NAME$1b = 'ButtonGroup';
1456
1457
  /**
1457
1458
  * Component default class name and class prefix.
1458
1459
  */
1459
- const CLASSNAME$19 = 'lumx-button-group';
1460
+ const CLASSNAME$1a = 'lumx-button-group';
1460
1461
 
1461
1462
  /**
1462
1463
  * Component default props.
1463
1464
  */
1464
- const DEFAULT_PROPS$_ = {};
1465
+ const DEFAULT_PROPS$10 = {};
1465
1466
 
1466
1467
  /**
1467
1468
  * ButtonGroup component.
@@ -1477,13 +1478,13 @@ const ButtonGroup$1 = props => {
1477
1478
  } = props;
1478
1479
  return /*#__PURE__*/jsx("div", {
1479
1480
  ...forwardedProps,
1480
- className: classnames(className, CLASSNAME$19),
1481
+ className: classnames(className, CLASSNAME$1a),
1481
1482
  children: children
1482
1483
  });
1483
1484
  };
1484
1485
  ButtonGroup$1.displayName = COMPONENT_NAME$1b;
1485
- ButtonGroup$1.className = CLASSNAME$19;
1486
- ButtonGroup$1.defaultProps = DEFAULT_PROPS$_;
1486
+ ButtonGroup$1.className = CLASSNAME$1a;
1487
+ ButtonGroup$1.defaultProps = DEFAULT_PROPS$10;
1487
1488
 
1488
1489
  /**
1489
1490
  * ButtonGroup component.
@@ -1499,8 +1500,106 @@ const ButtonGroup = forwardRef((props, ref) => {
1499
1500
  });
1500
1501
  });
1501
1502
  ButtonGroup.displayName = COMPONENT_NAME$1b;
1502
- ButtonGroup.className = CLASSNAME$19;
1503
- ButtonGroup.defaultProps = DEFAULT_PROPS$_;
1503
+ ButtonGroup.className = CLASSNAME$1a;
1504
+ ButtonGroup.defaultProps = DEFAULT_PROPS$10;
1505
+
1506
+ const COMPONENT_NAME$1a = 'InputLabel';
1507
+ const InputLabelClassName = 'lumx-input-label';
1508
+ const CLASSNAME$19 = InputLabelClassName;
1509
+ const {
1510
+ block: block$_
1511
+ } = bem(CLASSNAME$19);
1512
+ const DEFAULT_PROPS$$ = {};
1513
+
1514
+ /**
1515
+ * InputLabel component.
1516
+ */
1517
+ function InputLabel$1(props) {
1518
+ const {
1519
+ children,
1520
+ className,
1521
+ htmlFor,
1522
+ isRequired,
1523
+ theme,
1524
+ typography: typography$1,
1525
+ ref,
1526
+ ...forwardedProps
1527
+ } = props;
1528
+ return /*#__PURE__*/jsx("label", {
1529
+ ref: ref,
1530
+ ...forwardedProps,
1531
+ htmlFor: htmlFor,
1532
+ className: classnames(className, block$_({
1533
+ 'is-required': isRequired,
1534
+ [`theme-${theme}`]: Boolean(theme),
1535
+ 'has-custom-typography': Boolean(typography$1)
1536
+ }), typography$1 && typography(typography$1)),
1537
+ children: children
1538
+ });
1539
+ }
1540
+ InputLabel$1.displayName = COMPONENT_NAME$1a;
1541
+ InputLabel$1.className = CLASSNAME$19;
1542
+ InputLabel$1.defaultProps = DEFAULT_PROPS$$;
1543
+
1544
+ const INPUT_HELPER_CONFIGURATION = {
1545
+ [Kind.error]: {
1546
+ color: 'red'
1547
+ },
1548
+ [Kind.success]: {
1549
+ color: 'green'
1550
+ },
1551
+ [Kind.warning]: {
1552
+ color: 'yellow'
1553
+ }
1554
+ };
1555
+
1556
+ const COMPONENT_NAME$19 = 'InputHelper';
1557
+ const InputHelperClassName = 'lumx-input-helper';
1558
+
1559
+ /**
1560
+ * Defines the props of the component.
1561
+ */
1562
+
1563
+ const CLASSNAME$18 = InputHelperClassName;
1564
+ const {
1565
+ block: block$Z
1566
+ } = bem(CLASSNAME$18);
1567
+
1568
+ /**
1569
+ * Component default props.
1570
+ */
1571
+ const DEFAULT_PROPS$_ = {
1572
+ kind: Kind.info
1573
+ };
1574
+
1575
+ /**
1576
+ * InputHelper component.
1577
+ */
1578
+ function InputHelper$1(props) {
1579
+ const {
1580
+ children,
1581
+ className,
1582
+ kind = DEFAULT_PROPS$_.kind,
1583
+ theme,
1584
+ ref,
1585
+ ...forwardedProps
1586
+ } = props;
1587
+ const {
1588
+ color
1589
+ } = INPUT_HELPER_CONFIGURATION[kind] || {};
1590
+ return /*#__PURE__*/jsx("p", {
1591
+ ref: ref,
1592
+ ...forwardedProps,
1593
+ className: classnames(className, block$Z({
1594
+ [`color-${color}`]: Boolean(color),
1595
+ [`theme-${theme}`]: Boolean(theme)
1596
+ })),
1597
+ children: children
1598
+ });
1599
+ }
1600
+ InputHelper$1.displayName = COMPONENT_NAME$19;
1601
+ InputHelper$1.className = CLASSNAME$18;
1602
+ InputHelper$1.defaultProps = DEFAULT_PROPS$_;
1504
1603
 
1505
1604
  const INTERMEDIATE_STATE = 'intermediate';
1506
1605
 
@@ -1511,36 +1610,24 @@ const INTERMEDIATE_STATE = 'intermediate';
1511
1610
  /**
1512
1611
  * Component display name.
1513
1612
  */
1514
- const COMPONENT_NAME$1a = 'Checkbox';
1613
+ const COMPONENT_NAME$18 = 'Checkbox';
1515
1614
 
1516
1615
  /**
1517
1616
  * Component default class name and class prefix.
1518
1617
  */
1519
- const CLASSNAME$18 = 'lumx-checkbox';
1618
+ const CLASSNAME$17 = 'lumx-checkbox';
1520
1619
  const {
1521
- block: block$Z,
1522
- element: element$J
1523
- } = classNames.bem(CLASSNAME$18);
1524
-
1525
- /**
1526
- * Component default props.
1527
- */
1528
- const DEFAULT_PROPS$Z = {};
1620
+ block: block$Y,
1621
+ element: element$K
1622
+ } = bem(CLASSNAME$17);
1529
1623
 
1530
1624
  /**
1531
1625
  * Checkbox component.
1532
1626
  *
1533
1627
  * @param props Component props.
1534
- * @param ref Component ref.
1535
- * @return React element.
1628
+ * @return JSX element.
1536
1629
  */
1537
- const Checkbox = forwardRef((props, ref) => {
1538
- const {
1539
- isAnyDisabled,
1540
- disabledStateProps,
1541
- otherProps
1542
- } = useDisableStateProps(props);
1543
- const defaultTheme = useTheme() || Theme$1.light;
1630
+ const Checkbox$1 = props => {
1544
1631
  const {
1545
1632
  checked,
1546
1633
  className,
@@ -1550,80 +1637,145 @@ const Checkbox = forwardRef((props, ref) => {
1550
1637
  isChecked = checked,
1551
1638
  label,
1552
1639
  name,
1640
+ ref,
1553
1641
  onChange,
1554
- theme = defaultTheme,
1642
+ theme,
1555
1643
  value,
1556
1644
  inputProps = {},
1645
+ isDisabled,
1646
+ inputId,
1557
1647
  ...forwardedProps
1558
- } = otherProps;
1559
- const localInputRef = React__default.useRef(null);
1560
- const generatedInputId = useId();
1561
- const inputId = id || generatedInputId;
1648
+ } = props;
1649
+ const intermediateState = isChecked === INTERMEDIATE_STATE;
1562
1650
  const handleChange = event => {
1563
1651
  if (onChange) {
1564
1652
  onChange(!isChecked, value, name, event);
1565
1653
  }
1566
1654
  };
1567
- const intermediateState = isChecked === INTERMEDIATE_STATE;
1568
- React__default.useEffect(() => {
1569
- const input = localInputRef.current;
1570
- if (input) input.indeterminate = intermediateState;
1571
- }, [intermediateState]);
1572
1655
  return /*#__PURE__*/jsxs("div", {
1573
1656
  ref: ref,
1574
1657
  ...forwardedProps,
1575
- className: classNames.join(className, block$Z({
1658
+ className: classnames(className, block$Y({
1576
1659
  // Whether state is intermediate class name will "-checked"
1577
1660
  'is-checked': intermediateState ? true : isChecked,
1578
- 'is-disabled': isAnyDisabled,
1661
+ 'is-disabled': isDisabled,
1579
1662
  'is-unchecked': !isChecked,
1580
1663
  [`theme-${theme}`]: Boolean(theme)
1581
1664
  })),
1582
1665
  children: [/*#__PURE__*/jsxs("div", {
1583
- className: element$J('input-wrapper'),
1666
+ className: element$K('input-wrapper'),
1584
1667
  children: [/*#__PURE__*/jsx("input", {
1585
- ref: useMergeRefs(inputRef, localInputRef),
1668
+ ref: inputRef,
1586
1669
  type: "checkbox",
1587
1670
  id: inputId,
1588
- className: element$J('input-native'),
1589
- ...disabledStateProps,
1671
+ className: element$K('input-native'),
1590
1672
  name: name,
1591
1673
  value: value,
1592
1674
  checked: isChecked,
1593
1675
  onChange: handleChange,
1594
1676
  "aria-describedby": helper ? `${inputId}-helper` : undefined,
1595
1677
  "aria-checked": intermediateState ? 'mixed' : Boolean(isChecked),
1596
- readOnly: inputProps.readOnly || disabledStateProps['aria-disabled'],
1678
+ ...(inputProps?.readOnly ? {
1679
+ readOnly: inputProps.readOnly
1680
+ } : {}),
1597
1681
  ...inputProps
1598
1682
  }), /*#__PURE__*/jsxs("div", {
1599
- className: element$J('input-placeholder'),
1683
+ className: element$K('input-placeholder'),
1600
1684
  children: [/*#__PURE__*/jsx("div", {
1601
- className: element$J('input-background')
1685
+ className: element$K('input-background')
1602
1686
  }), /*#__PURE__*/jsx("div", {
1603
- className: element$J('input-indicator'),
1604
- children: /*#__PURE__*/jsx(Icon, {
1687
+ className: element$K('input-indicator'),
1688
+ children: Icon$1({
1605
1689
  icon: intermediateState ? mdiMinus : mdiCheck
1606
1690
  })
1607
1691
  })]
1608
1692
  })]
1609
1693
  }), /*#__PURE__*/jsxs("div", {
1610
- className: element$J('content'),
1611
- children: [label && /*#__PURE__*/jsx(InputLabel, {
1694
+ className: element$K('content'),
1695
+ children: [label && InputLabel$1({
1612
1696
  htmlFor: inputId,
1613
- className: element$J('label'),
1614
- theme: theme,
1697
+ className: element$K('label'),
1698
+ theme,
1615
1699
  children: label
1616
- }), helper && /*#__PURE__*/jsx(InputHelper, {
1700
+ }), helper && InputHelper$1({
1617
1701
  id: `${inputId}-helper`,
1618
- className: element$J('helper'),
1619
- theme: theme,
1702
+ className: element$K('helper'),
1703
+ theme,
1620
1704
  children: helper
1621
1705
  })]
1622
1706
  })]
1623
1707
  });
1708
+ };
1709
+
1710
+ /**
1711
+ * Defines the props of the component.
1712
+ */
1713
+
1714
+ /**
1715
+ * Component default props.
1716
+ */
1717
+ const DEFAULT_PROPS$Z = {};
1718
+
1719
+ /**
1720
+ * Checkbox component.
1721
+ *
1722
+ * @param props Component props.
1723
+ * @param ref Component ref.
1724
+ * @return React element.
1725
+ */
1726
+ const Checkbox = forwardRef((props, ref) => {
1727
+ const {
1728
+ isAnyDisabled,
1729
+ disabledStateProps,
1730
+ otherProps
1731
+ } = useDisableStateProps(props);
1732
+ const defaultTheme = useTheme() || Theme$1.light;
1733
+ const {
1734
+ checked,
1735
+ className,
1736
+ helper,
1737
+ id,
1738
+ inputRef,
1739
+ isChecked = checked,
1740
+ label,
1741
+ name,
1742
+ onChange,
1743
+ theme = defaultTheme,
1744
+ value,
1745
+ inputProps = {},
1746
+ ...forwardedProps
1747
+ } = otherProps;
1748
+ const localInputRef = React__default.useRef(null);
1749
+ const generatedInputId = useId();
1750
+ const inputId = id || generatedInputId;
1751
+ const intermediateState = isChecked === INTERMEDIATE_STATE;
1752
+ React__default.useEffect(() => {
1753
+ const input = localInputRef.current;
1754
+ if (input) input.indeterminate = intermediateState;
1755
+ }, [intermediateState]);
1756
+ return Checkbox$1({
1757
+ ref,
1758
+ className,
1759
+ helper,
1760
+ inputRef: useMergeRefs(inputRef, localInputRef),
1761
+ isChecked,
1762
+ label,
1763
+ name,
1764
+ onChange,
1765
+ theme,
1766
+ value,
1767
+ inputProps: {
1768
+ ...inputProps,
1769
+ ...disabledStateProps,
1770
+ readOnly: inputProps.readOnly || disabledStateProps['aria-disabled']
1771
+ },
1772
+ ...forwardedProps,
1773
+ isDisabled: isAnyDisabled,
1774
+ inputId
1775
+ });
1624
1776
  });
1625
- Checkbox.displayName = COMPONENT_NAME$1a;
1626
- Checkbox.className = CLASSNAME$18;
1777
+ Checkbox.displayName = COMPONENT_NAME$18;
1778
+ Checkbox.className = CLASSNAME$17;
1627
1779
  Checkbox.defaultProps = DEFAULT_PROPS$Z;
1628
1780
 
1629
1781
  /**
@@ -1645,16 +1797,16 @@ function useStopPropagation(handler) {
1645
1797
  /**
1646
1798
  * Component display name.
1647
1799
  */
1648
- const COMPONENT_NAME$19 = 'Chip';
1800
+ const COMPONENT_NAME$17 = 'Chip';
1649
1801
 
1650
1802
  /**
1651
1803
  * Component default class name and class prefix.
1652
1804
  */
1653
- const CLASSNAME$17 = 'lumx-chip';
1805
+ const CLASSNAME$16 = 'lumx-chip';
1654
1806
  const {
1655
- block: block$Y,
1656
- element: element$I
1657
- } = classNames.bem(CLASSNAME$17);
1807
+ block: block$X,
1808
+ element: element$J
1809
+ } = classNames.bem(CLASSNAME$16);
1658
1810
 
1659
1811
  /**
1660
1812
  * Component default props.
@@ -1720,7 +1872,7 @@ const Chip = forwardRef((props, ref) => {
1720
1872
  ...forwardedProps,
1721
1873
  href: !disabledStateProps.disabled ? href : undefined,
1722
1874
  ref: ref,
1723
- className: classNames.join(className, block$Y({
1875
+ className: classNames.join(className, block$X({
1724
1876
  'is-clickable': isClickable,
1725
1877
  [`color-${chipColor}`]: Boolean(chipColor),
1726
1878
  'is-disabled': isAnyDisabled,
@@ -1738,19 +1890,19 @@ const Chip = forwardRef((props, ref) => {
1738
1890
  /*#__PURE__*/
1739
1891
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
1740
1892
  jsx("div", {
1741
- className: element$I('before', {
1893
+ className: element$J('before', {
1742
1894
  'is-clickable': hasBeforeClick
1743
1895
  }),
1744
1896
  onClick: handleOnBeforeClick,
1745
1897
  children: before
1746
1898
  }), /*#__PURE__*/jsx("div", {
1747
- className: element$I('label'),
1899
+ className: element$J('label'),
1748
1900
  children: children
1749
1901
  }), after &&
1750
1902
  /*#__PURE__*/
1751
1903
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
1752
1904
  jsx("div", {
1753
- className: element$I('after', {
1905
+ className: element$J('after', {
1754
1906
  'is-clickable': hasAfterClick
1755
1907
  }),
1756
1908
  onClick: handleOnAfterClick,
@@ -1759,8 +1911,8 @@ const Chip = forwardRef((props, ref) => {
1759
1911
  })
1760
1912
  );
1761
1913
  });
1762
- Chip.displayName = COMPONENT_NAME$19;
1763
- Chip.className = CLASSNAME$17;
1914
+ Chip.displayName = COMPONENT_NAME$17;
1915
+ Chip.className = CLASSNAME$16;
1764
1916
  Chip.defaultProps = DEFAULT_PROPS$Y;
1765
1917
 
1766
1918
  const INITIAL_STATE_ACTIVE_CHIP = -1;
@@ -1822,12 +1974,12 @@ const DEFAULT_PROPS$X = {};
1822
1974
  /**
1823
1975
  * Component display name.
1824
1976
  */
1825
- const COMPONENT_NAME$18 = 'ChipGroup';
1977
+ const COMPONENT_NAME$16 = 'ChipGroup';
1826
1978
 
1827
1979
  /**
1828
1980
  * Component default class name and class prefix.
1829
1981
  */
1830
- const CLASSNAME$16 = 'lumx-chip-group';
1982
+ const CLASSNAME$15 = 'lumx-chip-group';
1831
1983
 
1832
1984
  /**
1833
1985
  * ChipGroup component.
@@ -1846,17 +1998,195 @@ const InternalChipGroup = forwardRef((props, ref) => {
1846
1998
  return /*#__PURE__*/jsx("div", {
1847
1999
  ref: ref,
1848
2000
  ...forwardedProps,
1849
- className: classNames.join(className, CLASSNAME$16),
2001
+ className: classNames.join(className, CLASSNAME$15),
1850
2002
  children: children
1851
2003
  });
1852
2004
  });
1853
- InternalChipGroup.displayName = COMPONENT_NAME$18;
1854
- InternalChipGroup.className = CLASSNAME$16;
2005
+ InternalChipGroup.displayName = COMPONENT_NAME$16;
2006
+ InternalChipGroup.className = CLASSNAME$15;
1855
2007
  InternalChipGroup.defaultProps = DEFAULT_PROPS$X;
1856
2008
  const ChipGroup = Object.assign(InternalChipGroup, {
1857
2009
  useChipGroupNavigation
1858
2010
  });
1859
2011
 
2012
+ /**
2013
+ * Similar to `isComponent` but more precise as it's not based on the component `displayName` but on the component function reference.
2014
+ */
2015
+ const isComponentType = type => node => /*#__PURE__*/React__default.isValidElement(node) && node.type === type;
2016
+
2017
+ /**
2018
+ * Hook that enables keyboard navigation from an input field to chips.
2019
+ * When the user presses Backspace at the start of the input field (cursor at position 0),
2020
+ * it automatically focuses the last enabled chip in the list.
2021
+ *
2022
+ * @param chipRefs - Reference to an array of chip element refs
2023
+ * @param inputRef - Reference to the input element (optional)
2024
+ * @returns An object containing the `findPreviousEnabledChip` helper function
2025
+ *
2026
+ * @example
2027
+ * ```tsx
2028
+ * const chipRefs = useRef<React.RefObject<HTMLElement>[]>([]);
2029
+ * const inputRef = useRef<HTMLInputElement>(null);
2030
+ * const { findPreviousEnabledChip } = useFocusLastChipOnBackspace(chipRefs, inputRef);
2031
+ * ```
2032
+ */
2033
+ function useFocusLastChipOnBackspace(chipRefs, inputRef) {
2034
+ /**
2035
+ * Finds the previous enabled chip starting from a given index.
2036
+ * Skips chips with `aria-disabled="true"`.
2037
+ *
2038
+ * @param startIndex - The index to start searching from (defaults to last chip)
2039
+ * @returns The enabled chip element or undefined if none found
2040
+ */
2041
+ const findPreviousEnabledChip = React__default.useCallback((startIndex = null) => {
2042
+ const {
2043
+ current: chips
2044
+ } = chipRefs;
2045
+ if (!chips) {
2046
+ return undefined;
2047
+ }
2048
+ // Iterate backwards from startIndex (or last chip) to find an enabled chip
2049
+ for (let i = startIndex ?? chips.length - 1; i >= 0; i--) {
2050
+ const chip = chips[i]?.current;
2051
+ // Check if chip exists and is not disabled
2052
+ if (chip && chip?.getAttribute('aria-disabled') !== 'true') {
2053
+ return chip;
2054
+ }
2055
+ }
2056
+ return undefined;
2057
+ }, [chipRefs]);
2058
+ React__default.useEffect(() => {
2059
+ const input = inputRef?.current;
2060
+ if (!input) {
2061
+ return undefined;
2062
+ }
2063
+ const onKeyDown = evt => {
2064
+ const backspacePressed = evt.key === 'Backspace';
2065
+ const cursorAtStart = input.selectionStart === 0 && input.selectionEnd === 0;
2066
+
2067
+ // Only handle backspace when cursor is at the start of the input
2068
+ if (!backspacePressed || !cursorAtStart) {
2069
+ return;
2070
+ }
2071
+
2072
+ // Prevent default backspace behavior and event bubbling
2073
+ evt.stopPropagation();
2074
+ evt.preventDefault();
2075
+
2076
+ // Focus the last enabled chip (if any exists)
2077
+ const lastChip = findPreviousEnabledChip();
2078
+ lastChip?.focus();
2079
+ };
2080
+
2081
+ // Attach keyboard event listener
2082
+ input.addEventListener('keydown', onKeyDown);
2083
+
2084
+ // Cleanup listener on unmount
2085
+ return () => {
2086
+ input.removeEventListener('keydown', onKeyDown);
2087
+ };
2088
+ }, [inputRef, findPreviousEnabledChip]);
2089
+ return {
2090
+ findPreviousEnabledChip
2091
+ };
2092
+ }
2093
+
2094
+ /**
2095
+ * Component default class name and class prefix.
2096
+ */
2097
+ const CLASSNAME$14 = 'lumx-selection-chip-group';
2098
+ const {
2099
+ block: block$W,
2100
+ element: element$I
2101
+ } = classNames.bem(CLASSNAME$14);
2102
+
2103
+ /**
2104
+ * SelectionChipGroup component.
2105
+ *
2106
+ * @param props Component props.
2107
+ * @param ref Component ref.
2108
+ * @return React element.
2109
+ */
2110
+ const SelectionChipGroup = ({
2111
+ onChange,
2112
+ value,
2113
+ getOptionId,
2114
+ getOptionName,
2115
+ inputRef,
2116
+ inputLabel,
2117
+ renderChip,
2118
+ theme,
2119
+ isDisabled,
2120
+ chipTooltipLabel,
2121
+ label,
2122
+ ...forwardedProps
2123
+ }) => {
2124
+ const chipRefs = React__default.useRef([]);
2125
+ const {
2126
+ findPreviousEnabledChip
2127
+ } = useFocusLastChipOnBackspace(chipRefs, inputRef);
2128
+ return /*#__PURE__*/jsx(ChipGroup, {
2129
+ role: "group",
2130
+ "aria-label": label,
2131
+ className: block$W(),
2132
+ ...forwardedProps,
2133
+ children: value?.map((v, index) => {
2134
+ const name = getWithSelector(getOptionName, v);
2135
+ const id = getWithSelector(getOptionId, v);
2136
+ const onClick = () => {
2137
+ const newValue = [...value];
2138
+ const existingIndex = value.findIndex(vi => getWithSelector(getOptionId, vi) === id);
2139
+ if (existingIndex === -1) {
2140
+ return;
2141
+ }
2142
+ // Remove value
2143
+ newValue.splice(existingIndex, 1);
2144
+ onChange?.(newValue);
2145
+ };
2146
+ const onKeyDown = evt => {
2147
+ if (evt.key !== 'Backspace') {
2148
+ return;
2149
+ }
2150
+ // Activate (remove value) on Backspace pressed
2151
+ onClick();
2152
+ const previousChip = findPreviousEnabledChip(index - 1);
2153
+ const input = inputRef?.current;
2154
+ // Focus the previous chip or the input
2155
+ (previousChip || input)?.focus();
2156
+ };
2157
+ if (!chipRefs.current[index]) {
2158
+ chipRefs.current[index] = /*#__PURE__*/React__default.createRef();
2159
+ }
2160
+ const ref = chipRefs.current[index];
2161
+ const customChip = renderChip?.(v);
2162
+ const props = isComponentType(Chip)(customChip) ? customChip.props : undefined;
2163
+ const chipIsDisabled = props?.isDisabled || isDisabled;
2164
+ const chipName = typeof props?.children === 'string' ? props.children : name;
2165
+ const tooltipLabel = chipTooltipLabel(chipName);
2166
+ return /*#__PURE__*/jsx(Tooltip, {
2167
+ label: !chipIsDisabled ? tooltipLabel : undefined,
2168
+ closeMode: "hide",
2169
+ ariaLinkMode: "aria-labelledby",
2170
+ children: /*#__PURE__*/jsx(Chip, {
2171
+ ...props,
2172
+ after: /*#__PURE__*/jsx(Icon, {
2173
+ icon: mdiClose
2174
+ }),
2175
+ className: element$I('chip', [props?.className]),
2176
+ size: "s",
2177
+ ref: ref,
2178
+ onClick: onClick,
2179
+ onKeyDown: onKeyDown,
2180
+ theme: theme,
2181
+ isDisabled: chipIsDisabled,
2182
+ tabIndex: chipIsDisabled ? -1 : 0,
2183
+ children: props?.children || name
2184
+ })
2185
+ }, id);
2186
+ })
2187
+ });
2188
+ };
2189
+
1860
2190
  /**
1861
2191
  * Comment block variants.
1862
2192
  */
@@ -1872,16 +2202,16 @@ const CommentBlockVariant = {
1872
2202
  /**
1873
2203
  * Component display name.
1874
2204
  */
1875
- const COMPONENT_NAME$17 = 'CommentBlock';
2205
+ const COMPONENT_NAME$15 = 'CommentBlock';
1876
2206
 
1877
2207
  /**
1878
2208
  * Component default class name and class prefix.
1879
2209
  */
1880
- const CLASSNAME$15 = 'lumx-comment-block';
2210
+ const CLASSNAME$13 = 'lumx-comment-block';
1881
2211
  const {
1882
- block: block$X,
2212
+ block: block$V,
1883
2213
  element: element$H
1884
- } = classNames.bem(CLASSNAME$15);
2214
+ } = classNames.bem(CLASSNAME$13);
1885
2215
 
1886
2216
  /**
1887
2217
  * Component default props.
@@ -1922,7 +2252,7 @@ const CommentBlock = forwardRef((props, ref) => {
1922
2252
  const hasChildren = Children.count(children) > 0;
1923
2253
  return /*#__PURE__*/jsxs("div", {
1924
2254
  ref: ref,
1925
- className: classNames.join(className, block$X({
2255
+ className: classNames.join(className, block$V({
1926
2256
  'has-children': hasChildren && isOpen,
1927
2257
  'has-indented-children': hasChildren && variant === CommentBlockVariant.indented,
1928
2258
  'has-linear-children': hasChildren && variant === CommentBlockVariant.linear,
@@ -1983,8 +2313,8 @@ const CommentBlock = forwardRef((props, ref) => {
1983
2313
  })]
1984
2314
  });
1985
2315
  });
1986
- CommentBlock.displayName = COMPONENT_NAME$17;
1987
- CommentBlock.className = CLASSNAME$15;
2316
+ CommentBlock.displayName = COMPONENT_NAME$15;
2317
+ CommentBlock.className = CLASSNAME$13;
1988
2318
  CommentBlock.defaultProps = DEFAULT_PROPS$W;
1989
2319
 
1990
2320
  /**
@@ -2005,12 +2335,12 @@ const isDateValid = date => date instanceof Date && !Number.isNaN(date.getTime()
2005
2335
  /**
2006
2336
  * Component display name.
2007
2337
  */
2008
- const COMPONENT_NAME$16 = 'DatePicker';
2338
+ const COMPONENT_NAME$14 = 'DatePicker';
2009
2339
 
2010
2340
  /**
2011
2341
  * Component default class name and class prefix.
2012
2342
  */
2013
- const CLASSNAME$14 = 'lumx-date-picker';
2343
+ const CLASSNAME$12 = 'lumx-date-picker';
2014
2344
 
2015
2345
  /** Get first day of week for locale from the browser API */
2016
2346
  const getFromBrowser = locale => {
@@ -2230,7 +2560,7 @@ function formatDayNumber(locale, date) {
2230
2560
 
2231
2561
  const {
2232
2562
  element: element$G
2233
- } = classNames.bem(CLASSNAME$14);
2563
+ } = classNames.bem(CLASSNAME$12);
2234
2564
 
2235
2565
  /**
2236
2566
  * Defines the props of the component.
@@ -2239,7 +2569,7 @@ const {
2239
2569
  /**
2240
2570
  * Component display name.
2241
2571
  */
2242
- const COMPONENT_NAME$15 = 'DatePickerControlled';
2572
+ const COMPONENT_NAME$13 = 'DatePickerControlled';
2243
2573
 
2244
2574
  /**
2245
2575
  * DatePickerControlled component.
@@ -2324,7 +2654,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
2324
2654
  const yearLabel = getYearDisplayName(locale);
2325
2655
  return /*#__PURE__*/jsxs("div", {
2326
2656
  ref: ref,
2327
- className: `${CLASSNAME$14}`,
2657
+ className: `${CLASSNAME$12}`,
2328
2658
  style: style,
2329
2659
  children: [/*#__PURE__*/jsx(Toolbar, {
2330
2660
  className: element$G('toolbar'),
@@ -2429,8 +2759,8 @@ const DatePickerControlled = forwardRef((props, ref) => {
2429
2759
  })]
2430
2760
  });
2431
2761
  });
2432
- DatePickerControlled.displayName = COMPONENT_NAME$15;
2433
- DatePickerControlled.className = CLASSNAME$14;
2762
+ DatePickerControlled.displayName = COMPONENT_NAME$13;
2763
+ DatePickerControlled.className = CLASSNAME$12;
2434
2764
 
2435
2765
  /**
2436
2766
  * DatePicker component.
@@ -2472,8 +2802,8 @@ const DatePicker = forwardRef((props, ref) => {
2472
2802
  onMonthChange: setSelectedMonth
2473
2803
  });
2474
2804
  });
2475
- DatePicker.displayName = COMPONENT_NAME$16;
2476
- DatePicker.className = CLASSNAME$14;
2805
+ DatePicker.displayName = COMPONENT_NAME$14;
2806
+ DatePicker.className = CLASSNAME$12;
2477
2807
 
2478
2808
  const useBooleanState = defaultValue => {
2479
2809
  const [booleanValue, setBoolean] = useState(defaultValue);
@@ -2486,7 +2816,7 @@ const useBooleanState = defaultValue => {
2486
2816
  /**
2487
2817
  * Component display name.
2488
2818
  */
2489
- const COMPONENT_NAME$14 = 'DatePickerField';
2819
+ const COMPONENT_NAME$12 = 'DatePickerField';
2490
2820
 
2491
2821
  /**
2492
2822
  * DatePickerField component.
@@ -2575,7 +2905,7 @@ const DatePickerField = forwardRef((props, ref) => {
2575
2905
  }) : null]
2576
2906
  });
2577
2907
  });
2578
- DatePickerField.displayName = COMPONENT_NAME$14;
2908
+ DatePickerField.displayName = COMPONENT_NAME$12;
2579
2909
 
2580
2910
  /**
2581
2911
  * Optional global `window` instance (not defined when running SSR).
@@ -2793,11 +3123,6 @@ function useIntersectionObserver(elements, options) {
2793
3123
  return intersections;
2794
3124
  }
2795
3125
 
2796
- /**
2797
- * Similar to `isComponent` but more precise as it's not based on the component `displayName` but on the component function reference.
2798
- */
2799
- const isComponentType = type => node => /*#__PURE__*/React__default.isValidElement(node) && node.type === type;
2800
-
2801
3126
  /**
2802
3127
  * Similar to lodash `partition` function but working with multiple predicates.
2803
3128
  *
@@ -3081,16 +3406,16 @@ const isFooter$1 = isComponent('footer');
3081
3406
  /**
3082
3407
  * Component display name.
3083
3408
  */
3084
- const COMPONENT_NAME$13 = 'Dialog';
3409
+ const COMPONENT_NAME$11 = 'Dialog';
3085
3410
 
3086
3411
  /**
3087
3412
  * Component default class name and class prefix.
3088
3413
  */
3089
- const CLASSNAME$13 = 'lumx-dialog';
3414
+ const CLASSNAME$11 = 'lumx-dialog';
3090
3415
  const {
3091
- block: block$W,
3416
+ block: block$U,
3092
3417
  element: element$F
3093
- } = classNames.bem(CLASSNAME$13);
3418
+ } = classNames.bem(CLASSNAME$11);
3094
3419
 
3095
3420
  /**
3096
3421
  * Component default props.
@@ -3201,7 +3526,7 @@ const Dialog = forwardRef((props, ref) => {
3201
3526
  children: /*#__PURE__*/jsxs("div", {
3202
3527
  ref: mergeRefs(rootRef, ref),
3203
3528
  ...forwardedProps,
3204
- className: classNames.join(className, block$W({
3529
+ className: classNames.join(className, block$U({
3205
3530
  'is-hidden': !isOpen,
3206
3531
  'is-loading': isLoading,
3207
3532
  'is-shown': isOpen || isVisible,
@@ -3268,22 +3593,22 @@ const Dialog = forwardRef((props, ref) => {
3268
3593
  })
3269
3594
  }) : null;
3270
3595
  });
3271
- Dialog.displayName = COMPONENT_NAME$13;
3272
- Dialog.className = CLASSNAME$13;
3596
+ Dialog.displayName = COMPONENT_NAME$11;
3597
+ Dialog.className = CLASSNAME$11;
3273
3598
  Dialog.defaultProps = DEFAULT_PROPS$V;
3274
3599
 
3275
3600
  /**
3276
3601
  * Component display name.
3277
3602
  */
3278
- const COMPONENT_NAME$12 = 'Divider';
3603
+ const COMPONENT_NAME$10 = 'Divider';
3279
3604
 
3280
3605
  /**
3281
3606
  * Component default class name and class prefix.
3282
3607
  */
3283
- const CLASSNAME$12 = 'lumx-divider';
3608
+ const CLASSNAME$10 = 'lumx-divider';
3284
3609
  const {
3285
- block: block$V
3286
- } = classNames.bem(CLASSNAME$12);
3610
+ block: block$T
3611
+ } = classNames.bem(CLASSNAME$10);
3287
3612
 
3288
3613
  /**
3289
3614
  * Component default props.
@@ -3307,27 +3632,27 @@ const Divider = forwardRef((props, ref) => {
3307
3632
  return /*#__PURE__*/jsx("hr", {
3308
3633
  ref: ref,
3309
3634
  ...forwardedProps,
3310
- className: classNames.join(className, block$V({
3635
+ className: classNames.join(className, block$T({
3311
3636
  [`theme-${theme}`]: Boolean(theme)
3312
3637
  }))
3313
3638
  });
3314
3639
  });
3315
- Divider.displayName = COMPONENT_NAME$12;
3316
- Divider.className = CLASSNAME$12;
3640
+ Divider.displayName = COMPONENT_NAME$10;
3641
+ Divider.className = CLASSNAME$10;
3317
3642
  Divider.defaultProps = DEFAULT_PROPS$U;
3318
3643
 
3319
3644
  /**
3320
3645
  * Component display name.
3321
3646
  */
3322
- const COMPONENT_NAME$11 = 'DragHandle';
3647
+ const COMPONENT_NAME$$ = 'DragHandle';
3323
3648
 
3324
3649
  /**
3325
3650
  * Component default class name and class prefix.
3326
3651
  */
3327
- const CLASSNAME$11 = 'lumx-drag-handle';
3652
+ const CLASSNAME$$ = 'lumx-drag-handle';
3328
3653
  const {
3329
- block: block$U
3330
- } = classNames.bem(CLASSNAME$11);
3654
+ block: block$S
3655
+ } = classNames.bem(CLASSNAME$$);
3331
3656
 
3332
3657
  /**
3333
3658
  * DragHandle component.
@@ -3346,7 +3671,7 @@ const DragHandle = forwardRef((props, ref) => {
3346
3671
  return /*#__PURE__*/jsx("div", {
3347
3672
  ref: ref,
3348
3673
  ...forwardedProps,
3349
- className: classNames.join(className, block$U({
3674
+ className: classNames.join(className, block$S({
3350
3675
  [`theme-${theme}`]: Boolean(theme)
3351
3676
  })),
3352
3677
  children: /*#__PURE__*/jsx(Icon, {
@@ -3356,8 +3681,8 @@ const DragHandle = forwardRef((props, ref) => {
3356
3681
  })
3357
3682
  });
3358
3683
  });
3359
- DragHandle.displayName = COMPONENT_NAME$11;
3360
- DragHandle.className = CLASSNAME$11;
3684
+ DragHandle.displayName = COMPONENT_NAME$$;
3685
+ DragHandle.className = CLASSNAME$$;
3361
3686
 
3362
3687
  const INITIAL_INDEX = -1;
3363
3688
 
@@ -3526,15 +3851,15 @@ const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNav
3526
3851
  /**
3527
3852
  * Component display name.
3528
3853
  */
3529
- const COMPONENT_NAME$10 = 'List';
3854
+ const COMPONENT_NAME$_ = 'List';
3530
3855
 
3531
3856
  /**
3532
3857
  * Component default class name and class prefix.
3533
3858
  */
3534
- const CLASSNAME$10 = 'lumx-list';
3859
+ const CLASSNAME$_ = 'lumx-list';
3535
3860
  const {
3536
- block: block$T
3537
- } = classNames.bem(CLASSNAME$10);
3861
+ block: block$R
3862
+ } = classNames.bem(CLASSNAME$_);
3538
3863
 
3539
3864
  /**
3540
3865
  * Component default props.
@@ -3564,7 +3889,7 @@ const InternalList = forwardRef((props, ref) => {
3564
3889
  const adjustedItemPadding = itemPadding ?? (isClickable ? Size$1.big : undefined);
3565
3890
  return /*#__PURE__*/jsx("ul", {
3566
3891
  ...forwardedProps,
3567
- className: classNames.join(className, block$T({
3892
+ className: classNames.join(className, block$R({
3568
3893
  [`item-padding-${adjustedItemPadding}`]: Boolean(adjustedItemPadding)
3569
3894
  })),
3570
3895
  tabIndex: tabIndex,
@@ -3572,8 +3897,8 @@ const InternalList = forwardRef((props, ref) => {
3572
3897
  children: children
3573
3898
  });
3574
3899
  });
3575
- InternalList.displayName = COMPONENT_NAME$10;
3576
- InternalList.className = CLASSNAME$10;
3900
+ InternalList.displayName = COMPONENT_NAME$_;
3901
+ InternalList.className = CLASSNAME$_;
3577
3902
  InternalList.defaultProps = DEFAULT_PROPS$T;
3578
3903
  const List = Object.assign(InternalList, {
3579
3904
  useKeyboardListNavigation
@@ -6005,16 +6330,16 @@ function usePopoverStyle({
6005
6330
  /**
6006
6331
  * Component display name.
6007
6332
  */
6008
- const COMPONENT_NAME$$ = 'Popover';
6333
+ const COMPONENT_NAME$Z = 'Popover';
6009
6334
 
6010
6335
  /**
6011
6336
  * Component default class name and class prefix.
6012
6337
  */
6013
- const CLASSNAME$$ = 'lumx-popover';
6338
+ const CLASSNAME$Z = 'lumx-popover';
6014
6339
  const {
6015
- block: block$S,
6340
+ block: block$Q,
6016
6341
  element: element$E
6017
- } = classNames.bem(CLASSNAME$$);
6342
+ } = classNames.bem(CLASSNAME$Z);
6018
6343
 
6019
6344
  /**
6020
6345
  * Component default props.
@@ -6095,7 +6420,7 @@ const _InnerPopover = forwardRef((props, ref) => {
6095
6420
  children: /*#__PURE__*/jsxs(Component, {
6096
6421
  ...forwardedProps,
6097
6422
  ref: mergedRefs,
6098
- className: classNames.join(className, block$S({
6423
+ className: classNames.join(className, block$Q({
6099
6424
  [`theme-${theme}`]: Boolean(theme),
6100
6425
  [`elevation-${adjustedElevation}`]: Boolean(adjustedElevation),
6101
6426
  [`position-${position}`]: Boolean(position),
@@ -6125,7 +6450,7 @@ const _InnerPopover = forwardRef((props, ref) => {
6125
6450
  })
6126
6451
  }) : null;
6127
6452
  });
6128
- _InnerPopover.displayName = COMPONENT_NAME$$;
6453
+ _InnerPopover.displayName = COMPONENT_NAME$Z;
6129
6454
 
6130
6455
  /**
6131
6456
  * Popover component.
@@ -6137,8 +6462,8 @@ _InnerPopover.displayName = COMPONENT_NAME$$;
6137
6462
  const Popover = skipRender(
6138
6463
  // Skip render in SSR
6139
6464
  () => Boolean(DOCUMENT), _InnerPopover);
6140
- Popover.displayName = COMPONENT_NAME$$;
6141
- Popover.className = CLASSNAME$$;
6465
+ Popover.displayName = COMPONENT_NAME$Z;
6466
+ Popover.className = CLASSNAME$Z;
6142
6467
  Popover.defaultProps = DEFAULT_PROPS$S;
6143
6468
 
6144
6469
  // The error margin in px we want to have for triggering infinite scroll
@@ -6185,16 +6510,16 @@ const useInfiniteScroll = (ref, callback, callbackOnMount = false, scrollTrigger
6185
6510
  /**
6186
6511
  * Component display name.
6187
6512
  */
6188
- const COMPONENT_NAME$_ = 'Dropdown';
6513
+ const COMPONENT_NAME$Y = 'Dropdown';
6189
6514
 
6190
6515
  /**
6191
6516
  * Component default class name and class prefix.
6192
6517
  */
6193
- const CLASSNAME$_ = 'lumx-dropdown';
6518
+ const CLASSNAME$Y = 'lumx-dropdown';
6194
6519
  const {
6195
- block: block$R,
6520
+ block: block$P,
6196
6521
  element: element$D
6197
- } = classNames.bem(CLASSNAME$_);
6522
+ } = classNames.bem(CLASSNAME$Y);
6198
6523
 
6199
6524
  /**
6200
6525
  * Component default props.
@@ -6258,7 +6583,7 @@ const Dropdown = forwardRef((props, ref) => {
6258
6583
  ...forwardedProps,
6259
6584
  focusAnchorOnClose: focusAnchorOnClose,
6260
6585
  anchorRef: anchorRef,
6261
- className: classNames.join(className, block$R()),
6586
+ className: classNames.join(className, block$P()),
6262
6587
  elevation: 0,
6263
6588
  closeOnClickAway: closeOnClickAway,
6264
6589
  closeOnEscape: closeOnEscape,
@@ -6277,23 +6602,23 @@ const Dropdown = forwardRef((props, ref) => {
6277
6602
  })
6278
6603
  }) : null;
6279
6604
  });
6280
- Dropdown.displayName = COMPONENT_NAME$_;
6281
- Dropdown.className = CLASSNAME$_;
6605
+ Dropdown.displayName = COMPONENT_NAME$Y;
6606
+ Dropdown.className = CLASSNAME$Y;
6282
6607
  Dropdown.defaultProps = DEFAULT_PROPS$R;
6283
6608
 
6284
6609
  /**
6285
6610
  * Component display name.
6286
6611
  */
6287
- const COMPONENT_NAME$Z = 'ExpansionPanel';
6612
+ const COMPONENT_NAME$X = 'ExpansionPanel';
6288
6613
 
6289
6614
  /**
6290
6615
  * Component default class name and class prefix.
6291
6616
  */
6292
- const CLASSNAME$Z = 'lumx-expansion-panel';
6617
+ const CLASSNAME$X = 'lumx-expansion-panel';
6293
6618
  const {
6294
- block: block$Q,
6619
+ block: block$O,
6295
6620
  element: element$C
6296
- } = classNames.bem(CLASSNAME$Z);
6621
+ } = classNames.bem(CLASSNAME$X);
6297
6622
 
6298
6623
  /**
6299
6624
  * Component default props.
@@ -6353,7 +6678,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
6353
6678
  }
6354
6679
  };
6355
6680
  const color = theme === Theme$1.dark ? ColorPalette$1.light : ColorPalette$1.dark;
6356
- const rootClassName = classNames.join(className, block$Q({
6681
+ const rootClassName = classNames.join(className, block$O({
6357
6682
  'has-background': hasBackground,
6358
6683
  'has-header': Boolean(!isEmpty(headerProps.children)),
6359
6684
  'has-header-divider': hasHeaderDivider,
@@ -6431,17 +6756,17 @@ const ExpansionPanel = forwardRef((props, ref) => {
6431
6756
  })]
6432
6757
  });
6433
6758
  });
6434
- ExpansionPanel.displayName = COMPONENT_NAME$Z;
6435
- ExpansionPanel.className = CLASSNAME$Z;
6759
+ ExpansionPanel.displayName = COMPONENT_NAME$X;
6760
+ ExpansionPanel.className = CLASSNAME$X;
6436
6761
  ExpansionPanel.defaultProps = DEFAULT_PROPS$Q;
6437
6762
 
6438
- const COMPONENT_NAME$Y = 'Flag';
6439
- const CLASSNAME$Y = 'lumx-flag';
6763
+ const COMPONENT_NAME$W = 'Flag';
6764
+ const CLASSNAME$W = 'lumx-flag';
6440
6765
  const DEFAULT_PROPS$P = {};
6441
6766
  const {
6442
- block: block$P,
6767
+ block: block$N,
6443
6768
  element: element$B
6444
- } = bem(CLASSNAME$Y);
6769
+ } = bem(CLASSNAME$W);
6445
6770
 
6446
6771
  /**
6447
6772
  * Flag component.
@@ -6464,7 +6789,7 @@ const Flag$1 = props => {
6464
6789
  const isTruncated = !!truncate;
6465
6790
  return /*#__PURE__*/jsxs("div", {
6466
6791
  ...forwardedProps,
6467
- className: classnames(className, block$P({
6792
+ className: classnames(className, block$N({
6468
6793
  [`color-${flagColor}`]: Boolean(flagColor),
6469
6794
  'is-truncated': isTruncated
6470
6795
  })),
@@ -6499,8 +6824,8 @@ const Flag = forwardRef((props, ref) => {
6499
6824
  Text
6500
6825
  });
6501
6826
  });
6502
- Flag.displayName = COMPONENT_NAME$Y;
6503
- Flag.className = CLASSNAME$Y;
6827
+ Flag.displayName = COMPONENT_NAME$W;
6828
+ Flag.className = CLASSNAME$W;
6504
6829
  Flag.defaultProps = DEFAULT_PROPS$P;
6505
6830
 
6506
6831
  /**
@@ -6510,15 +6835,15 @@ Flag.defaultProps = DEFAULT_PROPS$P;
6510
6835
  /**
6511
6836
  * Component display name.
6512
6837
  */
6513
- const COMPONENT_NAME$X = 'FlexBox';
6838
+ const COMPONENT_NAME$V = 'FlexBox';
6514
6839
 
6515
6840
  /**
6516
6841
  * Component default class name and class prefix.
6517
6842
  */
6518
- const CLASSNAME$X = 'lumx-flex-box';
6843
+ const CLASSNAME$V = 'lumx-flex-box';
6519
6844
  const {
6520
- block: block$O
6521
- } = bem(CLASSNAME$X);
6845
+ block: block$M
6846
+ } = bem(CLASSNAME$V);
6522
6847
 
6523
6848
  /**
6524
6849
  * Get FlexBox component props (className computation).
@@ -6542,7 +6867,7 @@ function getFlexBoxProps(props) {
6542
6867
  const adjustedOrientation = orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null);
6543
6868
  return {
6544
6869
  ...forwardedProps,
6545
- className: classnames(className, block$O({
6870
+ className: classnames(className, block$M({
6546
6871
  [`orientation-${adjustedOrientation}`]: Boolean(adjustedOrientation),
6547
6872
  [`v-align-${vAlign}`]: Boolean(vAlign),
6548
6873
  [`h-align-${hAlign}`]: Boolean(hAlign),
@@ -6574,22 +6899,22 @@ const FlexBox = forwardRef((props, ref) => {
6574
6899
  children: children
6575
6900
  });
6576
6901
  });
6577
- FlexBox.displayName = COMPONENT_NAME$X;
6578
- FlexBox.className = CLASSNAME$X;
6902
+ FlexBox.displayName = COMPONENT_NAME$V;
6903
+ FlexBox.className = CLASSNAME$V;
6579
6904
 
6580
6905
  /**
6581
6906
  * Component display name.
6582
6907
  */
6583
- const COMPONENT_NAME$W = 'GenericBlock';
6908
+ const COMPONENT_NAME$U = 'GenericBlock';
6584
6909
 
6585
6910
  /**
6586
6911
  * Component default class name and class prefix.
6587
6912
  */
6588
- const CLASSNAME$W = 'lumx-generic-block';
6913
+ const CLASSNAME$U = 'lumx-generic-block';
6589
6914
  const {
6590
- block: block$N,
6915
+ block: block$L,
6591
6916
  element: element$A
6592
- } = classNames.bem(CLASSNAME$W);
6917
+ } = classNames.bem(CLASSNAME$U);
6593
6918
 
6594
6919
  /**
6595
6920
  * Component default props.
@@ -6644,7 +6969,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
6644
6969
  }, [children]);
6645
6970
  return /*#__PURE__*/jsxs(FlexBox, {
6646
6971
  ref: ref,
6647
- className: classNames.join(className, block$N()),
6972
+ className: classNames.join(className, block$L()),
6648
6973
  gap: gap,
6649
6974
  orientation: orientation,
6650
6975
  ...forwardedProps,
@@ -6677,8 +7002,8 @@ const BaseGenericBlock = forwardRef((props, ref) => {
6677
7002
  })]
6678
7003
  });
6679
7004
  });
6680
- BaseGenericBlock.displayName = COMPONENT_NAME$W;
6681
- BaseGenericBlock.className = CLASSNAME$W;
7005
+ BaseGenericBlock.displayName = COMPONENT_NAME$U;
7006
+ BaseGenericBlock.className = CLASSNAME$U;
6682
7007
  BaseGenericBlock.defaultProps = DEFAULT_PROPS$O;
6683
7008
  const GenericBlock = Object.assign(BaseGenericBlock, {
6684
7009
  Figure,
@@ -6717,12 +7042,12 @@ const defaultContext = {
6717
7042
  /**
6718
7043
  * Component display name.
6719
7044
  */
6720
- const COMPONENT_NAME$V = 'Heading';
7045
+ const COMPONENT_NAME$T = 'Heading';
6721
7046
 
6722
7047
  /**
6723
7048
  * Component default class name and class prefix.
6724
7049
  */
6725
- const CLASSNAME$V = 'lumx-heading';
7050
+ const CLASSNAME$T = 'lumx-heading';
6726
7051
 
6727
7052
  /**
6728
7053
  * Component default props.
@@ -6747,7 +7072,7 @@ const getHeadingProps = (props, contextHeadingElement) => {
6747
7072
  return {
6748
7073
  ...otherProps,
6749
7074
  as: computedHeadingElement,
6750
- className: classnames(className, CLASSNAME$V),
7075
+ className: classnames(className, CLASSNAME$T),
6751
7076
  typography: typography || DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]
6752
7077
  };
6753
7078
  };
@@ -6815,15 +7140,15 @@ function wrapChildrenIconWithSpaces(children) {
6815
7140
  /**
6816
7141
  * Component display name.
6817
7142
  */
6818
- const COMPONENT_NAME$U = 'Text';
7143
+ const COMPONENT_NAME$S = 'Text';
6819
7144
 
6820
7145
  /**
6821
7146
  * Component default class name and class prefix.
6822
7147
  */
6823
- const CLASSNAME$U = 'lumx-text';
7148
+ const CLASSNAME$S = 'lumx-text';
6824
7149
  const {
6825
- block: block$M
6826
- } = bem(CLASSNAME$U);
7150
+ block: block$K
7151
+ } = bem(CLASSNAME$S);
6827
7152
 
6828
7153
  /**
6829
7154
  * Component default props.
@@ -6864,7 +7189,7 @@ const getTextProps = props => {
6864
7189
  '--lumx-text-white-space': whiteSpace
6865
7190
  };
6866
7191
  return {
6867
- className: classnames(className, block$M({
7192
+ className: classnames(className, block$K({
6868
7193
  'is-truncated': isTruncated && !isTruncatedMultiline,
6869
7194
  'is-truncated-multiline': isTruncatedMultiline,
6870
7195
  'no-wrap': noWrap
@@ -6913,8 +7238,8 @@ const Text = forwardRef((props, ref) => {
6913
7238
  children: wrapChildrenIconWithSpaces(children)
6914
7239
  });
6915
7240
  });
6916
- Text.displayName = COMPONENT_NAME$U;
6917
- Text.className = CLASSNAME$U;
7241
+ Text.displayName = COMPONENT_NAME$S;
7242
+ Text.className = CLASSNAME$S;
6918
7243
  Text.defaultProps = DEFAULT_PROPS$M;
6919
7244
 
6920
7245
  const HeadingLevelContext = /*#__PURE__*/createContext(defaultContext);
@@ -6950,8 +7275,8 @@ const Heading = forwardRef((props, ref) => {
6950
7275
  children: children
6951
7276
  });
6952
7277
  });
6953
- Heading.displayName = COMPONENT_NAME$V;
6954
- Heading.className = CLASSNAME$V;
7278
+ Heading.displayName = COMPONENT_NAME$T;
7279
+ Heading.className = CLASSNAME$T;
6955
7280
  Heading.defaultProps = DEFAULT_PROPS$N;
6956
7281
 
6957
7282
  /**
@@ -6990,15 +7315,15 @@ const HeadingLevelProvider = ({
6990
7315
  /**
6991
7316
  * Component display name.
6992
7317
  */
6993
- const COMPONENT_NAME$T = 'Grid';
7318
+ const COMPONENT_NAME$R = 'Grid';
6994
7319
 
6995
7320
  /**
6996
7321
  * Component default class name and class prefix.
6997
7322
  */
6998
- const CLASSNAME$T = 'lumx-grid';
7323
+ const CLASSNAME$R = 'lumx-grid';
6999
7324
  const {
7000
- block: block$L
7001
- } = classNames.bem(CLASSNAME$T);
7325
+ block: block$J
7326
+ } = classNames.bem(CLASSNAME$R);
7002
7327
 
7003
7328
  /**
7004
7329
  * Component default props.
@@ -7029,7 +7354,7 @@ const Grid = forwardRef((props, ref) => {
7029
7354
  return /*#__PURE__*/jsx("div", {
7030
7355
  ref: ref,
7031
7356
  ...forwardedProps,
7032
- className: classNames.join(className, classNames.bem(`${CLASSNAME$T}-container`).block(), block$L({
7357
+ className: classNames.join(className, classNames.bem(`${CLASSNAME$R}-container`).block(), block$J({
7033
7358
  [`h-align-${hAlign}`]: Boolean(hAlign),
7034
7359
  [`v-align-${vAlign}`]: Boolean(vAlign),
7035
7360
  [`orientation-${orientation}`]: Boolean(orientation),
@@ -7039,22 +7364,22 @@ const Grid = forwardRef((props, ref) => {
7039
7364
  children: children
7040
7365
  });
7041
7366
  });
7042
- Grid.displayName = COMPONENT_NAME$T;
7043
- Grid.className = CLASSNAME$T;
7367
+ Grid.displayName = COMPONENT_NAME$R;
7368
+ Grid.className = CLASSNAME$R;
7044
7369
  Grid.defaultProps = DEFAULT_PROPS$L;
7045
7370
 
7046
7371
  /**
7047
7372
  * Component display name.
7048
7373
  */
7049
- const COMPONENT_NAME$S = 'GridItem';
7374
+ const COMPONENT_NAME$Q = 'GridItem';
7050
7375
 
7051
7376
  /**
7052
7377
  * Component default class name and class prefix.
7053
7378
  */
7054
- const CLASSNAME$S = 'lumx-grid-item';
7379
+ const CLASSNAME$Q = 'lumx-grid-item';
7055
7380
  const {
7056
- block: block$K
7057
- } = classNames.bem(CLASSNAME$S);
7381
+ block: block$I
7382
+ } = classNames.bem(CLASSNAME$Q);
7058
7383
 
7059
7384
  /**
7060
7385
  * GridItem component.
@@ -7075,7 +7400,7 @@ const GridItem = forwardRef((props, ref) => {
7075
7400
  return /*#__PURE__*/jsx("div", {
7076
7401
  ref: ref,
7077
7402
  ...forwardedProps,
7078
- className: classNames.join(className, block$K({
7403
+ className: classNames.join(className, block$I({
7079
7404
  [`width-${width}`]: Boolean(width),
7080
7405
  [`order-${order}`]: Boolean(order),
7081
7406
  [`align-${align}`]: Boolean(align)
@@ -7083,18 +7408,18 @@ const GridItem = forwardRef((props, ref) => {
7083
7408
  children: children
7084
7409
  });
7085
7410
  });
7086
- GridItem.displayName = COMPONENT_NAME$S;
7087
- GridItem.className = CLASSNAME$S;
7411
+ GridItem.displayName = COMPONENT_NAME$Q;
7412
+ GridItem.className = CLASSNAME$Q;
7088
7413
 
7089
7414
  /**
7090
7415
  * Component display name.
7091
7416
  */
7092
- const COMPONENT_NAME$R = 'GridColumn';
7417
+ const COMPONENT_NAME$P = 'GridColumn';
7093
7418
 
7094
7419
  /**
7095
7420
  * Component default class name and class prefix.
7096
7421
  */
7097
- const CLASSNAME$R = 'lumx-grid-column';
7422
+ const CLASSNAME$P = 'lumx-grid-column';
7098
7423
 
7099
7424
  /**
7100
7425
  * Component default props.
@@ -7124,7 +7449,7 @@ const GridColumn = forwardRef((props, ref) => {
7124
7449
  return /*#__PURE__*/jsx(Component, {
7125
7450
  ...forwardedProps,
7126
7451
  ref: ref,
7127
- className: classNames.join(className, CLASSNAME$R),
7452
+ className: classNames.join(className, CLASSNAME$P),
7128
7453
  style: {
7129
7454
  ...style,
7130
7455
  ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
@@ -7134,8 +7459,8 @@ const GridColumn = forwardRef((props, ref) => {
7134
7459
  children: children
7135
7460
  });
7136
7461
  });
7137
- GridColumn.displayName = COMPONENT_NAME$R;
7138
- GridColumn.className = CLASSNAME$R;
7462
+ GridColumn.displayName = COMPONENT_NAME$P;
7463
+ GridColumn.className = CLASSNAME$P;
7139
7464
  GridColumn.defaultProps = DEFAULT_PROPS$K;
7140
7465
 
7141
7466
  /**
@@ -7240,16 +7565,16 @@ const ImageBlockCaptionPosition = {
7240
7565
  /**
7241
7566
  * Component display name.
7242
7567
  */
7243
- const COMPONENT_NAME$Q = 'ImageBlock';
7568
+ const COMPONENT_NAME$O = 'ImageBlock';
7244
7569
 
7245
7570
  /**
7246
7571
  * Component default class name and class prefix.
7247
7572
  */
7248
- const CLASSNAME$Q = 'lumx-image-block';
7573
+ const CLASSNAME$O = 'lumx-image-block';
7249
7574
  const {
7250
- block: block$J,
7575
+ block: block$H,
7251
7576
  element: element$z
7252
- } = classNames.bem(CLASSNAME$Q);
7577
+ } = classNames.bem(CLASSNAME$O);
7253
7578
 
7254
7579
  /**
7255
7580
  * Component default props.
@@ -7290,7 +7615,7 @@ const ImageBlock = forwardRef((props, ref) => {
7290
7615
  return /*#__PURE__*/jsxs("figure", {
7291
7616
  ref: ref,
7292
7617
  ...forwardedProps,
7293
- className: classNames.join(className, block$J({
7618
+ className: classNames.join(className, block$H({
7294
7619
  [`caption-position-${captionPosition}`]: Boolean(captionPosition),
7295
7620
  [`align-${align}`]: Boolean(align),
7296
7621
  [`size-${size}`]: Boolean(size),
@@ -7308,7 +7633,7 @@ const ImageBlock = forwardRef((props, ref) => {
7308
7633
  alt: alt || title
7309
7634
  }), /*#__PURE__*/jsx(ImageCaption, {
7310
7635
  as: "figcaption",
7311
- baseClassName: CLASSNAME$Q,
7636
+ baseClassName: CLASSNAME$O,
7312
7637
  theme: theme,
7313
7638
  title: title,
7314
7639
  titleProps: titleProps,
@@ -7324,19 +7649,19 @@ const ImageBlock = forwardRef((props, ref) => {
7324
7649
  })]
7325
7650
  });
7326
7651
  });
7327
- ImageBlock.displayName = COMPONENT_NAME$Q;
7328
- ImageBlock.className = CLASSNAME$Q;
7652
+ ImageBlock.displayName = COMPONENT_NAME$O;
7653
+ ImageBlock.className = CLASSNAME$O;
7329
7654
  ImageBlock.defaultProps = DEFAULT_PROPS$J;
7330
7655
 
7331
7656
  /**
7332
7657
  * Component display name.
7333
7658
  */
7334
- const COMPONENT_NAME$P = 'ImageLightbox';
7659
+ const COMPONENT_NAME$N = 'ImageLightbox';
7335
7660
 
7336
7661
  /**
7337
7662
  * Component default class name and class prefix.
7338
7663
  */
7339
- const CLASSNAME$P = 'lumx-image-lightbox';
7664
+ const CLASSNAME$N = 'lumx-image-lightbox';
7340
7665
 
7341
7666
  /**
7342
7667
  * Observe element size (only works if it's size depends on the window size).
@@ -7582,7 +7907,7 @@ function useAnimateScroll(scrollAreaRef) {
7582
7907
 
7583
7908
  const {
7584
7909
  element: element$y
7585
- } = classNames.bem(CLASSNAME$P);
7910
+ } = classNames.bem(CLASSNAME$N);
7586
7911
  /** Internal image slide component for ImageLightbox */
7587
7912
  const ImageSlide = /*#__PURE__*/React__default.memo(props => {
7588
7913
  const {
@@ -7674,7 +7999,7 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
7674
7999
 
7675
8000
  const {
7676
8001
  element: element$x
7677
- } = classNames.bem(CLASSNAME$P);
8002
+ } = classNames.bem(CLASSNAME$N);
7678
8003
  /** Internal image slideshow component for ImageLightbox */
7679
8004
  const ImageSlideshow = ({
7680
8005
  activeImageIndex,
@@ -7920,7 +8245,7 @@ function useImageLightbox(props) {
7920
8245
  viewTransitionName: {
7921
8246
  source: currentImageRef,
7922
8247
  target: triggerImageRefs[currentIndex],
7923
- name: CLASSNAME$P
8248
+ name: CLASSNAME$N
7924
8249
  }
7925
8250
  });
7926
8251
  }
@@ -7972,7 +8297,7 @@ function useImageLightbox(props) {
7972
8297
  viewTransitionName: {
7973
8298
  source: triggerImage,
7974
8299
  target: currentImageRef,
7975
- name: CLASSNAME$P
8300
+ name: CLASSNAME$N
7976
8301
  }
7977
8302
  });
7978
8303
  }
@@ -8026,7 +8351,7 @@ const Inner = forwardRef((props, ref) => {
8026
8351
  }, [onClose]);
8027
8352
  return /*#__PURE__*/jsx(Lightbox, {
8028
8353
  ref: ref,
8029
- className: classNames.join(className, CLASSNAME$P),
8354
+ className: classNames.join(className, CLASSNAME$N),
8030
8355
  parentElement: parentElement,
8031
8356
  isOpen: isOpen,
8032
8357
  onClose: onClose,
@@ -8055,8 +8380,8 @@ const Inner = forwardRef((props, ref) => {
8055
8380
  })
8056
8381
  });
8057
8382
  });
8058
- Inner.displayName = COMPONENT_NAME$P;
8059
- Inner.className = CLASSNAME$P;
8383
+ Inner.displayName = COMPONENT_NAME$N;
8384
+ Inner.className = CLASSNAME$N;
8060
8385
 
8061
8386
  /**
8062
8387
  * ImageLightbox component.
@@ -8072,16 +8397,16 @@ const ImageLightbox = Object.assign(Inner, {
8072
8397
  /**
8073
8398
  * Component display name.
8074
8399
  */
8075
- const COMPONENT_NAME$O = 'InlineList';
8400
+ const COMPONENT_NAME$M = 'InlineList';
8076
8401
 
8077
8402
  /**
8078
8403
  * Component default class name and class prefix.
8079
8404
  */
8080
- const CLASSNAME$O = 'lumx-inline-list';
8405
+ const CLASSNAME$M = 'lumx-inline-list';
8081
8406
  const {
8082
- block: block$I,
8407
+ block: block$G,
8083
8408
  element: element$w
8084
- } = classNames.bem(CLASSNAME$O);
8409
+ } = classNames.bem(CLASSNAME$M);
8085
8410
 
8086
8411
  /**
8087
8412
  * Component default props.
@@ -8111,7 +8436,7 @@ const InlineList = forwardRef((props, ref) => {
8111
8436
  jsx("ul", {
8112
8437
  ...forwardedProps,
8113
8438
  ref: ref,
8114
- className: classNames.join(className, block$I({
8439
+ className: classNames.join(className, block$G({
8115
8440
  wrap: Boolean(wrap)
8116
8441
  }), color && classNames.font(color, colorVariant), typography && classNames.typography(typography))
8117
8442
  // Lists with removed bullet style can lose their a11y list role on some browsers
@@ -8137,126 +8462,28 @@ const InlineList = forwardRef((props, ref) => {
8137
8462
  })
8138
8463
  );
8139
8464
  });
8140
- InlineList.displayName = COMPONENT_NAME$O;
8141
- InlineList.className = CLASSNAME$O;
8465
+ InlineList.displayName = COMPONENT_NAME$M;
8466
+ InlineList.className = CLASSNAME$M;
8142
8467
  InlineList.defaultProps = DEFAULT_PROPS$I;
8143
8468
 
8144
- const INPUT_HELPER_CONFIGURATION = {
8145
- [Kind.error]: {
8146
- color: 'red'
8147
- },
8148
- [Kind.success]: {
8149
- color: 'green'
8150
- },
8151
- [Kind.warning]: {
8152
- color: 'yellow'
8153
- }
8154
- };
8155
-
8156
- const COMPONENT_NAME$N = 'InputHelper';
8157
- const InputHelperClassName = 'lumx-input-helper';
8158
-
8159
- /**
8160
- * Defines the props of the component.
8161
- */
8162
-
8163
- const CLASSNAME$N = InputHelperClassName;
8164
- const {
8165
- block: block$H
8166
- } = bem(CLASSNAME$N);
8167
-
8168
- /**
8169
- * Component default props.
8170
- */
8171
- const DEFAULT_PROPS$H = {
8172
- kind: Kind.info
8173
- };
8174
-
8175
- /**
8176
- * InputHelper component.
8177
- */
8178
- function InputHelper$1(props) {
8179
- const {
8180
- children,
8181
- className,
8182
- kind = DEFAULT_PROPS$H.kind,
8183
- theme,
8184
- ref,
8185
- ...forwardedProps
8186
- } = props;
8187
- const {
8188
- color
8189
- } = INPUT_HELPER_CONFIGURATION[kind] || {};
8190
- return /*#__PURE__*/jsx("p", {
8191
- ref: ref,
8192
- ...forwardedProps,
8193
- className: classnames(className, block$H({
8194
- [`color-${color}`]: Boolean(color),
8195
- [`theme-${theme}`]: Boolean(theme)
8196
- })),
8197
- children: children
8198
- });
8199
- }
8200
- InputHelper$1.displayName = COMPONENT_NAME$N;
8201
- InputHelper$1.className = CLASSNAME$N;
8202
- InputHelper$1.defaultProps = DEFAULT_PROPS$H;
8203
-
8204
8469
  /**
8205
8470
  * InputHelper component.
8206
8471
  *
8207
8472
  * @param props Component props.
8208
- * @param ref Component ref.
8209
- * @return React element.
8210
- */
8211
- const InputHelper = forwardRef((props, ref) => {
8212
- const defaultTheme = useTheme() || Theme$1.light;
8213
- return InputHelper$1({
8214
- ...props,
8215
- ref,
8216
- theme: props.theme || defaultTheme
8217
- });
8218
- });
8219
- InputHelper.displayName = InputHelper$1.displayName;
8220
- InputHelper.className = InputHelper$1.className;
8221
- InputHelper.defaultProps = InputHelper$1.defaultProps;
8222
-
8223
- const COMPONENT_NAME$M = 'InputLabel';
8224
- const InputLabelClassName = 'lumx-input-label';
8225
- const CLASSNAME$M = InputLabelClassName;
8226
- const {
8227
- block: block$G
8228
- } = bem(CLASSNAME$M);
8229
- const DEFAULT_PROPS$G = {};
8230
-
8231
- /**
8232
- * InputLabel component.
8233
- */
8234
- function InputLabel$1(props) {
8235
- const {
8236
- children,
8237
- className,
8238
- htmlFor,
8239
- isRequired,
8240
- theme,
8241
- typography: typography$1,
8242
- ref,
8243
- ...forwardedProps
8244
- } = props;
8245
- return /*#__PURE__*/jsx("label", {
8246
- ref: ref,
8247
- ...forwardedProps,
8248
- htmlFor: htmlFor,
8249
- className: classnames(className, block$G({
8250
- 'is-required': isRequired,
8251
- [`theme-${theme}`]: Boolean(theme),
8252
- 'has-custom-typography': Boolean(typography$1)
8253
- }), typography$1 && typography(typography$1)),
8254
- children: children
8473
+ * @param ref Component ref.
8474
+ * @return React element.
8475
+ */
8476
+ const InputHelper = forwardRef((props, ref) => {
8477
+ const defaultTheme = useTheme() || Theme$1.light;
8478
+ return InputHelper$1({
8479
+ ...props,
8480
+ ref,
8481
+ theme: props.theme || defaultTheme
8255
8482
  });
8256
- }
8257
- InputLabel$1.displayName = COMPONENT_NAME$M;
8258
- InputLabel$1.className = CLASSNAME$M;
8259
- InputLabel$1.defaultProps = DEFAULT_PROPS$G;
8483
+ });
8484
+ InputHelper.displayName = InputHelper$1.displayName;
8485
+ InputHelper.className = InputHelper$1.className;
8486
+ InputHelper.defaultProps = InputHelper$1.defaultProps;
8260
8487
 
8261
8488
  /**
8262
8489
  * InputLabel component.
@@ -8511,7 +8738,7 @@ const {
8511
8738
  /**
8512
8739
  * Component default props.
8513
8740
  */
8514
- const DEFAULT_PROPS$F = {
8741
+ const DEFAULT_PROPS$H = {
8515
8742
  size: Size$1.regular,
8516
8743
  titleHeading: 'h2'
8517
8744
  };
@@ -8531,11 +8758,11 @@ const LinkPreview = forwardRef((props, ref) => {
8531
8758
  link,
8532
8759
  linkAs,
8533
8760
  linkProps,
8534
- size = DEFAULT_PROPS$F.size,
8761
+ size = DEFAULT_PROPS$H.size,
8535
8762
  theme = defaultTheme,
8536
8763
  thumbnailProps,
8537
8764
  title,
8538
- titleHeading = DEFAULT_PROPS$F.titleHeading,
8765
+ titleHeading = DEFAULT_PROPS$H.titleHeading,
8539
8766
  ...forwardedProps
8540
8767
  } = props;
8541
8768
  // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
@@ -8603,7 +8830,7 @@ const LinkPreview = forwardRef((props, ref) => {
8603
8830
  });
8604
8831
  LinkPreview.displayName = COMPONENT_NAME$J;
8605
8832
  LinkPreview.className = CLASSNAME$J;
8606
- LinkPreview.defaultProps = DEFAULT_PROPS$F;
8833
+ LinkPreview.defaultProps = DEFAULT_PROPS$H;
8607
8834
 
8608
8835
  /**
8609
8836
  * Render link with default <a> HTML component or a custom one provided by `linkAs`.
@@ -8636,7 +8863,7 @@ const {
8636
8863
  /**
8637
8864
  * Component default props.
8638
8865
  */
8639
- const DEFAULT_PROPS$E = {
8866
+ const DEFAULT_PROPS$G = {
8640
8867
  size: Size$1.regular
8641
8868
  };
8642
8869
 
@@ -8675,7 +8902,7 @@ const ListItem = forwardRef((props, ref) => {
8675
8902
  linkProps = {},
8676
8903
  linkRef,
8677
8904
  onItemSelected,
8678
- size = DEFAULT_PROPS$E.size,
8905
+ size = DEFAULT_PROPS$G.size,
8679
8906
  ...forwardedProps
8680
8907
  } = otherProps;
8681
8908
  const role = linkAs || linkProps.href ? 'link' : 'button';
@@ -8732,7 +8959,7 @@ const ListItem = forwardRef((props, ref) => {
8732
8959
  });
8733
8960
  ListItem.displayName = COMPONENT_NAME$I;
8734
8961
  ListItem.className = CLASSNAME$I;
8735
- ListItem.defaultProps = DEFAULT_PROPS$E;
8962
+ ListItem.defaultProps = DEFAULT_PROPS$G;
8736
8963
 
8737
8964
  /**
8738
8965
  * Component display name.
@@ -8920,7 +9147,7 @@ const {
8920
9147
  /**
8921
9148
  * Component default props.
8922
9149
  */
8923
- const DEFAULT_PROPS$D = {};
9150
+ const DEFAULT_PROPS$F = {};
8924
9151
 
8925
9152
  /**
8926
9153
  * Mosaic component.
@@ -8987,7 +9214,7 @@ const Mosaic = forwardRef((props, ref) => {
8987
9214
  });
8988
9215
  Mosaic.displayName = COMPONENT_NAME$E;
8989
9216
  Mosaic.className = CLASSNAME$E;
8990
- Mosaic.defaultProps = DEFAULT_PROPS$D;
9217
+ Mosaic.defaultProps = DEFAULT_PROPS$F;
8991
9218
 
8992
9219
  const NavigationContext = /*#__PURE__*/createContext({
8993
9220
  orientation: Orientation$1.vertical
@@ -9176,7 +9403,7 @@ const {
9176
9403
  /**
9177
9404
  * Component default props
9178
9405
  */
9179
- const DEFAULT_PROPS$C = {
9406
+ const DEFAULT_PROPS$E = {
9180
9407
  orientation: Orientation$1.vertical
9181
9408
  };
9182
9409
  const Navigation = forwardRef((props, ref) => {
@@ -9185,7 +9412,7 @@ const Navigation = forwardRef((props, ref) => {
9185
9412
  children,
9186
9413
  className,
9187
9414
  theme = defaultTheme,
9188
- orientation = DEFAULT_PROPS$C.orientation,
9415
+ orientation = DEFAULT_PROPS$E.orientation,
9189
9416
  ...forwardedProps
9190
9417
  } = props;
9191
9418
  return /*#__PURE__*/jsx(ThemeProvider, {
@@ -9211,7 +9438,7 @@ const Navigation = forwardRef((props, ref) => {
9211
9438
  });
9212
9439
  Navigation.displayName = COMPONENT_NAME$C;
9213
9440
  Navigation.className = CLASSNAME$C;
9214
- Navigation.defaultProps = DEFAULT_PROPS$C;
9441
+ Navigation.defaultProps = DEFAULT_PROPS$E;
9215
9442
 
9216
9443
  // Sub components
9217
9444
  Navigation.Section = NavigationSection;
@@ -9256,7 +9483,7 @@ const {
9256
9483
  /**
9257
9484
  * Component default props.
9258
9485
  */
9259
- const DEFAULT_PROPS$B = {
9486
+ const DEFAULT_PROPS$D = {
9260
9487
  zIndex: 9999,
9261
9488
  usePortal: true
9262
9489
  };
@@ -9280,8 +9507,8 @@ const Notification = forwardRef((props, ref) => {
9280
9507
  onClick,
9281
9508
  theme = defaultTheme,
9282
9509
  type,
9283
- zIndex = DEFAULT_PROPS$B.zIndex,
9284
- usePortal = DEFAULT_PROPS$B.usePortal,
9510
+ zIndex = DEFAULT_PROPS$D.zIndex,
9511
+ usePortal = DEFAULT_PROPS$D.usePortal,
9285
9512
  style,
9286
9513
  ...forwardedProps
9287
9514
  } = props;
@@ -9346,7 +9573,7 @@ const Notification = forwardRef((props, ref) => {
9346
9573
  });
9347
9574
  Notification.displayName = COMPONENT_NAME$B;
9348
9575
  Notification.className = CLASSNAME$B;
9349
- Notification.defaultProps = DEFAULT_PROPS$B;
9576
+ Notification.defaultProps = DEFAULT_PROPS$D;
9350
9577
 
9351
9578
  /**
9352
9579
  * Component display name.
@@ -9361,7 +9588,7 @@ const CLASSNAME$A = 'lumx-popover-dialog';
9361
9588
  /**
9362
9589
  * Component default props.
9363
9590
  */
9364
- const DEFAULT_PROPS$A = {};
9591
+ const DEFAULT_PROPS$C = {};
9365
9592
 
9366
9593
  /**
9367
9594
  * PopoverDialog component.
@@ -9404,7 +9631,7 @@ const PopoverDialog = forwardRef((props, ref) => {
9404
9631
  });
9405
9632
  PopoverDialog.displayName = COMPONENT_NAME$A;
9406
9633
  PopoverDialog.className = CLASSNAME$A;
9407
- PopoverDialog.defaultProps = DEFAULT_PROPS$A;
9634
+ PopoverDialog.defaultProps = DEFAULT_PROPS$C;
9408
9635
 
9409
9636
  /**
9410
9637
  * Component display name.
@@ -9423,7 +9650,7 @@ const {
9423
9650
  /**
9424
9651
  * Component default props.
9425
9652
  */
9426
- const DEFAULT_PROPS$z = {
9653
+ const DEFAULT_PROPS$B = {
9427
9654
  orientation: Orientation$1.horizontal
9428
9655
  };
9429
9656
 
@@ -9443,7 +9670,7 @@ const PostBlock = forwardRef((props, ref) => {
9443
9670
  className,
9444
9671
  meta,
9445
9672
  onClick,
9446
- orientation = DEFAULT_PROPS$z.orientation,
9673
+ orientation = DEFAULT_PROPS$B.orientation,
9447
9674
  tags,
9448
9675
  text,
9449
9676
  theme = defaultTheme,
@@ -9505,7 +9732,7 @@ const PostBlock = forwardRef((props, ref) => {
9505
9732
  });
9506
9733
  PostBlock.displayName = COMPONENT_NAME$z;
9507
9734
  PostBlock.className = CLASSNAME$z;
9508
- PostBlock.defaultProps = DEFAULT_PROPS$z;
9735
+ PostBlock.defaultProps = DEFAULT_PROPS$B;
9509
9736
 
9510
9737
  /**
9511
9738
  * Component display name.
@@ -9524,7 +9751,7 @@ const {
9524
9751
  /**
9525
9752
  * Component default props.
9526
9753
  */
9527
- const DEFAULT_PROPS$y = {};
9754
+ const DEFAULT_PROPS$A = {};
9528
9755
 
9529
9756
  /**
9530
9757
  * ProgressLinear component.
@@ -9555,7 +9782,7 @@ const ProgressLinear = forwardRef((props, ref) => {
9555
9782
  });
9556
9783
  ProgressLinear.displayName = COMPONENT_NAME$y;
9557
9784
  ProgressLinear.className = CLASSNAME$y;
9558
- ProgressLinear.defaultProps = DEFAULT_PROPS$y;
9785
+ ProgressLinear.defaultProps = DEFAULT_PROPS$A;
9559
9786
 
9560
9787
  /**
9561
9788
  * Component display name.
@@ -9574,7 +9801,7 @@ const {
9574
9801
  /**
9575
9802
  * Component default props.
9576
9803
  */
9577
- const DEFAULT_PROPS$x = {
9804
+ const DEFAULT_PROPS$z = {
9578
9805
  size: Size$1.m,
9579
9806
  display: 'block'
9580
9807
  };
@@ -9591,8 +9818,8 @@ const ProgressCircular = forwardRef((props, ref) => {
9591
9818
  const {
9592
9819
  className,
9593
9820
  theme = defaultTheme,
9594
- size = DEFAULT_PROPS$x.size,
9595
- display = DEFAULT_PROPS$x.display,
9821
+ size = DEFAULT_PROPS$z.size,
9822
+ display = DEFAULT_PROPS$z.display,
9596
9823
  ...forwardedProps
9597
9824
  } = props;
9598
9825
  const Element = display === 'block' ? 'div' : 'span';
@@ -9624,7 +9851,7 @@ const ProgressCircular = forwardRef((props, ref) => {
9624
9851
  });
9625
9852
  ProgressCircular.displayName = COMPONENT_NAME$x;
9626
9853
  ProgressCircular.className = CLASSNAME$x;
9627
- ProgressCircular.defaultProps = DEFAULT_PROPS$x;
9854
+ ProgressCircular.defaultProps = DEFAULT_PROPS$z;
9628
9855
 
9629
9856
  const ProgressVariant = {
9630
9857
  linear: 'linear',
@@ -9651,7 +9878,7 @@ const {
9651
9878
  /**
9652
9879
  * Component default props.
9653
9880
  */
9654
- const DEFAULT_PROPS$w = {
9881
+ const DEFAULT_PROPS$y = {
9655
9882
  variant: ProgressVariant.circular
9656
9883
  };
9657
9884
 
@@ -9668,7 +9895,7 @@ const Progress = forwardRef((props, ref) => {
9668
9895
  const {
9669
9896
  className,
9670
9897
  theme = defaultTheme,
9671
- variant = DEFAULT_PROPS$w.variant,
9898
+ variant = DEFAULT_PROPS$y.variant,
9672
9899
  ...forwardedProps
9673
9900
  } = props;
9674
9901
  return /*#__PURE__*/jsxs("div", {
@@ -9687,7 +9914,7 @@ const Progress = forwardRef((props, ref) => {
9687
9914
  });
9688
9915
  Progress.displayName = COMPONENT_NAME$w;
9689
9916
  Progress.className = CLASSNAME$w;
9690
- Progress.defaultProps = DEFAULT_PROPS$w;
9917
+ Progress.defaultProps = DEFAULT_PROPS$y;
9691
9918
 
9692
9919
  const INIT_STATE = {
9693
9920
  isLazy: true,
@@ -9814,7 +10041,7 @@ const useTabProviderContextState = () => {
9814
10041
  return context?.[0];
9815
10042
  };
9816
10043
 
9817
- const DEFAULT_PROPS$v = {
10044
+ const DEFAULT_PROPS$x = {
9818
10045
  isLazy: INIT_STATE.isLazy,
9819
10046
  shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
9820
10047
  };
@@ -9843,7 +10070,7 @@ const ProgressTrackerProvider = props => {
9843
10070
  dispatch({
9844
10071
  type: 'update',
9845
10072
  payload: {
9846
- ...DEFAULT_PROPS$v,
10073
+ ...DEFAULT_PROPS$x,
9847
10074
  ...propState,
9848
10075
  activeTabIndex: propState.activeStepIndex || INIT_STATE.activeTabIndex
9849
10076
  }
@@ -9866,7 +10093,7 @@ const ProgressTrackerProvider = props => {
9866
10093
  children: children
9867
10094
  });
9868
10095
  };
9869
- ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$v;
10096
+ ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$x;
9870
10097
 
9871
10098
  const useRovingTabIndex = ({
9872
10099
  parentRef,
@@ -9958,7 +10185,7 @@ const {
9958
10185
  /**
9959
10186
  * Component default props.
9960
10187
  */
9961
- const DEFAULT_PROPS$u = {};
10188
+ const DEFAULT_PROPS$w = {};
9962
10189
 
9963
10190
  /**
9964
10191
  * ProgressTracker component.
@@ -10014,7 +10241,7 @@ const ProgressTracker = forwardRef((props, ref) => {
10014
10241
  });
10015
10242
  ProgressTracker.displayName = COMPONENT_NAME$v;
10016
10243
  ProgressTracker.className = CLASSNAME$v;
10017
- ProgressTracker.defaultProps = DEFAULT_PROPS$u;
10244
+ ProgressTracker.defaultProps = DEFAULT_PROPS$w;
10018
10245
 
10019
10246
  /**
10020
10247
  * Component display name.
@@ -10033,7 +10260,7 @@ const {
10033
10260
  /**
10034
10261
  * Component default props.
10035
10262
  */
10036
- const DEFAULT_PROPS$t = {};
10263
+ const DEFAULT_PROPS$v = {};
10037
10264
 
10038
10265
  /**
10039
10266
  * ProgressTrackerStep component.
@@ -10128,7 +10355,7 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
10128
10355
  });
10129
10356
  ProgressTrackerStep.displayName = COMPONENT_NAME$u;
10130
10357
  ProgressTrackerStep.className = CLASSNAME$u;
10131
- ProgressTrackerStep.defaultProps = DEFAULT_PROPS$t;
10358
+ ProgressTrackerStep.defaultProps = DEFAULT_PROPS$v;
10132
10359
 
10133
10360
  /**
10134
10361
  * Component display name.
@@ -10146,7 +10373,7 @@ const {
10146
10373
  /**
10147
10374
  * Component default props.
10148
10375
  */
10149
- const DEFAULT_PROPS$s = {};
10376
+ const DEFAULT_PROPS$u = {};
10150
10377
 
10151
10378
  /**
10152
10379
  * ProgressTrackerStepPanel component.
@@ -10182,7 +10409,7 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
10182
10409
  });
10183
10410
  ProgressTrackerStepPanel.displayName = COMPONENT_NAME$t;
10184
10411
  ProgressTrackerStepPanel.className = CLASSNAME$t;
10185
- ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$s;
10412
+ ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$u;
10186
10413
 
10187
10414
  /**
10188
10415
  * Component display name.
@@ -10196,27 +10423,15 @@ const CLASSNAME$s = 'lumx-radio-button';
10196
10423
  const {
10197
10424
  block: block$p,
10198
10425
  element: element$h
10199
- } = classNames.bem(CLASSNAME$s);
10200
-
10201
- /**
10202
- * Component default props.
10203
- */
10204
- const DEFAULT_PROPS$r = {};
10426
+ } = bem(CLASSNAME$s);
10205
10427
 
10206
10428
  /**
10207
10429
  * RadioButton component.
10208
10430
  *
10209
10431
  * @param props Component props.
10210
- * @param ref Component ref.
10211
- * @return React element.
10432
+ * @return JSX element.
10212
10433
  */
10213
- const RadioButton = forwardRef((props, ref) => {
10214
- const {
10215
- isAnyDisabled,
10216
- disabledStateProps,
10217
- otherProps
10218
- } = useDisableStateProps(props);
10219
- const defaultTheme = useTheme() || Theme$1.light;
10434
+ const RadioButton$1 = props => {
10220
10435
  const {
10221
10436
  checked,
10222
10437
  className,
@@ -10226,14 +10441,15 @@ const RadioButton = forwardRef((props, ref) => {
10226
10441
  isChecked = checked,
10227
10442
  label,
10228
10443
  name,
10444
+ ref,
10229
10445
  onChange,
10230
- theme = defaultTheme,
10446
+ theme,
10231
10447
  value,
10232
- inputProps,
10448
+ inputProps = {},
10449
+ isDisabled,
10450
+ inputId,
10233
10451
  ...forwardedProps
10234
- } = otherProps;
10235
- const generatedInputId = useId();
10236
- const inputId = id || generatedInputId;
10452
+ } = props;
10237
10453
  const handleChange = event => {
10238
10454
  if (onChange) {
10239
10455
  onChange(value, name, event);
@@ -10242,9 +10458,9 @@ const RadioButton = forwardRef((props, ref) => {
10242
10458
  return /*#__PURE__*/jsxs("div", {
10243
10459
  ref: ref,
10244
10460
  ...forwardedProps,
10245
- className: classNames.join(className, block$p({
10461
+ className: classnames(className, block$p({
10246
10462
  'is-checked': isChecked,
10247
- 'is-disabled': isAnyDisabled,
10463
+ 'is-disabled': isDisabled,
10248
10464
  'is-unchecked': !isChecked,
10249
10465
  [`theme-${theme}`]: Boolean(theme)
10250
10466
  })),
@@ -10253,15 +10469,16 @@ const RadioButton = forwardRef((props, ref) => {
10253
10469
  children: [/*#__PURE__*/jsx("input", {
10254
10470
  ref: inputRef,
10255
10471
  className: element$h('input-native'),
10256
- ...disabledStateProps,
10257
10472
  id: inputId,
10258
10473
  type: "radio",
10259
10474
  name: name,
10260
10475
  value: value,
10261
10476
  checked: isChecked,
10262
10477
  onChange: handleChange,
10263
- readOnly: inputProps?.readOnly || isAnyDisabled,
10264
10478
  "aria-describedby": helper ? `${inputId}-helper` : undefined,
10479
+ ...(inputProps?.readOnly ? {
10480
+ readOnly: inputProps.readOnly
10481
+ } : {}),
10265
10482
  ...inputProps
10266
10483
  }), /*#__PURE__*/jsxs("div", {
10267
10484
  className: element$h('input-placeholder'),
@@ -10273,23 +10490,85 @@ const RadioButton = forwardRef((props, ref) => {
10273
10490
  })]
10274
10491
  }), /*#__PURE__*/jsxs("div", {
10275
10492
  className: element$h('content'),
10276
- children: [label && /*#__PURE__*/jsx(InputLabel, {
10493
+ children: [label && InputLabel$1({
10277
10494
  htmlFor: inputId,
10278
- theme: theme,
10279
10495
  className: element$h('label'),
10496
+ theme,
10280
10497
  children: label
10281
- }), helper && /*#__PURE__*/jsx(InputHelper, {
10498
+ }), helper && InputHelper$1({
10282
10499
  id: `${inputId}-helper`,
10283
- theme: theme,
10284
10500
  className: element$h('helper'),
10501
+ theme,
10285
10502
  children: helper
10286
10503
  })]
10287
10504
  })]
10288
10505
  });
10506
+ };
10507
+
10508
+ /**
10509
+ * Defines the props of the component.
10510
+ */
10511
+
10512
+ /**
10513
+ * Component default props.
10514
+ */
10515
+ const DEFAULT_PROPS$t = {};
10516
+
10517
+ /**
10518
+ * RadioButton component.
10519
+ *
10520
+ * @param props Component props.
10521
+ * @param ref Component ref.
10522
+ * @return React element.
10523
+ */
10524
+ const RadioButton = forwardRef((props, ref) => {
10525
+ const {
10526
+ isAnyDisabled,
10527
+ disabledStateProps,
10528
+ otherProps
10529
+ } = useDisableStateProps(props);
10530
+ const defaultTheme = useTheme() || Theme$1.light;
10531
+ const {
10532
+ checked,
10533
+ className,
10534
+ helper,
10535
+ id,
10536
+ inputRef,
10537
+ isChecked = checked,
10538
+ label,
10539
+ name,
10540
+ onChange,
10541
+ theme = defaultTheme,
10542
+ value,
10543
+ inputProps = {},
10544
+ ...forwardedProps
10545
+ } = otherProps;
10546
+ const generatedInputId = useId();
10547
+ const inputId = id || generatedInputId;
10548
+ return RadioButton$1({
10549
+ ref,
10550
+ className,
10551
+ helper,
10552
+ inputRef,
10553
+ isChecked,
10554
+ label,
10555
+ name,
10556
+ onChange,
10557
+ theme,
10558
+ value,
10559
+ inputProps: {
10560
+ ...inputProps,
10561
+ ...disabledStateProps,
10562
+ readOnly: inputProps.readOnly || disabledStateProps['aria-disabled']
10563
+ },
10564
+ ...forwardedProps,
10565
+ isDisabled: isAnyDisabled,
10566
+ inputId
10567
+ });
10289
10568
  });
10290
10569
  RadioButton.displayName = COMPONENT_NAME$s;
10291
10570
  RadioButton.className = CLASSNAME$s;
10292
- RadioButton.defaultProps = DEFAULT_PROPS$r;
10571
+ RadioButton.defaultProps = DEFAULT_PROPS$t;
10293
10572
 
10294
10573
  /**
10295
10574
  * Component display name.
@@ -10301,25 +10580,58 @@ const COMPONENT_NAME$r = 'RadioGroup';
10301
10580
  */
10302
10581
  const CLASSNAME$r = 'lumx-radio-group';
10303
10582
 
10583
+ /**
10584
+ * Component default props.
10585
+ */
10586
+ const DEFAULT_PROPS$s = {};
10587
+
10304
10588
  /**
10305
10589
  * RadioGroup component.
10306
10590
  *
10307
10591
  * @param props Component props.
10308
- * @param ref Component ref.
10309
- * @return React element.
10592
+ * @return JSX element.
10310
10593
  */
10311
- const RadioGroup = forwardRef((props, ref) => {
10594
+ const RadioGroup$1 = props => {
10312
10595
  const {
10313
10596
  children,
10314
10597
  className,
10598
+ ref,
10315
10599
  ...forwardedProps
10316
10600
  } = props;
10317
10601
  return /*#__PURE__*/jsx("div", {
10318
10602
  ref: ref,
10319
10603
  ...forwardedProps,
10320
- className: classNames.join(className, CLASSNAME$r),
10604
+ className: classnames(className, CLASSNAME$r),
10321
10605
  children: children
10322
10606
  });
10607
+ };
10608
+ RadioGroup$1.displayName = COMPONENT_NAME$r;
10609
+ RadioGroup$1.className = CLASSNAME$r;
10610
+ RadioGroup$1.defaultProps = DEFAULT_PROPS$s;
10611
+
10612
+ /**
10613
+ * Defines the props of the component.
10614
+ */
10615
+
10616
+ /**
10617
+ * RadioGroup component.
10618
+ *
10619
+ * @param props Component props.
10620
+ * @param ref Component ref.
10621
+ * @return React element.
10622
+ */
10623
+ const RadioGroup = forwardRef((props, ref) => {
10624
+ const {
10625
+ children,
10626
+ className,
10627
+ ...forwardedProps
10628
+ } = props;
10629
+ return RadioGroup$1({
10630
+ ref,
10631
+ className,
10632
+ children,
10633
+ ...forwardedProps
10634
+ });
10323
10635
  });
10324
10636
  RadioGroup.displayName = COMPONENT_NAME$r;
10325
10637
  RadioGroup.className = CLASSNAME$r;
@@ -10479,7 +10791,7 @@ const {
10479
10791
  } = classNames.bem(CLASSNAME$p);
10480
10792
 
10481
10793
  /** The default value of props. */
10482
- const DEFAULT_PROPS$q = {
10794
+ const DEFAULT_PROPS$r = {
10483
10795
  selectedValueRender: choice => choice,
10484
10796
  variant: SelectVariant.input
10485
10797
  };
@@ -10602,7 +10914,7 @@ const Select = forwardRef((props, ref) => {
10602
10914
  const isEmpty$1 = isEmpty(props.value);
10603
10915
  const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty$1;
10604
10916
  return WithSelectContext(SelectField, {
10605
- ...DEFAULT_PROPS$q,
10917
+ ...DEFAULT_PROPS$r,
10606
10918
  ...props,
10607
10919
  className: classNames.join(props.className, block$n({
10608
10920
  'has-input-clear': hasInputClear,
@@ -10614,7 +10926,7 @@ const Select = forwardRef((props, ref) => {
10614
10926
  });
10615
10927
  Select.displayName = COMPONENT_NAME$q;
10616
10928
  Select.className = CLASSNAME$p;
10617
- Select.defaultProps = DEFAULT_PROPS$q;
10929
+ Select.defaultProps = DEFAULT_PROPS$r;
10618
10930
  Select.className = CLASSNAME$p;
10619
10931
 
10620
10932
  /** The display name of the component. */
@@ -10628,7 +10940,7 @@ const {
10628
10940
  } = classNames.bem(CLASSNAME$o);
10629
10941
 
10630
10942
  /** The default value of props. */
10631
- const DEFAULT_PROPS$p = {
10943
+ const DEFAULT_PROPS$q = {
10632
10944
  selectedChipRender(choice, index, onClear, isDisabled, theme) {
10633
10945
  const onClick = event => onClear && onClear(event, choice);
10634
10946
  return /*#__PURE__*/jsx(Chip, {
@@ -10754,7 +11066,7 @@ const SelectMultipleField = props => {
10754
11066
  */
10755
11067
  const SelectMultiple = forwardRef((props, ref) => {
10756
11068
  return WithSelectContext(SelectMultipleField, {
10757
- ...DEFAULT_PROPS$p,
11069
+ ...DEFAULT_PROPS$q,
10758
11070
  ...props,
10759
11071
  className: classNames.join(props.className, block$m({
10760
11072
  'has-multiple': !props.isEmpty
@@ -10765,7 +11077,7 @@ const SelectMultiple = forwardRef((props, ref) => {
10765
11077
  });
10766
11078
  SelectMultiple.displayName = COMPONENT_NAME$p;
10767
11079
  SelectMultiple.className = CLASSNAME$o;
10768
- SelectMultiple.defaultProps = DEFAULT_PROPS$p;
11080
+ SelectMultiple.defaultProps = DEFAULT_PROPS$q;
10769
11081
 
10770
11082
  /**
10771
11083
  * Component display name.
@@ -10820,7 +11132,7 @@ const {
10820
11132
  /**
10821
11133
  * Component default props.
10822
11134
  */
10823
- const DEFAULT_PROPS$o = {
11135
+ const DEFAULT_PROPS$p = {
10824
11136
  emphasis: Emphasis$1.high,
10825
11137
  closeMode: 'unmount'
10826
11138
  };
@@ -10836,7 +11148,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
10836
11148
  const {
10837
11149
  children,
10838
11150
  className,
10839
- emphasis = DEFAULT_PROPS$o.emphasis,
11151
+ emphasis = DEFAULT_PROPS$p.emphasis,
10840
11152
  icon,
10841
11153
  isOpen,
10842
11154
  isSelected,
@@ -10846,7 +11158,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
10846
11158
  onActionClick,
10847
11159
  onClick,
10848
11160
  toggleButtonProps,
10849
- closeMode = DEFAULT_PROPS$o.closeMode,
11161
+ closeMode = DEFAULT_PROPS$p.closeMode,
10850
11162
  ...forwardedProps
10851
11163
  } = props;
10852
11164
  const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
@@ -10917,9 +11229,9 @@ const SideNavigationItem = forwardRef((props, ref) => {
10917
11229
  });
10918
11230
  SideNavigationItem.displayName = COMPONENT_NAME$n;
10919
11231
  SideNavigationItem.className = CLASSNAME$m;
10920
- SideNavigationItem.defaultProps = DEFAULT_PROPS$o;
11232
+ SideNavigationItem.defaultProps = DEFAULT_PROPS$p;
10921
11233
 
10922
- const DEFAULT_PROPS$n = {};
11234
+ const DEFAULT_PROPS$o = {};
10923
11235
 
10924
11236
  /**
10925
11237
  * Component display name.
@@ -10961,7 +11273,7 @@ const SkeletonCircle = forwardRef((props, ref) => {
10961
11273
  });
10962
11274
  });
10963
11275
  SkeletonCircle.displayName = COMPONENT_NAME$m;
10964
- SkeletonCircle.defaultProps = DEFAULT_PROPS$n;
11276
+ SkeletonCircle.defaultProps = DEFAULT_PROPS$o;
10965
11277
  SkeletonCircle.className = CLASSNAME$l;
10966
11278
 
10967
11279
  const SkeletonRectangleVariant = {
@@ -10974,7 +11286,7 @@ const SkeletonRectangleVariant = {
10974
11286
  * Defines the props of the component.
10975
11287
  */
10976
11288
 
10977
- const DEFAULT_PROPS$m = {
11289
+ const DEFAULT_PROPS$n = {
10978
11290
  variant: SkeletonRectangleVariant.squared
10979
11291
  };
10980
11292
 
@@ -11006,7 +11318,7 @@ const SkeletonRectangle = forwardRef((props, ref) => {
11006
11318
  className,
11007
11319
  height,
11008
11320
  theme = defaultTheme,
11009
- variant = DEFAULT_PROPS$m.variant,
11321
+ variant = DEFAULT_PROPS$n.variant,
11010
11322
  width,
11011
11323
  color,
11012
11324
  ...forwardedProps
@@ -11029,9 +11341,9 @@ const SkeletonRectangle = forwardRef((props, ref) => {
11029
11341
  });
11030
11342
  SkeletonRectangle.displayName = COMPONENT_NAME$l;
11031
11343
  SkeletonRectangle.className = CLASSNAME$k;
11032
- SkeletonRectangle.defaultProps = DEFAULT_PROPS$m;
11344
+ SkeletonRectangle.defaultProps = DEFAULT_PROPS$n;
11033
11345
 
11034
- const DEFAULT_PROPS$l = {};
11346
+ const DEFAULT_PROPS$m = {};
11035
11347
 
11036
11348
  /**
11037
11349
  * Component display name.
@@ -11082,7 +11394,7 @@ const SkeletonTypography = forwardRef((props, ref) => {
11082
11394
  });
11083
11395
  });
11084
11396
  SkeletonTypography.displayName = COMPONENT_NAME$k;
11085
- SkeletonTypography.defaultProps = DEFAULT_PROPS$l;
11397
+ SkeletonTypography.defaultProps = DEFAULT_PROPS$m;
11086
11398
  SkeletonTypography.className = CLASSNAME$j;
11087
11399
 
11088
11400
  const useEnhancedEffect = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
@@ -11137,7 +11449,7 @@ const {
11137
11449
  /**
11138
11450
  * Component default props.
11139
11451
  */
11140
- const DEFAULT_PROPS$k = {
11452
+ const DEFAULT_PROPS$l = {
11141
11453
  precision: 0,
11142
11454
  steps: 0
11143
11455
  };
@@ -11188,8 +11500,8 @@ const Slider = forwardRef((props, ref) => {
11188
11500
  name,
11189
11501
  onChange,
11190
11502
  onMouseDown,
11191
- precision = DEFAULT_PROPS$k.precision,
11192
- steps = DEFAULT_PROPS$k.steps,
11503
+ precision = DEFAULT_PROPS$l.precision,
11504
+ steps = DEFAULT_PROPS$l.steps,
11193
11505
  theme = defaultTheme,
11194
11506
  value,
11195
11507
  ...forwardedProps
@@ -11392,7 +11704,7 @@ const Slider = forwardRef((props, ref) => {
11392
11704
  });
11393
11705
  Slider.displayName = COMPONENT_NAME$j;
11394
11706
  Slider.className = CLASSNAME$i;
11395
- Slider.defaultProps = DEFAULT_PROPS$k;
11707
+ Slider.defaultProps = DEFAULT_PROPS$l;
11396
11708
 
11397
11709
  /**
11398
11710
  * Making setInterval Declarative with React Hooks.
@@ -11770,7 +12082,7 @@ SlideshowItemGroup.className = CLASSNAME$h;
11770
12082
  /**
11771
12083
  * Component default props.
11772
12084
  */
11773
- const DEFAULT_PROPS$j = {
12085
+ const DEFAULT_PROPS$k = {
11774
12086
  ...DEFAULT_OPTIONS,
11775
12087
  slideMode: SlideMode.transformTranslate
11776
12088
  };
@@ -11786,19 +12098,19 @@ const Slideshow = forwardRef((props, ref) => {
11786
12098
  const defaultTheme = useTheme() || Theme$1.light;
11787
12099
  const {
11788
12100
  activeIndex,
11789
- autoPlay = DEFAULT_PROPS$j.autoPlay,
12101
+ autoPlay = DEFAULT_PROPS$k.autoPlay,
11790
12102
  children,
11791
12103
  className,
11792
12104
  fillHeight,
11793
12105
  groupBy = DEFAULT_OPTIONS.groupBy,
11794
- interval = DEFAULT_PROPS$j.interval,
12106
+ interval = DEFAULT_PROPS$k.interval,
11795
12107
  onChange,
11796
12108
  slideshowControlsProps,
11797
12109
  theme = defaultTheme,
11798
12110
  id,
11799
12111
  slidesId,
11800
12112
  slideGroupLabel,
11801
- slideMode = DEFAULT_PROPS$j.slideMode,
12113
+ slideMode = DEFAULT_PROPS$k.slideMode,
11802
12114
  ...forwardedProps
11803
12115
  } = props;
11804
12116
  // Number of slideshow items.
@@ -11820,7 +12132,7 @@ const Slideshow = forwardRef((props, ref) => {
11820
12132
  toggleForcePause
11821
12133
  } = SlideshowControls.useSlideshowControls({
11822
12134
  activeIndex,
11823
- defaultActiveIndex: DEFAULT_PROPS$j.activeIndex,
12135
+ defaultActiveIndex: DEFAULT_PROPS$k.activeIndex,
11824
12136
  autoPlay: Boolean(autoPlay),
11825
12137
  itemsCount,
11826
12138
  groupBy,
@@ -11890,7 +12202,7 @@ const Slideshow = forwardRef((props, ref) => {
11890
12202
  });
11891
12203
  });
11892
12204
  Slideshow.displayName = 'Slideshow';
11893
- Slideshow.defaultProps = DEFAULT_PROPS$j;
12205
+ Slideshow.defaultProps = DEFAULT_PROPS$k;
11894
12206
 
11895
12207
  /**
11896
12208
  * Component display name.
@@ -11999,7 +12311,7 @@ const {
11999
12311
  /**
12000
12312
  * Component default props.
12001
12313
  */
12002
- const DEFAULT_PROPS$i = {
12314
+ const DEFAULT_PROPS$j = {
12003
12315
  activeIndex: 0
12004
12316
  };
12005
12317
 
@@ -12013,7 +12325,7 @@ const DEFAULT_PROPS$i = {
12013
12325
  const InternalSlideshowControls = forwardRef((props, ref) => {
12014
12326
  const defaultTheme = useTheme() || Theme$1.light;
12015
12327
  const {
12016
- activeIndex = DEFAULT_PROPS$i.activeIndex,
12328
+ activeIndex = DEFAULT_PROPS$j.activeIndex,
12017
12329
  className,
12018
12330
  nextButtonProps,
12019
12331
  onNextClick,
@@ -12128,7 +12440,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
12128
12440
  });
12129
12441
  InternalSlideshowControls.displayName = COMPONENT_NAME$g;
12130
12442
  InternalSlideshowControls.className = CLASSNAME$f;
12131
- InternalSlideshowControls.defaultProps = DEFAULT_PROPS$i;
12443
+ InternalSlideshowControls.defaultProps = DEFAULT_PROPS$j;
12132
12444
  const SlideshowControls = Object.assign(InternalSlideshowControls, {
12133
12445
  useSlideshowControls,
12134
12446
  useSlideshowControlsDefaultOptions: DEFAULT_OPTIONS
@@ -12260,7 +12572,7 @@ const {
12260
12572
  /**
12261
12573
  * Component default props.
12262
12574
  */
12263
- const DEFAULT_PROPS$h = {
12575
+ const DEFAULT_PROPS$i = {
12264
12576
  slideMode: SlideMode.transformTranslate
12265
12577
  };
12266
12578
 
@@ -12287,7 +12599,7 @@ const Slides = forwardRef((props, ref) => {
12287
12599
  afterSlides,
12288
12600
  hasControls,
12289
12601
  slideGroupLabel,
12290
- slideMode = DEFAULT_PROPS$h.slideMode,
12602
+ slideMode = DEFAULT_PROPS$i.slideMode,
12291
12603
  onChange,
12292
12604
  ...forwardedProps
12293
12605
  } = props;
@@ -12369,46 +12681,41 @@ const CLASSNAME$d = 'lumx-switch';
12369
12681
  const {
12370
12682
  block: block$e,
12371
12683
  element: element$7
12372
- } = classNames.bem(CLASSNAME$d);
12684
+ } = bem(CLASSNAME$d);
12373
12685
 
12374
12686
  /**
12375
12687
  * Component default props.
12376
12688
  */
12377
- const DEFAULT_PROPS$g = {
12378
- position: Alignment.left
12689
+ const DEFAULT_PROPS$h = {
12690
+ position: 'left'
12379
12691
  };
12380
12692
 
12381
12693
  /**
12382
12694
  * Switch component.
12383
12695
  *
12384
12696
  * @param props Component props.
12385
- * @param ref Component ref.
12386
- * @return React element.
12697
+ * @return JSX element.
12387
12698
  */
12388
- const Switch = forwardRef((props, ref) => {
12389
- const {
12390
- isAnyDisabled,
12391
- disabledStateProps,
12392
- otherProps
12393
- } = useDisableStateProps(props);
12394
- const defaultTheme = useTheme() || Theme$1.light;
12699
+ const Switch$1 = props => {
12395
12700
  const {
12396
12701
  checked,
12397
- children,
12398
12702
  className,
12399
12703
  helper,
12400
12704
  id,
12705
+ inputRef,
12401
12706
  isChecked = checked,
12707
+ label,
12402
12708
  name,
12709
+ ref,
12403
12710
  onChange,
12404
- position = DEFAULT_PROPS$g.position,
12405
- theme = defaultTheme,
12711
+ theme,
12406
12712
  value,
12407
12713
  inputProps = {},
12714
+ isDisabled,
12715
+ inputId,
12716
+ position = DEFAULT_PROPS$h.position,
12408
12717
  ...forwardedProps
12409
- } = otherProps;
12410
- const generatedInputId = useId();
12411
- const inputId = id || generatedInputId;
12718
+ } = props;
12412
12719
  const handleChange = event => {
12413
12720
  if (onChange) {
12414
12721
  onChange(!isChecked, value, name, event);
@@ -12417,28 +12724,30 @@ const Switch = forwardRef((props, ref) => {
12417
12724
  return /*#__PURE__*/jsxs("div", {
12418
12725
  ref: ref,
12419
12726
  ...forwardedProps,
12420
- className: classNames.join(className, block$e({
12727
+ className: classnames(className, block$e({
12421
12728
  'is-checked': isChecked,
12422
- 'is-disabled': isAnyDisabled,
12729
+ 'is-disabled': isDisabled,
12730
+ 'is-unchecked': !isChecked,
12423
12731
  [`position-${position}`]: Boolean(position),
12424
- [`theme-${theme}`]: Boolean(theme),
12425
- 'is-unchecked': !isChecked
12732
+ [`theme-${theme}`]: Boolean(theme)
12426
12733
  })),
12427
12734
  children: [/*#__PURE__*/jsxs("div", {
12428
12735
  className: element$7('input-wrapper'),
12429
12736
  children: [/*#__PURE__*/jsx("input", {
12737
+ ref: inputRef,
12430
12738
  type: "checkbox",
12431
12739
  role: "switch",
12432
12740
  id: inputId,
12433
12741
  className: element$7('input-native'),
12434
12742
  name: name,
12435
12743
  value: value,
12436
- ...disabledStateProps,
12437
- readOnly: inputProps.readOnly || isAnyDisabled,
12438
- checked: isChecked,
12439
- "aria-checked": Boolean(isChecked),
12744
+ checked: Boolean(isChecked),
12440
12745
  onChange: handleChange,
12441
12746
  "aria-describedby": helper ? `${inputId}-helper` : undefined,
12747
+ "aria-checked": Boolean(isChecked),
12748
+ ...(inputProps?.readOnly ? {
12749
+ readOnly: inputProps.readOnly
12750
+ } : {}),
12442
12751
  ...inputProps
12443
12752
  }), /*#__PURE__*/jsxs("div", {
12444
12753
  className: element$7('input-placeholder'),
@@ -12448,21 +12757,88 @@ const Switch = forwardRef((props, ref) => {
12448
12757
  className: element$7('input-indicator')
12449
12758
  })]
12450
12759
  })]
12451
- }), Children.count(children) > 0 && /*#__PURE__*/jsxs("div", {
12760
+ }), /*#__PURE__*/jsxs("div", {
12452
12761
  className: element$7('content'),
12453
- children: [/*#__PURE__*/jsx(InputLabel, {
12762
+ children: [label && InputLabel$1({
12454
12763
  htmlFor: inputId,
12455
- theme: theme,
12456
12764
  className: element$7('label'),
12457
- children: children
12458
- }), !isEmpty(helper) && /*#__PURE__*/jsx(InputHelper, {
12765
+ theme,
12766
+ children: label
12767
+ }), helper && InputHelper$1({
12459
12768
  id: `${inputId}-helper`,
12460
- theme: theme,
12461
12769
  className: element$7('helper'),
12770
+ theme,
12462
12771
  children: helper
12463
12772
  })]
12464
12773
  })]
12465
12774
  });
12775
+ };
12776
+
12777
+ /**
12778
+ * Defines the props of the component.
12779
+ */
12780
+
12781
+ /**
12782
+ * Component default props.
12783
+ */
12784
+ const DEFAULT_PROPS$g = {
12785
+ position: Alignment.left
12786
+ };
12787
+
12788
+ /**
12789
+ * Switch component.
12790
+ *
12791
+ * @param props Component props.
12792
+ * @param ref Component ref.
12793
+ * @return React element.
12794
+ */
12795
+ const Switch = forwardRef((props, ref) => {
12796
+ const {
12797
+ isAnyDisabled,
12798
+ disabledStateProps,
12799
+ otherProps
12800
+ } = useDisableStateProps(props);
12801
+ const defaultTheme = useTheme() || Theme$1.light;
12802
+ const {
12803
+ checked,
12804
+ children,
12805
+ className,
12806
+ helper,
12807
+ id,
12808
+ inputRef,
12809
+ isChecked = checked,
12810
+ name,
12811
+ onChange,
12812
+ position = DEFAULT_PROPS$g.position,
12813
+ theme = defaultTheme,
12814
+ value,
12815
+ inputProps = {},
12816
+ ...forwardedProps
12817
+ } = otherProps;
12818
+ const localInputRef = React__default.useRef(null);
12819
+ const generatedInputId = useId();
12820
+ const inputId = id || generatedInputId;
12821
+ return Switch$1({
12822
+ ref,
12823
+ className,
12824
+ helper,
12825
+ inputRef: useMergeRefs(inputRef, localInputRef),
12826
+ isChecked,
12827
+ label: children,
12828
+ name,
12829
+ onChange,
12830
+ position,
12831
+ theme,
12832
+ value,
12833
+ inputProps: {
12834
+ ...inputProps,
12835
+ ...disabledStateProps,
12836
+ readOnly: inputProps.readOnly || isAnyDisabled
12837
+ },
12838
+ ...forwardedProps,
12839
+ isDisabled: isAnyDisabled,
12840
+ inputId
12841
+ });
12466
12842
  });
12467
12843
  Switch.displayName = COMPONENT_NAME$e;
12468
12844
  Switch.className = CLASSNAME$d;
@@ -14417,5 +14793,5 @@ UserBlock.displayName = COMPONENT_NAME;
14417
14793
  UserBlock.className = CLASSNAME;
14418
14794
  UserBlock.defaultProps = DEFAULT_PROPS;
14419
14795
 
14420
- export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1c as CLASSNAME, COMPONENT_NAME$1e as COMPONENT_NAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$11 as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectVariant, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
14796
+ export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1d as CLASSNAME, COMPONENT_NAME$1e as COMPONENT_NAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$13 as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
14421
14797
  //# sourceMappingURL=index.js.map