@lumx/react 4.3.2-alpha.2 → 4.3.2-alpha.21

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 (12) hide show
  1. package/CONTRIBUTING.md +0 -12
  2. package/_internal/CzTdCnO5.js +1375 -0
  3. package/_internal/CzTdCnO5.js.map +1 -0
  4. package/index.d.ts +651 -79
  5. package/index.js +1711 -727
  6. package/index.js.map +1 -1
  7. package/package.json +18 -3
  8. package/utils/index.d.ts +1 -2
  9. package/utils/index.js +5 -1219
  10. package/utils/index.js.map +1 -1
  11. package/_internal/DpdvhbTO.js +0 -159
  12. package/_internal/DpdvhbTO.js.map +0 -1
package/index.js CHANGED
@@ -1,56 +1,58 @@
1
- import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, Theme as Theme$1, AspectRatio, ColorVariant, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, Alignment, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
1
+ import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, Theme as Theme$1, AspectRatio as AspectRatio$1, ColorVariant, REAL_SIZE_FOR_LUMX_SIZE, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, Alignment, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
2
2
  export * from '@lumx/core/js/constants';
3
3
  export * from '@lumx/core/js/types';
4
4
  import * as React from 'react';
5
- import React__default, { useState, useEffect, useMemo, useRef, useCallback, Children, useLayoutEffect, cloneElement, createContext, isValidElement, useContext, useReducer } from 'react';
6
- import { mdiAlert } from '@lumx/icons/esm/alert';
7
- import { mdiAlertCircle } from '@lumx/icons/esm/alert-circle';
8
- import { mdiCheckCircle } from '@lumx/icons/esm/check-circle';
9
- import { mdiInformation } from '@lumx/icons/esm/information';
5
+ import React__default, { useState, useEffect, useMemo, useRef, useCallback, useContext, createContext, Children, useLayoutEffect, cloneElement, isValidElement, useReducer } from 'react';
6
+ import { mdiAlert } from '@lumx/icons/esm/alert.js';
7
+ import { mdiAlertCircle } from '@lumx/icons/esm/alert-circle.js';
8
+ import { mdiCheckCircle } from '@lumx/icons/esm/check-circle.js';
9
+ import { mdiInformation } from '@lumx/icons/esm/information.js';
10
10
  import { classNames, onEnterPressed, onEscapePressed, onButtonPressed, detectHorizontalSwipe } from '@lumx/core/js/utils';
11
11
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
12
- import last from 'lodash/last';
13
- import pull from 'lodash/pull';
14
- import get from 'lodash/get';
15
- import concat from 'lodash/concat';
16
- import dropRight from 'lodash/dropRight';
17
- import partition from 'lodash/partition';
18
- import reduce from 'lodash/reduce';
19
- import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider } from './_internal/DpdvhbTO.js';
20
- import isEmpty from 'lodash/isEmpty';
12
+ import last from 'lodash/last.js';
13
+ import pull from 'lodash/pull.js';
14
+ import get from 'lodash/get.js';
15
+ import concat from 'lodash/concat.js';
16
+ import dropRight from 'lodash/dropRight.js';
17
+ import partition from 'lodash/partition.js';
18
+ import reduce from 'lodash/reduce.js';
19
+ import { u as useDisabledStateContext, M as MovingFocusContext, a as useVirtualFocus, A as A11YLiveMessage, P as Portal, C as ClickAwayProvider } from './_internal/CzTdCnO5.js';
20
+ import isEmpty from 'lodash/isEmpty.js';
21
21
  import { getDisabledState } from '@lumx/core/js/utils/disabledState';
22
- import { mdiCloseCircle } from '@lumx/icons/esm/close-circle';
23
- import memoize from 'lodash/memoize';
24
- import { mdiClose } from '@lumx/icons/esm/close';
25
- import isFunction from 'lodash/isFunction';
26
- import { mdiImageBroken } from '@lumx/icons/esm/image-broken';
27
- import { mdiCheck } from '@lumx/icons/esm/check';
28
- import { mdiMinus } from '@lumx/icons/esm/minus';
29
- import { mdiChevronLeft } from '@lumx/icons/esm/chevron-left';
30
- import { mdiChevronRight } from '@lumx/icons/esm/chevron-right';
31
- import castArray from 'lodash/castArray';
32
- import { mdiDragVertical } from '@lumx/icons/esm/drag-vertical';
33
- import { mdiChevronDown } from '@lumx/icons/esm/chevron-down';
34
- import { mdiChevronUp } from '@lumx/icons/esm/chevron-up';
35
- import noop from 'lodash/noop';
36
- import pick from 'lodash/pick';
37
- import isInteger from 'lodash/isInteger';
38
- import { mdiMagnifyMinusOutline } from '@lumx/icons/esm/magnify-minus-outline';
39
- import { mdiMagnifyPlusOutline } from '@lumx/icons/esm/magnify-plus-outline';
40
- import throttle from 'lodash/throttle';
41
- import range from 'lodash/range';
42
- import { mdiPlayCircleOutline } from '@lumx/icons/esm/play-circle-outline';
43
- import { mdiPauseCircleOutline } from '@lumx/icons/esm/pause-circle-outline';
44
- import chunk from 'lodash/chunk';
22
+ import { mdiCloseCircle } from '@lumx/icons/esm/close-circle.js';
23
+ import memoize from 'lodash/memoize.js';
24
+ import { mdiClose } from '@lumx/icons/esm/close.js';
25
+ import isFunction from 'lodash/isFunction.js';
26
+ import { mdiImageBroken } from '@lumx/icons/esm/image-broken.js';
27
+ import noop from 'lodash/noop.js';
28
+ import uniqueId from 'lodash/uniqueId.js';
29
+ import castArray from 'lodash/castArray.js';
30
+ import { mdiCheck } from '@lumx/icons/esm/check.js';
31
+ import { mdiMinus } from '@lumx/icons/esm/minus.js';
32
+ import { mdiInformationOutline } from '@lumx/icons/esm/information-outline.js';
33
+ import { mdiChevronLeft } from '@lumx/icons/esm/chevron-left.js';
34
+ import { mdiChevronRight } from '@lumx/icons/esm/chevron-right.js';
35
+ import { mdiDragVertical } from '@lumx/icons/esm/drag-vertical.js';
36
+ import { mdiChevronDown } from '@lumx/icons/esm/chevron-down.js';
37
+ import { mdiChevronUp } from '@lumx/icons/esm/chevron-up.js';
38
+ import pick from 'lodash/pick.js';
39
+ import isInteger from 'lodash/isInteger.js';
40
+ import { mdiMagnifyMinusOutline } from '@lumx/icons/esm/magnify-minus-outline.js';
41
+ import { mdiMagnifyPlusOutline } from '@lumx/icons/esm/magnify-plus-outline.js';
42
+ import throttle from 'lodash/throttle.js';
43
+ import range from 'lodash/range.js';
44
+ import { mdiPlayCircleOutline } from '@lumx/icons/esm/play-circle-outline.js';
45
+ import { mdiPauseCircleOutline } from '@lumx/icons/esm/pause-circle-outline.js';
46
+ import chunk from 'lodash/chunk.js';
45
47
  import ReactDOM from 'react-dom';
46
- import take from 'lodash/take';
47
- import { mdiRadioboxBlank } from '@lumx/icons/esm/radiobox-blank';
48
- import { mdiRadioboxMarked } from '@lumx/icons/esm/radiobox-marked';
49
- import { mdiMenuDown } from '@lumx/icons/esm/menu-down';
50
- import { getWithSelector } from '@lumx/core/js/utils/selectors/getWithSelector';
51
- import { mdiArrowDown } from '@lumx/icons/esm/arrow-down';
52
- import { mdiArrowUp } from '@lumx/icons/esm/arrow-up';
53
- import set from 'lodash/set';
48
+ import take from 'lodash/take.js';
49
+ import { mdiRadioboxBlank } from '@lumx/icons/esm/radiobox-blank.js';
50
+ import { mdiRadioboxMarked } from '@lumx/icons/esm/radiobox-marked.js';
51
+ import { mdiMenuDown } from '@lumx/icons/esm/menu-down.js';
52
+ import { getWithSelector } from '@lumx/core/js/utils/selectors';
53
+ import { mdiArrowDown } from '@lumx/icons/esm/arrow-down.js';
54
+ import { mdiArrowUp } from '@lumx/icons/esm/arrow-up.js';
55
+ import set from 'lodash/set.js';
54
56
 
55
57
  let i = 0;
56
58
 
@@ -101,15 +103,15 @@ const COMPONENT_NAME$1k = 'AlertDialog';
101
103
  /**
102
104
  * Component default class name and class prefix.
103
105
  */
104
- const CLASSNAME$1j = 'lumx-alert-dialog';
106
+ const CLASSNAME$1k = 'lumx-alert-dialog';
105
107
  const {
106
- block: block$14
107
- } = classNames.bem(CLASSNAME$1j);
108
+ block: block$17
109
+ } = classNames.bem(CLASSNAME$1k);
108
110
 
109
111
  /**
110
112
  * Component default props.
111
113
  */
112
- const DEFAULT_PROPS$1a = {
114
+ const DEFAULT_PROPS$1b = {
113
115
  size: Size$1.tiny,
114
116
  kind: Kind$1.info
115
117
  };
@@ -130,8 +132,8 @@ const AlertDialog = forwardRef((props, ref) => {
130
132
  className,
131
133
  cancelProps,
132
134
  confirmProps,
133
- kind = DEFAULT_PROPS$1a.kind,
134
- size = DEFAULT_PROPS$1a.size,
135
+ kind = DEFAULT_PROPS$1b.kind,
136
+ size = DEFAULT_PROPS$1b.size,
135
137
  dialogProps,
136
138
  children,
137
139
  ...forwardedProps
@@ -172,7 +174,7 @@ const AlertDialog = forwardRef((props, ref) => {
172
174
  'aria-describedby': descriptionId,
173
175
  ...dialogProps
174
176
  },
175
- className: classNames.join(className, block$14({
177
+ className: classNames.join(className, block$17({
176
178
  [`kind-${kind}`]: Boolean(kind)
177
179
  })),
178
180
  ...forwardedProps,
@@ -218,8 +220,8 @@ const AlertDialog = forwardRef((props, ref) => {
218
220
  });
219
221
  });
220
222
  AlertDialog.displayName = COMPONENT_NAME$1k;
221
- AlertDialog.className = CLASSNAME$1j;
222
- AlertDialog.defaultProps = DEFAULT_PROPS$1a;
223
+ AlertDialog.className = CLASSNAME$1k;
224
+ AlertDialog.defaultProps = DEFAULT_PROPS$1b;
223
225
 
224
226
  /**
225
227
  * Hook focusing an element when defined and `focus` boolean `true`.
@@ -316,12 +318,12 @@ const COMPONENT_NAME$1j = 'Autocomplete';
316
318
  /**
317
319
  * Component default class name and class prefix.
318
320
  */
319
- const CLASSNAME$1i = 'lumx-autocomplete';
321
+ const CLASSNAME$1j = 'lumx-autocomplete';
320
322
 
321
323
  /**
322
324
  * Component default props.
323
325
  */
324
- const DEFAULT_PROPS$19 = {
326
+ const DEFAULT_PROPS$1a = {
325
327
  anchorToInput: false,
326
328
  closeOnClick: false,
327
329
  closeOnClickAway: true,
@@ -343,13 +345,13 @@ const Autocomplete = forwardRef((props, ref) => {
343
345
  otherProps
344
346
  } = useDisableStateProps(props);
345
347
  const {
346
- anchorToInput = DEFAULT_PROPS$19.anchorToInput,
348
+ anchorToInput = DEFAULT_PROPS$1a.anchorToInput,
347
349
  children,
348
350
  chips,
349
351
  className,
350
- closeOnClick = DEFAULT_PROPS$19.closeOnClick,
351
- closeOnClickAway = DEFAULT_PROPS$19.closeOnClickAway,
352
- closeOnEscape = DEFAULT_PROPS$19.closeOnEscape,
352
+ closeOnClick = DEFAULT_PROPS$1a.closeOnClick,
353
+ closeOnClickAway = DEFAULT_PROPS$1a.closeOnClickAway,
354
+ closeOnEscape = DEFAULT_PROPS$1a.closeOnEscape,
353
355
  error,
354
356
  fitToAnchorWidth,
355
357
  hasError,
@@ -370,7 +372,7 @@ const Autocomplete = forwardRef((props, ref) => {
370
372
  onInfiniteScroll,
371
373
  placeholder,
372
374
  placement,
373
- shouldFocusOnClose = DEFAULT_PROPS$19.shouldFocusOnClose,
375
+ shouldFocusOnClose = DEFAULT_PROPS$1a.shouldFocusOnClose,
374
376
  theme = defaultTheme,
375
377
  value,
376
378
  textFieldProps = {},
@@ -383,7 +385,7 @@ const Autocomplete = forwardRef((props, ref) => {
383
385
  return /*#__PURE__*/jsxs("div", {
384
386
  ref: ref,
385
387
  ...forwardedProps,
386
- className: classNames.join(className, CLASSNAME$1i),
388
+ className: classNames.join(className, CLASSNAME$1j),
387
389
  children: [/*#__PURE__*/jsx(TextField, {
388
390
  ...textFieldProps,
389
391
  chips: chips,
@@ -424,8 +426,8 @@ const Autocomplete = forwardRef((props, ref) => {
424
426
  });
425
427
  });
426
428
  Autocomplete.displayName = COMPONENT_NAME$1j;
427
- Autocomplete.className = CLASSNAME$1i;
428
- Autocomplete.defaultProps = DEFAULT_PROPS$19;
429
+ Autocomplete.className = CLASSNAME$1j;
430
+ Autocomplete.defaultProps = DEFAULT_PROPS$1a;
429
431
 
430
432
  /**
431
433
  * Component display name.
@@ -435,12 +437,12 @@ const COMPONENT_NAME$1i = 'AutocompleteMultiple';
435
437
  /**
436
438
  * Component default class name and class prefix.
437
439
  */
438
- const CLASSNAME$1h = 'lumx-autocomplete-multiple';
440
+ const CLASSNAME$1i = 'lumx-autocomplete-multiple';
439
441
 
440
442
  /**
441
443
  * Component default props.
442
444
  */
443
- const DEFAULT_PROPS$18 = {
445
+ const DEFAULT_PROPS$19 = {
444
446
  closeOnClickAway: true,
445
447
  closeOnEscape: true,
446
448
  selectedChipRender(choice, index, onClear, isDisabled) {
@@ -480,8 +482,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
480
482
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
481
483
  chipsAlignment,
482
484
  className,
483
- closeOnClickAway = DEFAULT_PROPS$18.closeOnClickAway,
484
- closeOnEscape = DEFAULT_PROPS$18.closeOnEscape,
485
+ closeOnClickAway = DEFAULT_PROPS$19.closeOnClickAway,
486
+ closeOnEscape = DEFAULT_PROPS$19.closeOnEscape,
485
487
  fitToAnchorWidth,
486
488
  hasError,
487
489
  helper,
@@ -503,19 +505,19 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
503
505
  onKeyDown,
504
506
  placeholder,
505
507
  placement,
506
- selectedChipRender = DEFAULT_PROPS$18.selectedChipRender,
508
+ selectedChipRender = DEFAULT_PROPS$19.selectedChipRender,
507
509
  shouldFocusOnClose,
508
510
  theme = defaultTheme,
509
511
  type,
510
512
  value,
511
- values = DEFAULT_PROPS$18.values,
513
+ values = DEFAULT_PROPS$19.values,
512
514
  ...forwardedProps
513
515
  } = otherProps;
514
516
  return /*#__PURE__*/jsx(Autocomplete, {
515
517
  ref: ref,
516
518
  ...forwardedProps,
517
519
  anchorToInput: anchorToInput,
518
- className: classNames.join(className, CLASSNAME$1h),
520
+ className: classNames.join(className, CLASSNAME$1i),
519
521
  name: name,
520
522
  value: value,
521
523
  onChange: onChange,
@@ -549,8 +551,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
549
551
  });
550
552
  });
551
553
  AutocompleteMultiple.displayName = COMPONENT_NAME$1i;
552
- AutocompleteMultiple.className = CLASSNAME$1h;
553
- AutocompleteMultiple.defaultProps = DEFAULT_PROPS$18;
554
+ AutocompleteMultiple.className = CLASSNAME$1i;
555
+ AutocompleteMultiple.defaultProps = DEFAULT_PROPS$19;
554
556
 
555
557
  /**
556
558
  * Component display name.
@@ -560,16 +562,16 @@ const COMPONENT_NAME$1h = 'Avatar';
560
562
  /**
561
563
  * Component default class name and class prefix.
562
564
  */
563
- const CLASSNAME$1g = 'lumx-avatar';
565
+ const CLASSNAME$1h = 'lumx-avatar';
564
566
  const {
565
- block: block$13,
566
- element: element$N
567
- } = classNames.bem(CLASSNAME$1g);
567
+ block: block$16,
568
+ element: element$Q
569
+ } = classNames.bem(CLASSNAME$1h);
568
570
 
569
571
  /**
570
572
  * Component default props.
571
573
  */
572
- const DEFAULT_PROPS$17 = {
574
+ const DEFAULT_PROPS$18 = {
573
575
  size: Size$1.m
574
576
  };
575
577
 
@@ -592,7 +594,7 @@ const Avatar = forwardRef((props, ref) => {
592
594
  linkAs,
593
595
  onClick,
594
596
  onKeyPress,
595
- size = DEFAULT_PROPS$17.size,
597
+ size = DEFAULT_PROPS$18.size,
596
598
  theme = defaultTheme,
597
599
  thumbnailProps,
598
600
  ...forwardedProps
@@ -600,109 +602,34 @@ const Avatar = forwardRef((props, ref) => {
600
602
  return /*#__PURE__*/jsxs("div", {
601
603
  ref: ref,
602
604
  ...forwardedProps,
603
- className: classNames.join(className, block$13({
605
+ className: classNames.join(className, block$16({
604
606
  [`size-${size}`]: Boolean(size),
605
607
  [`theme-${theme}`]: Boolean(theme)
606
608
  })),
607
609
  children: [/*#__PURE__*/jsx(Thumbnail, {
608
610
  linkProps: linkProps,
609
611
  linkAs: linkAs,
610
- className: element$N('thumbnail'),
612
+ className: element$Q('thumbnail'),
611
613
  onClick: onClick,
612
614
  onKeyPress: onKeyPress,
613
615
  ...thumbnailProps,
614
- aspectRatio: AspectRatio.square,
616
+ aspectRatio: AspectRatio$1.square,
615
617
  size: size,
616
618
  image: image,
617
619
  alt: alt,
618
620
  theme: theme
619
621
  }), actions && /*#__PURE__*/jsx("div", {
620
- className: element$N('actions'),
622
+ className: element$Q('actions'),
621
623
  children: actions
622
624
  }), badge && /*#__PURE__*/jsx("div", {
623
- className: element$N('badge'),
625
+ className: element$Q('badge'),
624
626
  children: badge
625
627
  })]
626
628
  });
627
629
  });
628
630
  Avatar.displayName = COMPONENT_NAME$1h;
629
- Avatar.className = CLASSNAME$1g;
630
- Avatar.defaultProps = DEFAULT_PROPS$17;
631
-
632
- /**
633
- * Component display name.
634
- */
635
- const COMPONENT_NAME$1g = 'Badge';
636
-
637
- /**
638
- * Component default class name and class prefix.
639
- */
640
- const CLASSNAME$1f = 'lumx-badge';
641
- const {
642
- block: block$12
643
- } = classNames.bem(CLASSNAME$1f);
644
-
645
- /**
646
- * Component default props.
647
- */
648
- const DEFAULT_PROPS$16 = {
649
- color: ColorPalette$1.primary
650
- };
651
-
652
- /**
653
- * Badge component.
654
- *
655
- * @param props Component props.
656
- * @param ref Component ref.
657
- * @return React element.
658
- */
659
- const Badge = forwardRef((props, ref) => {
660
- const {
661
- children,
662
- className,
663
- color = DEFAULT_PROPS$16.color,
664
- ...forwardedProps
665
- } = props;
666
- return /*#__PURE__*/jsx("div", {
667
- ref: ref,
668
- ...forwardedProps,
669
- className: classNames.join(className, block$12({
670
- [`color-${color}`]: Boolean(color)
671
- })),
672
- children: children
673
- });
674
- });
675
- Badge.displayName = COMPONENT_NAME$1g;
676
- Badge.className = CLASSNAME$1f;
677
- Badge.defaultProps = DEFAULT_PROPS$16;
678
-
679
- /**
680
- * Component default class name and class prefix.
681
- */
682
- const CLASSNAME$1e = 'lumx-badge-wrapper';
683
- const {
684
- block: block$11,
685
- element: element$M
686
- } = classNames.bem(CLASSNAME$1e);
687
- const BadgeWrapper = forwardRef((props, ref) => {
688
- const {
689
- badge,
690
- children,
691
- className,
692
- ...forwardedProps
693
- } = props;
694
- return /*#__PURE__*/jsxs("div", {
695
- ref: ref,
696
- ...forwardedProps,
697
- className: classNames.join(className, block$11()),
698
- children: [children, badge && /*#__PURE__*/jsx("div", {
699
- className: element$M('badge'),
700
- children: badge
701
- })]
702
- });
703
- });
704
- BadgeWrapper.displayName = 'BadgeWrapper';
705
- BadgeWrapper.className = CLASSNAME$1e;
631
+ Avatar.className = CLASSNAME$1h;
632
+ Avatar.defaultProps = DEFAULT_PROPS$18;
706
633
 
707
634
  /**
708
635
  * Alignments.
@@ -743,6 +670,12 @@ const TypographyInterface = {
743
670
  */
744
671
  const Typography = {
745
672
  ...TypographyInterface};
673
+ /**
674
+ * All available aspect ratios.
675
+ */
676
+ const AspectRatio = {
677
+ /** Intrinsic content ratio. */
678
+ original: 'original'};
746
679
  /**
747
680
  * Semantic info about the purpose of the component
748
681
  */
@@ -764,8 +697,6 @@ const ColorPalette = {
764
697
  red: 'red',
765
698
  light: 'light'};
766
699
 
767
- /** ColorPalette with all possible color variant combination */
768
-
769
700
  function getDefaultExportFromCjs (x) {
770
701
  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
771
702
  }
@@ -926,7 +857,7 @@ function modifier$1(baseName, modifiers) {
926
857
  * block('button', { active: true, disabled: false }); // 'button button--active'
927
858
  */
928
859
 
929
- function block$10(baseName, modifiersOrAdditionalClasses, additionalClasses) {
860
+ function block$15(baseName, modifiersOrAdditionalClasses, additionalClasses) {
930
861
  let modifiers;
931
862
  let classes;
932
863
  if (Array.isArray(modifiersOrAdditionalClasses)) {
@@ -961,11 +892,11 @@ function block$10(baseName, modifiersOrAdditionalClasses, additionalClasses) {
961
892
  * element('my-button', 'icon', { active: true }); // 'my-button__icon my-button__icon--active'
962
893
  */
963
894
 
964
- function element$L(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
895
+ function element$P(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
965
896
  if (Array.isArray(modifiersOrAdditionalClasses)) {
966
- return block$10(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
897
+ return block$15(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
967
898
  }
968
- return block$10(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
899
+ return block$15(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
969
900
  }
970
901
 
971
902
  /**
@@ -974,15 +905,15 @@ function element$L(baseClass, elem, modifiersOrAdditionalClasses, additionalClas
974
905
  function bem(baseName) {
975
906
  function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
976
907
  if (Array.isArray(modifiersOrAdditionalClasses)) {
977
- return block$10(baseName, modifiersOrAdditionalClasses);
908
+ return block$15(baseName, modifiersOrAdditionalClasses);
978
909
  }
979
- return block$10(baseName, modifiersOrAdditionalClasses, additionalClasses);
910
+ return block$15(baseName, modifiersOrAdditionalClasses, additionalClasses);
980
911
  }
981
912
  function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
982
913
  if (Array.isArray(modifiersOrAdditionalClasses)) {
983
- return element$L(baseName, elem, modifiersOrAdditionalClasses);
914
+ return element$P(baseName, elem, modifiersOrAdditionalClasses);
984
915
  }
985
- return element$L(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
916
+ return element$P(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
986
917
  }
987
918
  return {
988
919
  block: blockFn,
@@ -991,6 +922,108 @@ function bem(baseName) {
991
922
  };
992
923
  }
993
924
 
925
+ /**
926
+ * Component display name.
927
+ */
928
+ const COMPONENT_NAME$1g = 'Badge';
929
+
930
+ /**
931
+ * Component default class name and class prefix.
932
+ */
933
+ const CLASSNAME$1g = 'lumx-badge';
934
+ const {
935
+ block: block$14
936
+ } = bem(CLASSNAME$1g);
937
+
938
+ /**
939
+ * Component default props.
940
+ */
941
+ const DEFAULT_PROPS$17 = {
942
+ color: ColorPalette.primary
943
+ };
944
+
945
+ /**
946
+ * Badge component.
947
+ *
948
+ * @param props Component props.
949
+ * @return JSX element.
950
+ */
951
+ const Badge$1 = props => {
952
+ const {
953
+ children,
954
+ className,
955
+ color = DEFAULT_PROPS$17.color,
956
+ ref,
957
+ ...forwardedProps
958
+ } = props;
959
+ return /*#__PURE__*/jsx("div", {
960
+ ref: ref,
961
+ ...forwardedProps,
962
+ className: classnames(className, block$14({
963
+ [`color-${color}`]: Boolean(color)
964
+ })),
965
+ children: children
966
+ });
967
+ };
968
+ Badge$1.displayName = COMPONENT_NAME$1g;
969
+ Badge$1.className = CLASSNAME$1g;
970
+ Badge$1.defaultProps = DEFAULT_PROPS$17;
971
+
972
+ /**
973
+ * Defines the props of the component.
974
+ */
975
+
976
+ /**
977
+ * Badge component.
978
+ *
979
+ * @param props Component props.
980
+ * @param ref Component ref.
981
+ * @return React element.
982
+ */
983
+ const Badge = forwardRef((props, ref) => {
984
+ return Badge$1({
985
+ ...props,
986
+ ref
987
+ });
988
+ });
989
+ Badge.displayName = Badge$1.displayName;
990
+ Badge.className = Badge$1.className;
991
+ Badge.defaultProps = Badge$1.defaultProps;
992
+
993
+ const COMPONENT_NAME$1f = 'BadgeWrapper';
994
+ const CLASSNAME$1f = 'lumx-badge-wrapper';
995
+ const {
996
+ block: block$13,
997
+ element: element$O
998
+ } = bem(CLASSNAME$1f);
999
+ const BadgeWrapper$1 = props => {
1000
+ const {
1001
+ badge,
1002
+ children,
1003
+ className,
1004
+ ref,
1005
+ ...forwardedProps
1006
+ } = props;
1007
+ return /*#__PURE__*/jsxs("div", {
1008
+ ref: ref,
1009
+ ...forwardedProps,
1010
+ className: classnames(className, block$13()),
1011
+ children: [children, badge && /*#__PURE__*/jsx("div", {
1012
+ className: element$O('badge'),
1013
+ children: badge
1014
+ })]
1015
+ });
1016
+ };
1017
+
1018
+ const BadgeWrapper = forwardRef((props, ref) => {
1019
+ return BadgeWrapper$1({
1020
+ ...props,
1021
+ ref
1022
+ });
1023
+ });
1024
+ BadgeWrapper.displayName = COMPONENT_NAME$1f;
1025
+ BadgeWrapper.className = CLASSNAME$1f;
1026
+
994
1027
  /**
995
1028
  * Render clickable element (link, button or custom element)
996
1029
  * (also does some basic disabled state handling)
@@ -1037,7 +1070,7 @@ const RawClickable$1 = props => {
1037
1070
  /**
1038
1071
  * Component display name.
1039
1072
  */
1040
- const COMPONENT_NAME$1f = 'ButtonRoot';
1073
+ const COMPONENT_NAME$1e = 'ButtonRoot';
1041
1074
  const BUTTON_WRAPPER_CLASSNAME = `lumx-button-wrapper`;
1042
1075
  const {
1043
1076
  block: buttonWrapperBlock
@@ -1135,7 +1168,7 @@ const ButtonRoot = props => {
1135
1168
  children
1136
1169
  });
1137
1170
  };
1138
- ButtonRoot.displayName = COMPONENT_NAME$1f;
1171
+ ButtonRoot.displayName = COMPONENT_NAME$1e;
1139
1172
  ButtonRoot.defaultProps = {};
1140
1173
 
1141
1174
  /**
@@ -1145,20 +1178,20 @@ ButtonRoot.defaultProps = {};
1145
1178
  /**
1146
1179
  * Component display name.
1147
1180
  */
1148
- const COMPONENT_NAME$1e = 'Button';
1181
+ const COMPONENT_NAME$1d = 'Button';
1149
1182
 
1150
1183
  /**
1151
1184
  * Component default class name and class prefix.
1152
1185
  */
1153
- const CLASSNAME$1d = 'lumx-button';
1186
+ const CLASSNAME$1e = 'lumx-button';
1154
1187
  const {
1155
1188
  modifier
1156
- } = bem(CLASSNAME$1d);
1189
+ } = bem(CLASSNAME$1e);
1157
1190
 
1158
1191
  /**
1159
1192
  * Component default props.
1160
1193
  */
1161
- const DEFAULT_PROPS$15 = {
1194
+ const DEFAULT_PROPS$16 = {
1162
1195
  emphasis: Emphasis.high,
1163
1196
  size: Size.m
1164
1197
  };
@@ -1172,10 +1205,10 @@ const DEFAULT_PROPS$15 = {
1172
1205
  const Button$1 = props => {
1173
1206
  const {
1174
1207
  className,
1175
- emphasis = DEFAULT_PROPS$15.emphasis,
1208
+ emphasis = DEFAULT_PROPS$16.emphasis,
1176
1209
  leftIcon,
1177
1210
  rightIcon,
1178
- size = DEFAULT_PROPS$15.size,
1211
+ size = DEFAULT_PROPS$16.size,
1179
1212
  ...forwardedProps
1180
1213
  } = props;
1181
1214
  const buttonClassName = classnames(className, modifier({
@@ -1190,9 +1223,9 @@ const Button$1 = props => {
1190
1223
  variant: 'button'
1191
1224
  });
1192
1225
  };
1193
- Button$1.displayName = COMPONENT_NAME$1e;
1194
- Button$1.className = CLASSNAME$1d;
1195
- Button$1.defaultProps = DEFAULT_PROPS$15;
1226
+ Button$1.displayName = COMPONENT_NAME$1d;
1227
+ Button$1.className = CLASSNAME$1e;
1228
+ Button$1.defaultProps = DEFAULT_PROPS$16;
1196
1229
 
1197
1230
  /**
1198
1231
  * Properties of a component to use to determine it's name.
@@ -1258,26 +1291,26 @@ const Button = forwardRef((props, ref) => {
1258
1291
  })
1259
1292
  });
1260
1293
  });
1261
- Button.displayName = COMPONENT_NAME$1e;
1262
- Button.className = CLASSNAME$1d;
1263
- Button.defaultProps = DEFAULT_PROPS$15;
1294
+ Button.displayName = COMPONENT_NAME$1d;
1295
+ Button.className = CLASSNAME$1e;
1296
+ Button.defaultProps = DEFAULT_PROPS$16;
1264
1297
 
1265
- const COMPONENT_NAME$1d = 'Icon';
1298
+ const COMPONENT_NAME$1c = 'Icon';
1266
1299
  const IconClassName = 'lumx-icon';
1267
1300
 
1268
1301
  /**
1269
1302
  * Defines the props of the component.
1270
1303
  */
1271
1304
 
1272
- const CLASSNAME$1c = IconClassName;
1305
+ const CLASSNAME$1d = IconClassName;
1273
1306
  const {
1274
- block: block$$
1275
- } = bem(CLASSNAME$1c);
1307
+ block: block$12
1308
+ } = bem(CLASSNAME$1d);
1276
1309
 
1277
1310
  /**
1278
1311
  * Component default props.
1279
1312
  */
1280
- const DEFAULT_PROPS$14 = {};
1313
+ const DEFAULT_PROPS$15 = {};
1281
1314
 
1282
1315
  /**
1283
1316
  * Icon component.
@@ -1326,7 +1359,7 @@ const Icon$1 = props => {
1326
1359
  return /*#__PURE__*/jsx("i", {
1327
1360
  ref: ref,
1328
1361
  ...forwardedProps,
1329
- className: classnames(className, block$$({
1362
+ className: classnames(className, block$12({
1330
1363
  [`color-${iconColor}`]: Boolean(iconColor),
1331
1364
  [`color-variant-${iconColorVariant}`]: Boolean(iconColorVariant),
1332
1365
  'has-shape': hasShape,
@@ -1355,24 +1388,24 @@ const Icon$1 = props => {
1355
1388
  })
1356
1389
  });
1357
1390
  };
1358
- Icon$1.displayName = COMPONENT_NAME$1d;
1359
- Icon$1.className = CLASSNAME$1c;
1360
- Icon$1.defaultProps = DEFAULT_PROPS$14;
1391
+ Icon$1.displayName = COMPONENT_NAME$1c;
1392
+ Icon$1.className = CLASSNAME$1d;
1393
+ Icon$1.defaultProps = DEFAULT_PROPS$15;
1361
1394
 
1362
1395
  /**
1363
1396
  * Component display name.
1364
1397
  */
1365
- const COMPONENT_NAME$1c = 'IconButton';
1398
+ const COMPONENT_NAME$1b = 'IconButton';
1366
1399
 
1367
1400
  /**
1368
1401
  * Component default class name and class prefix.
1369
1402
  */
1370
- const CLASSNAME$1b = 'lumx-icon-button';
1403
+ const CLASSNAME$1c = 'lumx-icon-button';
1371
1404
 
1372
1405
  /**
1373
1406
  * Component default props.
1374
1407
  */
1375
- const DEFAULT_PROPS$13 = {
1408
+ const DEFAULT_PROPS$14 = {
1376
1409
  emphasis: Emphasis.high,
1377
1410
  size: Size.m
1378
1411
  };
@@ -1385,11 +1418,11 @@ const DEFAULT_PROPS$13 = {
1385
1418
  */
1386
1419
  const IconButton$1 = props => {
1387
1420
  const {
1388
- emphasis = DEFAULT_PROPS$13.emphasis,
1421
+ emphasis = DEFAULT_PROPS$14.emphasis,
1389
1422
  image,
1390
1423
  icon,
1391
1424
  label,
1392
- size = DEFAULT_PROPS$13.size,
1425
+ size = DEFAULT_PROPS$14.size,
1393
1426
  ...forwardedProps
1394
1427
  } = props;
1395
1428
  const defaultChildren = image ? /*#__PURE__*/jsx("img", {
@@ -1408,9 +1441,9 @@ const IconButton$1 = props => {
1408
1441
  children: defaultChildren
1409
1442
  });
1410
1443
  };
1411
- IconButton$1.displayName = COMPONENT_NAME$1c;
1412
- IconButton$1.className = CLASSNAME$1b;
1413
- IconButton$1.defaultProps = DEFAULT_PROPS$13;
1444
+ IconButton$1.displayName = COMPONENT_NAME$1b;
1445
+ IconButton$1.className = CLASSNAME$1c;
1446
+ IconButton$1.defaultProps = DEFAULT_PROPS$14;
1414
1447
 
1415
1448
  /**
1416
1449
  * IconButton component.
@@ -1445,24 +1478,24 @@ const IconButton = forwardRef((props, ref) => {
1445
1478
  })
1446
1479
  });
1447
1480
  });
1448
- IconButton.displayName = COMPONENT_NAME$1c;
1449
- IconButton.className = CLASSNAME$1b;
1450
- IconButton.defaultProps = DEFAULT_PROPS$13;
1481
+ IconButton.displayName = COMPONENT_NAME$1b;
1482
+ IconButton.className = CLASSNAME$1c;
1483
+ IconButton.defaultProps = DEFAULT_PROPS$14;
1451
1484
 
1452
1485
  /**
1453
1486
  * Component display name.
1454
1487
  */
1455
- const COMPONENT_NAME$1b = 'ButtonGroup';
1488
+ const COMPONENT_NAME$1a = 'ButtonGroup';
1456
1489
 
1457
1490
  /**
1458
1491
  * Component default class name and class prefix.
1459
1492
  */
1460
- const CLASSNAME$1a = 'lumx-button-group';
1493
+ const CLASSNAME$1b = 'lumx-button-group';
1461
1494
 
1462
1495
  /**
1463
1496
  * Component default props.
1464
1497
  */
1465
- const DEFAULT_PROPS$12 = {};
1498
+ const DEFAULT_PROPS$13 = {};
1466
1499
 
1467
1500
  /**
1468
1501
  * ButtonGroup component.
@@ -1478,13 +1511,13 @@ const ButtonGroup$1 = props => {
1478
1511
  } = props;
1479
1512
  return /*#__PURE__*/jsx("div", {
1480
1513
  ...forwardedProps,
1481
- className: classnames(className, CLASSNAME$1a),
1514
+ className: classnames(className, CLASSNAME$1b),
1482
1515
  children: children
1483
1516
  });
1484
1517
  };
1485
- ButtonGroup$1.displayName = COMPONENT_NAME$1b;
1486
- ButtonGroup$1.className = CLASSNAME$1a;
1487
- ButtonGroup$1.defaultProps = DEFAULT_PROPS$12;
1518
+ ButtonGroup$1.displayName = COMPONENT_NAME$1a;
1519
+ ButtonGroup$1.className = CLASSNAME$1b;
1520
+ ButtonGroup$1.defaultProps = DEFAULT_PROPS$13;
1488
1521
 
1489
1522
  /**
1490
1523
  * ButtonGroup component.
@@ -1499,17 +1532,17 @@ const ButtonGroup = forwardRef((props, ref) => {
1499
1532
  ...props
1500
1533
  });
1501
1534
  });
1502
- ButtonGroup.displayName = COMPONENT_NAME$1b;
1503
- ButtonGroup.className = CLASSNAME$1a;
1504
- ButtonGroup.defaultProps = DEFAULT_PROPS$12;
1535
+ ButtonGroup.displayName = COMPONENT_NAME$1a;
1536
+ ButtonGroup.className = CLASSNAME$1b;
1537
+ ButtonGroup.defaultProps = DEFAULT_PROPS$13;
1505
1538
 
1506
- const COMPONENT_NAME$1a = 'InputLabel';
1539
+ const COMPONENT_NAME$19 = 'InputLabel';
1507
1540
  const InputLabelClassName = 'lumx-input-label';
1508
- const CLASSNAME$19 = InputLabelClassName;
1541
+ const CLASSNAME$1a = InputLabelClassName;
1509
1542
  const {
1510
- block: block$_
1511
- } = bem(CLASSNAME$19);
1512
- const DEFAULT_PROPS$11 = {};
1543
+ block: block$11
1544
+ } = bem(CLASSNAME$1a);
1545
+ const DEFAULT_PROPS$12 = {};
1513
1546
 
1514
1547
  /**
1515
1548
  * InputLabel component.
@@ -1529,7 +1562,7 @@ function InputLabel$1(props) {
1529
1562
  ref: ref,
1530
1563
  ...forwardedProps,
1531
1564
  htmlFor: htmlFor,
1532
- className: classnames(className, block$_({
1565
+ className: classnames(className, block$11({
1533
1566
  'is-required': isRequired,
1534
1567
  [`theme-${theme}`]: Boolean(theme),
1535
1568
  'has-custom-typography': Boolean(typography$1)
@@ -1537,9 +1570,9 @@ function InputLabel$1(props) {
1537
1570
  children: children
1538
1571
  });
1539
1572
  }
1540
- InputLabel$1.displayName = COMPONENT_NAME$1a;
1541
- InputLabel$1.className = CLASSNAME$19;
1542
- InputLabel$1.defaultProps = DEFAULT_PROPS$11;
1573
+ InputLabel$1.displayName = COMPONENT_NAME$19;
1574
+ InputLabel$1.className = CLASSNAME$1a;
1575
+ InputLabel$1.defaultProps = DEFAULT_PROPS$12;
1543
1576
 
1544
1577
  const INPUT_HELPER_CONFIGURATION = {
1545
1578
  [Kind.error]: {
@@ -1553,22 +1586,22 @@ const INPUT_HELPER_CONFIGURATION = {
1553
1586
  }
1554
1587
  };
1555
1588
 
1556
- const COMPONENT_NAME$19 = 'InputHelper';
1589
+ const COMPONENT_NAME$18 = 'InputHelper';
1557
1590
  const InputHelperClassName = 'lumx-input-helper';
1558
1591
 
1559
1592
  /**
1560
1593
  * Defines the props of the component.
1561
1594
  */
1562
1595
 
1563
- const CLASSNAME$18 = InputHelperClassName;
1596
+ const CLASSNAME$19 = InputHelperClassName;
1564
1597
  const {
1565
- block: block$Z
1566
- } = bem(CLASSNAME$18);
1598
+ block: block$10
1599
+ } = bem(CLASSNAME$19);
1567
1600
 
1568
1601
  /**
1569
1602
  * Component default props.
1570
1603
  */
1571
- const DEFAULT_PROPS$10 = {
1604
+ const DEFAULT_PROPS$11 = {
1572
1605
  kind: Kind.info
1573
1606
  };
1574
1607
 
@@ -1579,7 +1612,7 @@ function InputHelper$1(props) {
1579
1612
  const {
1580
1613
  children,
1581
1614
  className,
1582
- kind = DEFAULT_PROPS$10.kind,
1615
+ kind = DEFAULT_PROPS$11.kind,
1583
1616
  theme,
1584
1617
  ref,
1585
1618
  ...forwardedProps
@@ -1590,16 +1623,16 @@ function InputHelper$1(props) {
1590
1623
  return /*#__PURE__*/jsx("p", {
1591
1624
  ref: ref,
1592
1625
  ...forwardedProps,
1593
- className: classnames(className, block$Z({
1626
+ className: classnames(className, block$10({
1594
1627
  [`color-${color}`]: Boolean(color),
1595
1628
  [`theme-${theme}`]: Boolean(theme)
1596
1629
  })),
1597
1630
  children: children
1598
1631
  });
1599
1632
  }
1600
- InputHelper$1.displayName = COMPONENT_NAME$19;
1601
- InputHelper$1.className = CLASSNAME$18;
1602
- InputHelper$1.defaultProps = DEFAULT_PROPS$10;
1633
+ InputHelper$1.displayName = COMPONENT_NAME$18;
1634
+ InputHelper$1.className = CLASSNAME$19;
1635
+ InputHelper$1.defaultProps = DEFAULT_PROPS$11;
1603
1636
 
1604
1637
  const INTERMEDIATE_STATE = 'intermediate';
1605
1638
 
@@ -1610,16 +1643,16 @@ const INTERMEDIATE_STATE = 'intermediate';
1610
1643
  /**
1611
1644
  * Component display name.
1612
1645
  */
1613
- const COMPONENT_NAME$18 = 'Checkbox';
1646
+ const COMPONENT_NAME$17 = 'Checkbox';
1614
1647
 
1615
1648
  /**
1616
1649
  * Component default class name and class prefix.
1617
1650
  */
1618
- const CLASSNAME$17 = 'lumx-checkbox';
1651
+ const CLASSNAME$18 = 'lumx-checkbox';
1619
1652
  const {
1620
- block: block$Y,
1621
- element: element$K
1622
- } = bem(CLASSNAME$17);
1653
+ block: block$$,
1654
+ element: element$N
1655
+ } = bem(CLASSNAME$18);
1623
1656
 
1624
1657
  /**
1625
1658
  * Checkbox component.
@@ -1655,7 +1688,7 @@ const Checkbox$1 = props => {
1655
1688
  return /*#__PURE__*/jsxs("div", {
1656
1689
  ref: ref,
1657
1690
  ...forwardedProps,
1658
- className: classnames(className, block$Y({
1691
+ className: classnames(className, block$$({
1659
1692
  // Whether state is intermediate class name will "-checked"
1660
1693
  'is-checked': intermediateState ? true : isChecked,
1661
1694
  'is-disabled': isDisabled,
@@ -1663,12 +1696,12 @@ const Checkbox$1 = props => {
1663
1696
  [`theme-${theme}`]: Boolean(theme)
1664
1697
  })),
1665
1698
  children: [/*#__PURE__*/jsxs("div", {
1666
- className: element$K('input-wrapper'),
1699
+ className: element$N('input-wrapper'),
1667
1700
  children: [/*#__PURE__*/jsx("input", {
1668
1701
  ref: inputRef,
1669
1702
  type: "checkbox",
1670
1703
  id: inputId,
1671
- className: element$K('input-native'),
1704
+ className: element$N('input-native'),
1672
1705
  name: name,
1673
1706
  value: value,
1674
1707
  checked: isChecked,
@@ -1680,26 +1713,26 @@ const Checkbox$1 = props => {
1680
1713
  } : {}),
1681
1714
  ...inputProps
1682
1715
  }), /*#__PURE__*/jsxs("div", {
1683
- className: element$K('input-placeholder'),
1716
+ className: element$N('input-placeholder'),
1684
1717
  children: [/*#__PURE__*/jsx("div", {
1685
- className: element$K('input-background')
1718
+ className: element$N('input-background')
1686
1719
  }), /*#__PURE__*/jsx("div", {
1687
- className: element$K('input-indicator'),
1720
+ className: element$N('input-indicator'),
1688
1721
  children: Icon$1({
1689
1722
  icon: intermediateState ? mdiMinus : mdiCheck
1690
1723
  })
1691
1724
  })]
1692
1725
  })]
1693
1726
  }), /*#__PURE__*/jsxs("div", {
1694
- className: element$K('content'),
1727
+ className: element$N('content'),
1695
1728
  children: [label && InputLabel$1({
1696
1729
  htmlFor: inputId,
1697
- className: element$K('label'),
1730
+ className: element$N('label'),
1698
1731
  theme,
1699
1732
  children: label
1700
1733
  }), helper && InputHelper$1({
1701
1734
  id: `${inputId}-helper`,
1702
- className: element$K('helper'),
1735
+ className: element$N('helper'),
1703
1736
  theme,
1704
1737
  children: helper
1705
1738
  })]
@@ -1714,7 +1747,7 @@ const Checkbox$1 = props => {
1714
1747
  /**
1715
1748
  * Component default props.
1716
1749
  */
1717
- const DEFAULT_PROPS$$ = {};
1750
+ const DEFAULT_PROPS$10 = {};
1718
1751
 
1719
1752
  /**
1720
1753
  * Checkbox component.
@@ -1774,9 +1807,9 @@ const Checkbox = forwardRef((props, ref) => {
1774
1807
  inputId
1775
1808
  });
1776
1809
  });
1777
- Checkbox.displayName = COMPONENT_NAME$18;
1778
- Checkbox.className = CLASSNAME$17;
1779
- Checkbox.defaultProps = DEFAULT_PROPS$$;
1810
+ Checkbox.displayName = COMPONENT_NAME$17;
1811
+ Checkbox.className = CLASSNAME$18;
1812
+ Checkbox.defaultProps = DEFAULT_PROPS$10;
1780
1813
 
1781
1814
  /**
1782
1815
  * Wrap mouse event handler to stop event propagation.
@@ -1797,21 +1830,21 @@ function useStopPropagation(handler) {
1797
1830
  /**
1798
1831
  * Component display name.
1799
1832
  */
1800
- const COMPONENT_NAME$17 = 'Chip';
1833
+ const COMPONENT_NAME$16 = 'Chip';
1801
1834
 
1802
1835
  /**
1803
1836
  * Component default class name and class prefix.
1804
1837
  */
1805
- const CLASSNAME$16 = 'lumx-chip';
1838
+ const CLASSNAME$17 = 'lumx-chip';
1806
1839
  const {
1807
- block: block$X,
1808
- element: element$J
1809
- } = classNames.bem(CLASSNAME$16);
1840
+ block: block$_,
1841
+ element: element$M
1842
+ } = classNames.bem(CLASSNAME$17);
1810
1843
 
1811
1844
  /**
1812
1845
  * Component default props.
1813
1846
  */
1814
- const DEFAULT_PROPS$_ = {
1847
+ const DEFAULT_PROPS$$ = {
1815
1848
  size: Size$1.m
1816
1849
  };
1817
1850
 
@@ -1841,7 +1874,7 @@ const Chip = forwardRef((props, ref) => {
1841
1874
  onAfterClick,
1842
1875
  onBeforeClick,
1843
1876
  onClick,
1844
- size = DEFAULT_PROPS$_.size,
1877
+ size = DEFAULT_PROPS$$.size,
1845
1878
  theme = defaultTheme,
1846
1879
  href,
1847
1880
  onKeyDown,
@@ -1872,7 +1905,7 @@ const Chip = forwardRef((props, ref) => {
1872
1905
  ...forwardedProps,
1873
1906
  href: !disabledStateProps.disabled ? href : undefined,
1874
1907
  ref: ref,
1875
- className: classNames.join(className, block$X({
1908
+ className: classNames.join(className, block$_({
1876
1909
  'is-clickable': isClickable,
1877
1910
  [`color-${chipColor}`]: Boolean(chipColor),
1878
1911
  'is-disabled': isAnyDisabled,
@@ -1890,19 +1923,19 @@ const Chip = forwardRef((props, ref) => {
1890
1923
  /*#__PURE__*/
1891
1924
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
1892
1925
  jsx("div", {
1893
- className: element$J('before', {
1926
+ className: element$M('before', {
1894
1927
  'is-clickable': hasBeforeClick
1895
1928
  }),
1896
1929
  onClick: handleOnBeforeClick,
1897
1930
  children: before
1898
1931
  }), /*#__PURE__*/jsx("div", {
1899
- className: element$J('label'),
1932
+ className: element$M('label'),
1900
1933
  children: children
1901
1934
  }), after &&
1902
1935
  /*#__PURE__*/
1903
1936
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
1904
1937
  jsx("div", {
1905
- className: element$J('after', {
1938
+ className: element$M('after', {
1906
1939
  'is-clickable': hasAfterClick
1907
1940
  }),
1908
1941
  onClick: handleOnAfterClick,
@@ -1911,9 +1944,9 @@ const Chip = forwardRef((props, ref) => {
1911
1944
  })
1912
1945
  );
1913
1946
  });
1914
- Chip.displayName = COMPONENT_NAME$17;
1915
- Chip.className = CLASSNAME$16;
1916
- Chip.defaultProps = DEFAULT_PROPS$_;
1947
+ Chip.displayName = COMPONENT_NAME$16;
1948
+ Chip.className = CLASSNAME$17;
1949
+ Chip.defaultProps = DEFAULT_PROPS$$;
1917
1950
 
1918
1951
  const INITIAL_STATE_ACTIVE_CHIP = -1;
1919
1952
 
@@ -1969,17 +2002,17 @@ const useChipGroupNavigation = (chips, onChipDeleted, initialActiveChip = INITIA
1969
2002
  /**
1970
2003
  * Component default props.
1971
2004
  */
1972
- const DEFAULT_PROPS$Z = {};
2005
+ const DEFAULT_PROPS$_ = {};
1973
2006
 
1974
2007
  /**
1975
2008
  * Component display name.
1976
2009
  */
1977
- const COMPONENT_NAME$16 = 'ChipGroup';
2010
+ const COMPONENT_NAME$15 = 'ChipGroup';
1978
2011
 
1979
2012
  /**
1980
2013
  * Component default class name and class prefix.
1981
2014
  */
1982
- const CLASSNAME$15 = 'lumx-chip-group';
2015
+ const CLASSNAME$16 = 'lumx-chip-group';
1983
2016
 
1984
2017
  /**
1985
2018
  * ChipGroup component.
@@ -1998,13 +2031,13 @@ const InternalChipGroup = forwardRef((props, ref) => {
1998
2031
  return /*#__PURE__*/jsx("div", {
1999
2032
  ref: ref,
2000
2033
  ...forwardedProps,
2001
- className: classNames.join(className, CLASSNAME$15),
2034
+ className: classNames.join(className, CLASSNAME$16),
2002
2035
  children: children
2003
2036
  });
2004
2037
  });
2005
- InternalChipGroup.displayName = COMPONENT_NAME$16;
2006
- InternalChipGroup.className = CLASSNAME$15;
2007
- InternalChipGroup.defaultProps = DEFAULT_PROPS$Z;
2038
+ InternalChipGroup.displayName = COMPONENT_NAME$15;
2039
+ InternalChipGroup.className = CLASSNAME$16;
2040
+ InternalChipGroup.defaultProps = DEFAULT_PROPS$_;
2008
2041
  const ChipGroup = Object.assign(InternalChipGroup, {
2009
2042
  useChipGroupNavigation
2010
2043
  });
@@ -2094,11 +2127,11 @@ function useFocusLastChipOnBackspace(chipRefs, inputRef) {
2094
2127
  /**
2095
2128
  * Component default class name and class prefix.
2096
2129
  */
2097
- const CLASSNAME$14 = 'lumx-selection-chip-group';
2130
+ const CLASSNAME$15 = 'lumx-selection-chip-group';
2098
2131
  const {
2099
- block: block$W,
2100
- element: element$I
2101
- } = classNames.bem(CLASSNAME$14);
2132
+ block: block$Z,
2133
+ element: element$L
2134
+ } = classNames.bem(CLASSNAME$15);
2102
2135
 
2103
2136
  /**
2104
2137
  * SelectionChipGroup component.
@@ -2128,7 +2161,7 @@ const SelectionChipGroup = ({
2128
2161
  return /*#__PURE__*/jsx(ChipGroup, {
2129
2162
  role: "group",
2130
2163
  "aria-label": label,
2131
- className: block$W(),
2164
+ className: block$Z(),
2132
2165
  ...forwardedProps,
2133
2166
  children: value?.map((v, index) => {
2134
2167
  const name = getWithSelector(getOptionName, v);
@@ -2172,7 +2205,7 @@ const SelectionChipGroup = ({
2172
2205
  after: /*#__PURE__*/jsx(Icon, {
2173
2206
  icon: mdiClose
2174
2207
  }),
2175
- className: element$I('chip', [props?.className]),
2208
+ className: element$L('chip', [props?.className]),
2176
2209
  size: "s",
2177
2210
  ref: ref,
2178
2211
  onClick: onClick,
@@ -2187,74 +2220,722 @@ const SelectionChipGroup = ({
2187
2220
  });
2188
2221
  };
2189
2222
 
2190
- /**
2191
- * Comment block variants.
2192
- */
2193
- const CommentBlockVariant = {
2194
- indented: 'indented',
2195
- linear: 'linear'
2223
+ const ComboboxOptionContext = /*#__PURE__*/createContext({});
2224
+ /** Context Provider to store the current combobox option id. */
2225
+ const ComboboxOptionContextProvider = ({
2226
+ optionId,
2227
+ isKeyboardHighlighted,
2228
+ children
2229
+ }) => {
2230
+ const value = React__default.useMemo(() => ({
2231
+ optionId,
2232
+ isKeyboardHighlighted
2233
+ }), [optionId, isKeyboardHighlighted]);
2234
+ return /*#__PURE__*/jsx(ComboboxOptionContext.Provider, {
2235
+ value: value,
2236
+ children: children
2237
+ });
2196
2238
  };
2197
2239
 
2198
2240
  /**
2199
- * Defines the props of the component.
2241
+ * Retrieve the current combobox option id.
2242
+ * Must be used within a ComboboxOptionIdProvider
2200
2243
  */
2244
+ const useComboboxOptionContext = () => {
2245
+ const comboboxOption = useContext(ComboboxOptionContext);
2246
+ if (!comboboxOption?.optionId) {
2247
+ throw new Error('This hook must be used within a ComboboxOptionIdProvider');
2248
+ }
2249
+ return comboboxOption;
2250
+ };
2201
2251
 
2202
- /**
2203
- * Component display name.
2204
- */
2205
- const COMPONENT_NAME$15 = 'CommentBlock';
2252
+ /** Generate the combobox option id from the combobox id and the given id */
2253
+ const generateOptionId = (comboboxId, optionId) => `${comboboxId}-option-${optionId}`;
2206
2254
 
2207
- /**
2208
- * Component default class name and class prefix.
2209
- */
2210
- const CLASSNAME$13 = 'lumx-comment-block';
2211
- const {
2212
- block: block$V,
2213
- element: element$H
2214
- } = classNames.bem(CLASSNAME$13);
2255
+ /** Verifies that the combobox registered option is an action */
2256
+ const isComboboxAction = option => Boolean(option?.isAction);
2215
2257
 
2216
- /**
2217
- * Component default props.
2218
- */
2219
- const DEFAULT_PROPS$Y = {
2220
- variant: CommentBlockVariant.indented
2258
+ /** Verifies that the combobox registered option is the option's value */
2259
+ const isComboboxValue = option => {
2260
+ return !isComboboxAction(option);
2221
2261
  };
2222
2262
 
2223
- /**
2224
- * CommentBlock component.
2225
- *
2226
- * @param props Component props.
2227
- * @param ref Component ref.
2228
- * @return React element.
2229
- */
2230
- const CommentBlock = forwardRef((props, ref) => {
2231
- const defaultTheme = useTheme() || Theme$1.light;
2263
+ const comboboxId = `combobox-${uniqueId()}`;
2264
+ const initialState = {
2265
+ comboboxId,
2266
+ listboxId: `${comboboxId}-popover`,
2267
+ status: 'idle',
2268
+ isOpen: false,
2269
+ inputValue: '',
2270
+ showAll: true,
2271
+ options: {},
2272
+ type: 'listbox',
2273
+ optionsLength: 0
2274
+ };
2275
+
2276
+ /** Dispatch for the combobox component */
2277
+
2278
+ /** Context for the Combobox component */
2279
+ const ComboboxContext = /*#__PURE__*/React__default.createContext({
2280
+ ...initialState,
2281
+ openOnFocus: false,
2282
+ openOnClick: false,
2283
+ selectionType: 'single',
2284
+ optionsLength: 0,
2285
+ onSelect: noop,
2286
+ onInputChange: noop,
2287
+ onOpen: noop,
2288
+ dispatch: noop,
2289
+ translations: {
2290
+ clearLabel: '',
2291
+ tryReloadLabel: '',
2292
+ showSuggestionsLabel: '',
2293
+ noResultsForInputLabel: input => input || '',
2294
+ loadingLabel: '',
2295
+ serviceUnavailableLabel: '',
2296
+ nbOptionsLabel: options => `${options}`
2297
+ }
2298
+ });
2299
+
2300
+ /** Context for a combobox section to store its unique id */
2301
+ const SectionContext = /*#__PURE__*/React__default.createContext({
2302
+ sectionId: ''
2303
+ });
2304
+
2305
+ /** Context to store the refs of the combobox elements */
2306
+ const ComboboxRefsContext = /*#__PURE__*/createContext({
2307
+ triggerRef: {
2308
+ current: null
2309
+ },
2310
+ anchorRef: {
2311
+ current: null
2312
+ }
2313
+ });
2314
+
2315
+ /** Retrieves the combobox elements references from context */
2316
+ const useComboboxRefs = () => {
2317
+ const refs = useContext(ComboboxRefsContext);
2318
+ if (!refs) {
2319
+ throw new Error('The useComboboxRefs hook must be called within a ComboboxRefsProvider');
2320
+ }
2321
+ return refs;
2322
+ };
2323
+
2324
+ /** Retrieve the current combobox state and actions */
2325
+ const useCombobox = () => {
2326
+ const comboboxContext = React__default.useContext(ComboboxContext);
2232
2327
  const {
2233
- actions,
2234
- avatarProps,
2235
- children,
2236
- className,
2237
- date,
2238
- fullDate,
2239
- hasActions,
2240
- headerActions,
2241
- isOpen,
2242
- isRelevant,
2243
- name,
2244
- onClick,
2245
- onMouseEnter,
2246
- onMouseLeave,
2247
- text,
2248
- theme = defaultTheme,
2249
- variant = DEFAULT_PROPS$Y.variant,
2250
- ...forwardedProps
2251
- } = props;
2252
- const hasChildren = Children.count(children) > 0;
2253
- return /*#__PURE__*/jsxs("div", {
2254
- ref: ref,
2255
- className: classNames.join(className, block$V({
2256
- 'has-children': hasChildren && isOpen,
2257
- 'has-indented-children': hasChildren && variant === CommentBlockVariant.indented,
2328
+ dispatch: movingFocusDispatch
2329
+ } = React__default.useContext(MovingFocusContext);
2330
+ const {
2331
+ onSelect,
2332
+ onInputChange,
2333
+ onOpen,
2334
+ dispatch,
2335
+ inputValue,
2336
+ ...contextValues
2337
+ } = comboboxContext;
2338
+ const {
2339
+ triggerRef
2340
+ } = useComboboxRefs();
2341
+
2342
+ /** Action triggered when the listBox is closed without selecting any option */
2343
+ const handleClose = React__default.useCallback(() => {
2344
+ dispatch({
2345
+ type: 'CLOSE_COMBOBOX'
2346
+ });
2347
+ // Reset visual focus
2348
+ movingFocusDispatch({
2349
+ type: 'RESET_SELECTED_TAB_STOP'
2350
+ });
2351
+ }, [dispatch, movingFocusDispatch]);
2352
+
2353
+ // Handle callbacks on options mounted
2354
+ const [optionsMountedCallbacks, setOptionsMountedCallback] = React__default.useState();
2355
+ React__default.useEffect(() => {
2356
+ if (comboboxContext.optionsLength > 0 && optionsMountedCallbacks?.length) {
2357
+ const optionsArray = Object.values(comboboxContext.options);
2358
+ // Execute callbacks
2359
+ for (const callback of optionsMountedCallbacks) {
2360
+ callback(optionsArray);
2361
+ }
2362
+ setOptionsMountedCallback(undefined);
2363
+ }
2364
+ }, [comboboxContext.options, comboboxContext.optionsLength, optionsMountedCallbacks]);
2365
+
2366
+ /** Callback for when an option is selected */
2367
+ const handleSelected = React__default.useCallback((option, source) => {
2368
+ if (option?.isDisabled) {
2369
+ return;
2370
+ }
2371
+ if (isComboboxValue(option)) {
2372
+ /**
2373
+ * We only close the list if the selection type is single.
2374
+ * If it is multiple, we want to allow the user to continue
2375
+ * selecting multiple options.
2376
+ */
2377
+ if (comboboxContext.selectionType !== 'multiple') {
2378
+ handleClose();
2379
+ }
2380
+ /** Call parent onSelect callback */
2381
+ if (onSelect) {
2382
+ onSelect(option);
2383
+ }
2384
+ }
2385
+
2386
+ /** If the option itself has a custom action, also call it */
2387
+ if (option?.onSelect) {
2388
+ option.onSelect(option, source);
2389
+ }
2390
+
2391
+ /** Reset focus on input */
2392
+ if (triggerRef?.current) {
2393
+ triggerRef.current?.focus();
2394
+ }
2395
+ }, [comboboxContext.selectionType, handleClose, onSelect, triggerRef]);
2396
+
2397
+ /** Callback for when the input must be updated */
2398
+ const handleInputChange = React__default.useCallback((value, ...args) => {
2399
+ // Update the local state
2400
+ dispatch({
2401
+ type: 'SET_INPUT_VALUE',
2402
+ payload: value
2403
+ });
2404
+ // If a callback if given, call it with the value
2405
+ if (onInputChange) {
2406
+ onInputChange(value, ...args);
2407
+ }
2408
+ // Reset visual focus
2409
+ movingFocusDispatch({
2410
+ type: 'RESET_SELECTED_TAB_STOP'
2411
+ });
2412
+ }, [dispatch, movingFocusDispatch, onInputChange]);
2413
+
2414
+ /**
2415
+ * Open the popover
2416
+ *
2417
+ * @returns a promise with the updated context once all options are mounted
2418
+ */
2419
+ const handleOpen = React__default.useCallback(params => {
2420
+ /** update the local state */
2421
+ dispatch({
2422
+ type: 'OPEN_COMBOBOX',
2423
+ payload: params
2424
+ });
2425
+ /** If a parent callback was given, trigger it with state information */
2426
+ if (onOpen) {
2427
+ onOpen({
2428
+ currentValue: inputValue,
2429
+ manual: Boolean(params?.manual)
2430
+ });
2431
+ }
2432
+
2433
+ // Promise resolving options on mount
2434
+ return new Promise(resolve => {
2435
+ // Append to the list of callback on options mounted
2436
+ setOptionsMountedCallback((callbacks = []) => {
2437
+ callbacks.push(resolve);
2438
+ return callbacks;
2439
+ });
2440
+ });
2441
+ }, [dispatch, inputValue, onOpen]);
2442
+ return React__default.useMemo(() => ({
2443
+ handleClose,
2444
+ handleOpen,
2445
+ handleInputChange,
2446
+ handleSelected,
2447
+ dispatch,
2448
+ inputValue,
2449
+ ...contextValues
2450
+ }), [contextValues, dispatch, handleClose, handleInputChange, handleOpen, handleSelected, inputValue]);
2451
+ };
2452
+
2453
+ /** Retrieve the current combobox section id */
2454
+ const useComboboxSectionId = () => {
2455
+ return useContext(SectionContext);
2456
+ };
2457
+
2458
+ /**
2459
+ * Register the given option to the context
2460
+ */
2461
+ const useRegisterOption = (registerId, option, shouldRegister) => {
2462
+ const {
2463
+ dispatch
2464
+ } = useCombobox();
2465
+
2466
+ /** Register the given options */
2467
+ React__default.useEffect(() => {
2468
+ if (option && shouldRegister) {
2469
+ dispatch({
2470
+ type: 'ADD_OPTION',
2471
+ payload: {
2472
+ id: registerId,
2473
+ option
2474
+ }
2475
+ });
2476
+ }
2477
+
2478
+ // Unregister ids if/when the component unmounts or if option changes
2479
+ return () => {
2480
+ if (option) {
2481
+ dispatch({
2482
+ type: 'REMOVE_OPTION',
2483
+ payload: {
2484
+ id: registerId
2485
+ }
2486
+ });
2487
+ }
2488
+ };
2489
+ }, [dispatch, option, registerId, shouldRegister]);
2490
+ };
2491
+
2492
+ /* eslint-disable jsx-a11y/click-events-have-key-events */
2493
+ const COMBOBOX_OPTION_CLASSNAME = 'lumx-combobox-option';
2494
+ const LUMX_CLASSNAME = 'lumx-list-item';
2495
+ const {
2496
+ block: block$Y,
2497
+ element: element$K
2498
+ } = classNames.bem(COMBOBOX_OPTION_CLASSNAME);
2499
+ const lumxListItem = classNames.bem(LUMX_CLASSNAME);
2500
+
2501
+ /**
2502
+ * Content of the option.
2503
+ * This should only be rendered if the option is shown.
2504
+ */
2505
+ const OptionContent = forwardRef((props, ref) => {
2506
+ const {
2507
+ id,
2508
+ onSelect,
2509
+ isSelected,
2510
+ isDisabled,
2511
+ children,
2512
+ className,
2513
+ before,
2514
+ after,
2515
+ as,
2516
+ size = Size$1.tiny,
2517
+ comboboxType,
2518
+ tooltipProps,
2519
+ description,
2520
+ 'aria-hidden': ariaHidden,
2521
+ autofocus,
2522
+ ...forwardedProps
2523
+ } = props;
2524
+ const itemRef = React__default.useRef(null);
2525
+ const {
2526
+ state
2527
+ } = React__default.useContext(MovingFocusContext);
2528
+ const {
2529
+ selectedIds
2530
+ } = useCombobox();
2531
+ const hasSelection = selectedIds !== undefined;
2532
+ const isHighlighted = useVirtualFocus(id, itemRef, false, comboboxType === 'grid' ? id : undefined, autofocus);
2533
+ const Element = as || 'span';
2534
+ const ariaSelected = isSelected ? 'true' : 'false';
2535
+ const ariaDescriptionId = description ? `${id}-description` : undefined;
2536
+ const isKeyboardHighlighted = state.isUsingKeyboard && isHighlighted;
2537
+
2538
+ /**
2539
+ * The DS `ListItem` component has a lot of behavior / default props we do not want here.
2540
+ * Notably the before/after items are within the interactive element, which we do not want.
2541
+ * So we use a native li tag.
2542
+ */
2543
+ return /*#__PURE__*/jsx("li", {
2544
+ className: block$Y(undefined, [className ?? '', lumxListItem.block({
2545
+ [`size-${size}`]: !!size
2546
+ })]),
2547
+ role: "presentation",
2548
+ ref: itemRef,
2549
+ "aria-hidden": ariaHidden,
2550
+ style: {
2551
+ display: ariaHidden ? 'none' : undefined
2552
+ },
2553
+ ...forwardedProps,
2554
+ children: /*#__PURE__*/jsxs(GenericBlock, {
2555
+ as: "div",
2556
+ role: comboboxType === 'grid' ? 'row' : 'presentation',
2557
+ className: element$K('content', {
2558
+ // Not using the lumx list item disabled style as it blocks pointer events
2559
+ 'is-disabled': !!isDisabled
2560
+ },
2561
+ // TODO: migrate away from using lumx-list-item styles https://lumapps.atlassian.net/browse/DSW-288
2562
+ [lumxListItem.element('link', {
2563
+ 'is-selected': Boolean(isSelected),
2564
+ 'is-highlighted': Boolean(isHighlighted)
2565
+ })]),
2566
+ "data-focus-visible-added": isKeyboardHighlighted ? 'true' : undefined,
2567
+ children: [before && /*#__PURE__*/jsx(GenericBlock.Figure, {
2568
+ as: "span",
2569
+ role: "presentation",
2570
+ className: element$K('before', undefined, [lumxListItem.element('before')]),
2571
+ children: before
2572
+ }), /*#__PURE__*/jsxs(GenericBlock.Content, {
2573
+ as: "span",
2574
+ role: "presentation",
2575
+ className: lumxListItem.element('content'),
2576
+ children: [/*#__PURE__*/jsx(Tooltip, {
2577
+ forceOpen: isKeyboardHighlighted,
2578
+ closeMode: "hide",
2579
+ ...tooltipProps,
2580
+ children: /*#__PURE__*/jsx(Element, {
2581
+ id: id,
2582
+ className: element$K('trigger'),
2583
+ role: comboboxType === 'grid' ? 'gridcell' : 'option',
2584
+ "aria-selected": hasSelection ? ariaSelected : undefined,
2585
+ "aria-disabled": isDisabled,
2586
+ "aria-describedby": ariaDescriptionId,
2587
+ onClick: onSelect
2588
+ // Prevent mouse down to avoid blur before the click is activated
2589
+ ,
2590
+ onMouseDown: event => event.preventDefault(),
2591
+ ref: ref,
2592
+ ...forwardedProps,
2593
+ children: children
2594
+ })
2595
+ }), description && /*#__PURE__*/jsx(Text, {
2596
+ as: "span",
2597
+ id: ariaDescriptionId,
2598
+ role: "presentation",
2599
+ className: element$K('description'),
2600
+ typography: "caption",
2601
+ color: "dark",
2602
+ colorVariant: "L2",
2603
+ children: description
2604
+ })]
2605
+ }), after && /*#__PURE__*/jsx(GenericBlock.Actions, {
2606
+ as: "span",
2607
+ role: "presentation",
2608
+ className: element$K('after', undefined, [lumxListItem.element('after')]),
2609
+ children: /*#__PURE__*/jsx(ComboboxOptionContextProvider, {
2610
+ optionId: id,
2611
+ isKeyboardHighlighted: isKeyboardHighlighted,
2612
+ children: after
2613
+ })
2614
+ })]
2615
+ })
2616
+ });
2617
+ });
2618
+
2619
+ /**
2620
+ * Props for ComboboxOption with additional generic properties.
2621
+ */
2622
+
2623
+ /**
2624
+ * Option to set within a combobox list.
2625
+ *
2626
+ * @family Combobox
2627
+ * @param ComboboxOptionProps
2628
+ * @returns ComboboxOption
2629
+ */
2630
+ const ComboboxOption = forwardRef((props, ref) => {
2631
+ const {
2632
+ children,
2633
+ id,
2634
+ textValue,
2635
+ data,
2636
+ filterFromInput = true,
2637
+ onSelect: onOptionSelect,
2638
+ isDisabled,
2639
+ as = 'span',
2640
+ ...optionProps
2641
+ } = props;
2642
+
2643
+ // Get the id of the current group, if any.
2644
+ const section = useComboboxSectionId();
2645
+ const {
2646
+ comboboxId,
2647
+ selectedIds,
2648
+ showAll,
2649
+ inputValue,
2650
+ handleSelected,
2651
+ type
2652
+ } = useCombobox();
2653
+ // Generate a unique id for this option.
2654
+ const generatedId = generateOptionId(comboboxId, id);
2655
+ const isSelected = selectedIds?.includes(generatedId);
2656
+
2657
+ // If no text value is set and the direct child is a simple string, use it as value.
2658
+ const isStringChild = typeof children === 'string' || typeof children === 'number';
2659
+ const value = children && !textValue && isStringChild ? children.toString() : textValue;
2660
+ const showOption = !filterFromInput || showAll || value?.toString()?.toLowerCase().includes(inputValue?.toLowerCase());
2661
+ const registeredOption = React__default.useMemo(() => ({
2662
+ id,
2663
+ generatedId,
2664
+ textValue: value,
2665
+ data,
2666
+ filter: filterFromInput,
2667
+ isDisabled: isDisabled || !showOption,
2668
+ sectionId: section.sectionId,
2669
+ onSelect: onOptionSelect
2670
+ }), [data, filterFromInput, generatedId, section.sectionId, id, isDisabled, onOptionSelect, showOption, value]);
2671
+
2672
+ // Register the option
2673
+ useRegisterOption(generatedId, registeredOption, showOption);
2674
+ const handleSelect = React__default.useCallback(() => handleSelected(registeredOption, 'click'), [handleSelected, registeredOption]);
2675
+ if (!id || !showOption) {
2676
+ return null;
2677
+ }
2678
+ return /*#__PURE__*/jsx(OptionContent, {
2679
+ id: generatedId,
2680
+ onSelect: handleSelect,
2681
+ isSelected: isSelected,
2682
+ isDisabled: isDisabled,
2683
+ as: as,
2684
+ ref: ref,
2685
+ comboboxType: type,
2686
+ "aria-hidden": section.isLoading,
2687
+ ...optionProps,
2688
+ children: children || textValue
2689
+ });
2690
+ });
2691
+
2692
+ // Default widths the skeletons must have
2693
+ const defaultWidths = [REAL_SIZE_FOR_LUMX_SIZE.xxl, REAL_SIZE_FOR_LUMX_SIZE.xl, REAL_SIZE_FOR_LUMX_SIZE.l];
2694
+ const {
2695
+ block: block$X,
2696
+ element: element$J
2697
+ } = classNames.bem(COMBOBOX_OPTION_CLASSNAME);
2698
+
2699
+ /**
2700
+ * Skeleton for a combobox option.
2701
+ * A typography skeleton is rendered by default but can be overridden by passing children.
2702
+ */
2703
+ const ComboboxOptionSkeleton = ({
2704
+ className,
2705
+ index,
2706
+ before,
2707
+ after,
2708
+ size = Size$1.tiny,
2709
+ children
2710
+ }) => {
2711
+ const renderedChildren = typeof children === 'function' ? children({
2712
+ index
2713
+ }) : children;
2714
+ const content = renderedChildren || /*#__PURE__*/jsx(SkeletonTypography, {
2715
+ typography: "body1",
2716
+ width: index !== undefined && defaultWidths[index] ? defaultWidths[index] : REAL_SIZE_FOR_LUMX_SIZE.xl
2717
+ });
2718
+ return /*#__PURE__*/jsxs("li", {
2719
+ role: "presentation",
2720
+ className: block$X({
2721
+ skeleton: true
2722
+ }, ['lumx-list-item', `lumx-list-item--size-${size}`, className]),
2723
+ children: [/*#__PURE__*/jsxs("div", {
2724
+ role: "presentation",
2725
+ className: element$J('content', ['lumx-list-item__wrapper']),
2726
+ children: [before && /*#__PURE__*/jsx(Text, {
2727
+ as: "span",
2728
+ role: "presentation",
2729
+ className: element$J('before', ['lumx-list-item__before']),
2730
+ children: before
2731
+ }), content]
2732
+ }), after && /*#__PURE__*/jsx("div", {
2733
+ role: "presentation",
2734
+ className: element$J('after', ['lumx-list-item__after']),
2735
+ children: after
2736
+ })]
2737
+ });
2738
+ };
2739
+
2740
+ /**
2741
+ * Action to set on a Combobox Option.
2742
+ * Allows to add an interactive element that
2743
+ * can be navigated to and triggered using the keyboard.
2744
+ *
2745
+ * Defaults as "button"
2746
+ *
2747
+ * @family Combobox
2748
+ * @param ComboboxOptionActionProps
2749
+ * @returns ComboboxOptionAction
2750
+ */
2751
+ const ComboboxOptionAction = props => {
2752
+ const {
2753
+ as,
2754
+ isDisabled,
2755
+ onClick,
2756
+ id: originalId,
2757
+ ...forwardedProps
2758
+ } = props;
2759
+ const {
2760
+ optionId
2761
+ } = useComboboxOptionContext();
2762
+ const {
2763
+ triggerRef
2764
+ } = useComboboxRefs();
2765
+ const itemRef = React__default.useRef(null);
2766
+ const generatedId = useId();
2767
+ const id = originalId || generatedId;
2768
+ const isHighlighted = useVirtualFocus(id, itemRef, isDisabled, optionId);
2769
+ const {
2770
+ state
2771
+ } = React__default.useContext(MovingFocusContext);
2772
+ const Component = as || 'button';
2773
+ const registeredActionOption = React__default.useMemo(() => ({
2774
+ id,
2775
+ generatedId: id,
2776
+ isAction: true,
2777
+ isDisabled,
2778
+ onSelect: () => {
2779
+ itemRef.current?.click();
2780
+ }
2781
+ }), [id, isDisabled]);
2782
+
2783
+ // Register the option
2784
+ useRegisterOption(id, registeredActionOption, !isDisabled);
2785
+ const handleActionClick = React__default.useCallback(() => {
2786
+ if (onClick) {
2787
+ onClick();
2788
+ }
2789
+ if (triggerRef?.current) {
2790
+ triggerRef.current?.focus();
2791
+ }
2792
+ }, [triggerRef, onClick]);
2793
+ return /*#__PURE__*/jsx(Component, {
2794
+ ...forwardedProps,
2795
+ isDisabled: isDisabled,
2796
+ id: id,
2797
+ role: "gridcell",
2798
+ ref: itemRef,
2799
+ "data-focus-visible-added": state.isUsingKeyboard && isHighlighted ? 'true' : undefined,
2800
+ "aria-disabled": isDisabled,
2801
+ onClick: handleActionClick
2802
+ });
2803
+ };
2804
+
2805
+ const useBooleanState = defaultValue => {
2806
+ const [booleanValue, setBoolean] = useState(defaultValue);
2807
+ const setToFalse = useCallback(() => setBoolean(false), []);
2808
+ const setToTrue = useCallback(() => setBoolean(true), []);
2809
+ const toggleBoolean = useCallback(() => setBoolean(previousValue => !previousValue), []);
2810
+ return [booleanValue, setToFalse, setToTrue, toggleBoolean];
2811
+ };
2812
+
2813
+ const CLASSNAME$14 = 'lumx-combobox-option-more-info';
2814
+ const {
2815
+ block: block$W,
2816
+ element: element$I
2817
+ } = classNames.bem(CLASSNAME$14);
2818
+
2819
+ /**
2820
+ * Display more info on the option as a popover opening on mouse hover or keyboard nav
2821
+ * Please consider using a simpler option description instead for better UX and a11y.
2822
+ *
2823
+ * @family Combobox
2824
+ */
2825
+ const ComboboxOptionMoreInfo = ({
2826
+ buttonProps,
2827
+ popoverProps,
2828
+ onToggle,
2829
+ children
2830
+ }) => {
2831
+ const ref = React__default.useRef(null);
2832
+ const [isHovered,, onMouseLeave, onMouseEnter] = useBooleanState(false);
2833
+ const comboboxOption = useComboboxOptionContext();
2834
+
2835
+ // Open on mouse hover or key nav
2836
+ const isOpen = isHovered || comboboxOption.isKeyboardHighlighted;
2837
+ React__default.useEffect(() => {
2838
+ onToggle?.(isOpen);
2839
+ }, [isOpen, onToggle]);
2840
+ return /*#__PURE__*/jsxs(Fragment, {
2841
+ children: [/*#__PURE__*/jsx(IconButton, {
2842
+ ...buttonProps,
2843
+ ref: ref,
2844
+ className: block$W([buttonProps?.className]),
2845
+ icon: mdiInformationOutline,
2846
+ size: "s",
2847
+ emphasis: "low",
2848
+ onMouseEnter: onMouseEnter,
2849
+ onMouseLeave: onMouseLeave
2850
+ // Button actually plays no role here other than a target for the mouse hover
2851
+ // Keyboard accessibility is handled via combobox keyboard highlighting
2852
+ ,
2853
+ "aria-hidden": true,
2854
+ label: ""
2855
+ }), /*#__PURE__*/jsx(Popover, {
2856
+ ...popoverProps,
2857
+ className: element$I('popover', [popoverProps?.className]),
2858
+ anchorRef: ref,
2859
+ isOpen: isOpen,
2860
+ closeOnEscape: true,
2861
+ closeOnClickAway: true,
2862
+ placement: "bottom-start",
2863
+ children: children
2864
+ }), /*#__PURE__*/jsx(A11YLiveMessage, {
2865
+ hidden: true,
2866
+ children: isOpen ? children : undefined
2867
+ })]
2868
+ });
2869
+ };
2870
+
2871
+ /**
2872
+ * Comment block variants.
2873
+ */
2874
+ const CommentBlockVariant = {
2875
+ indented: 'indented',
2876
+ linear: 'linear'
2877
+ };
2878
+
2879
+ /**
2880
+ * Defines the props of the component.
2881
+ */
2882
+
2883
+ /**
2884
+ * Component display name.
2885
+ */
2886
+ const COMPONENT_NAME$14 = 'CommentBlock';
2887
+
2888
+ /**
2889
+ * Component default class name and class prefix.
2890
+ */
2891
+ const CLASSNAME$13 = 'lumx-comment-block';
2892
+ const {
2893
+ block: block$V,
2894
+ element: element$H
2895
+ } = classNames.bem(CLASSNAME$13);
2896
+
2897
+ /**
2898
+ * Component default props.
2899
+ */
2900
+ const DEFAULT_PROPS$Z = {
2901
+ variant: CommentBlockVariant.indented
2902
+ };
2903
+
2904
+ /**
2905
+ * CommentBlock component.
2906
+ *
2907
+ * @param props Component props.
2908
+ * @param ref Component ref.
2909
+ * @return React element.
2910
+ */
2911
+ const CommentBlock = forwardRef((props, ref) => {
2912
+ const defaultTheme = useTheme() || Theme$1.light;
2913
+ const {
2914
+ actions,
2915
+ avatarProps,
2916
+ children,
2917
+ className,
2918
+ date,
2919
+ fullDate,
2920
+ hasActions,
2921
+ headerActions,
2922
+ isOpen,
2923
+ isRelevant,
2924
+ name,
2925
+ onClick,
2926
+ onMouseEnter,
2927
+ onMouseLeave,
2928
+ text,
2929
+ theme = defaultTheme,
2930
+ variant = DEFAULT_PROPS$Z.variant,
2931
+ ...forwardedProps
2932
+ } = props;
2933
+ const hasChildren = Children.count(children) > 0;
2934
+ return /*#__PURE__*/jsxs("div", {
2935
+ ref: ref,
2936
+ className: classNames.join(className, block$V({
2937
+ 'has-children': hasChildren && isOpen,
2938
+ 'has-indented-children': hasChildren && variant === CommentBlockVariant.indented,
2258
2939
  'has-linear-children': hasChildren && variant === CommentBlockVariant.linear,
2259
2940
  'is-relevant': isRelevant,
2260
2941
  [`theme-${theme}`]: Boolean(theme)
@@ -2313,9 +2994,9 @@ const CommentBlock = forwardRef((props, ref) => {
2313
2994
  })]
2314
2995
  });
2315
2996
  });
2316
- CommentBlock.displayName = COMPONENT_NAME$15;
2997
+ CommentBlock.displayName = COMPONENT_NAME$14;
2317
2998
  CommentBlock.className = CLASSNAME$13;
2318
- CommentBlock.defaultProps = DEFAULT_PROPS$Y;
2999
+ CommentBlock.defaultProps = DEFAULT_PROPS$Z;
2319
3000
 
2320
3001
  /**
2321
3002
  * Add a number of months from a date while resetting the day to prevent month length mismatches.
@@ -2335,7 +3016,7 @@ const isDateValid = date => date instanceof Date && !Number.isNaN(date.getTime()
2335
3016
  /**
2336
3017
  * Component display name.
2337
3018
  */
2338
- const COMPONENT_NAME$14 = 'DatePicker';
3019
+ const COMPONENT_NAME$13 = 'DatePicker';
2339
3020
 
2340
3021
  /**
2341
3022
  * Component default class name and class prefix.
@@ -2569,7 +3250,7 @@ const {
2569
3250
  /**
2570
3251
  * Component display name.
2571
3252
  */
2572
- const COMPONENT_NAME$13 = 'DatePickerControlled';
3253
+ const COMPONENT_NAME$12 = 'DatePickerControlled';
2573
3254
 
2574
3255
  /**
2575
3256
  * DatePickerControlled component.
@@ -2759,7 +3440,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
2759
3440
  })]
2760
3441
  });
2761
3442
  });
2762
- DatePickerControlled.displayName = COMPONENT_NAME$13;
3443
+ DatePickerControlled.displayName = COMPONENT_NAME$12;
2763
3444
  DatePickerControlled.className = CLASSNAME$12;
2764
3445
 
2765
3446
  /**
@@ -2802,21 +3483,13 @@ const DatePicker = forwardRef((props, ref) => {
2802
3483
  onMonthChange: setSelectedMonth
2803
3484
  });
2804
3485
  });
2805
- DatePicker.displayName = COMPONENT_NAME$14;
3486
+ DatePicker.displayName = COMPONENT_NAME$13;
2806
3487
  DatePicker.className = CLASSNAME$12;
2807
3488
 
2808
- const useBooleanState = defaultValue => {
2809
- const [booleanValue, setBoolean] = useState(defaultValue);
2810
- const setToFalse = useCallback(() => setBoolean(false), []);
2811
- const setToTrue = useCallback(() => setBoolean(true), []);
2812
- const toggleBoolean = useCallback(() => setBoolean(previousValue => !previousValue), []);
2813
- return [booleanValue, setToFalse, setToTrue, toggleBoolean];
2814
- };
2815
-
2816
3489
  /**
2817
3490
  * Component display name.
2818
3491
  */
2819
- const COMPONENT_NAME$12 = 'DatePickerField';
3492
+ const COMPONENT_NAME$11 = 'DatePickerField';
2820
3493
 
2821
3494
  /**
2822
3495
  * DatePickerField component.
@@ -2905,7 +3578,7 @@ const DatePickerField = forwardRef((props, ref) => {
2905
3578
  }) : null]
2906
3579
  });
2907
3580
  });
2908
- DatePickerField.displayName = COMPONENT_NAME$12;
3581
+ DatePickerField.displayName = COMPONENT_NAME$11;
2909
3582
 
2910
3583
  /**
2911
3584
  * Optional global `window` instance (not defined when running SSR).
@@ -3406,7 +4079,7 @@ const isFooter$1 = isComponent('footer');
3406
4079
  /**
3407
4080
  * Component display name.
3408
4081
  */
3409
- const COMPONENT_NAME$11 = 'Dialog';
4082
+ const COMPONENT_NAME$10 = 'Dialog';
3410
4083
 
3411
4084
  /**
3412
4085
  * Component default class name and class prefix.
@@ -3420,7 +4093,7 @@ const {
3420
4093
  /**
3421
4094
  * Component default props.
3422
4095
  */
3423
- const DEFAULT_PROPS$X = {
4096
+ const DEFAULT_PROPS$Y = {
3424
4097
  size: Size$1.big,
3425
4098
  disableBodyScroll: true
3426
4099
  };
@@ -3451,11 +4124,11 @@ const Dialog = forwardRef((props, ref) => {
3451
4124
  parentElement,
3452
4125
  contentRef,
3453
4126
  preventAutoClose,
3454
- size = DEFAULT_PROPS$X.size,
4127
+ size = DEFAULT_PROPS$Y.size,
3455
4128
  zIndex,
3456
4129
  dialogProps,
3457
4130
  onVisibilityChange,
3458
- disableBodyScroll = DEFAULT_PROPS$X.disableBodyScroll,
4131
+ disableBodyScroll = DEFAULT_PROPS$Y.disableBodyScroll,
3459
4132
  preventCloseOnClick,
3460
4133
  preventCloseOnEscape,
3461
4134
  ...forwardedProps
@@ -3593,14 +4266,14 @@ const Dialog = forwardRef((props, ref) => {
3593
4266
  })
3594
4267
  }) : null;
3595
4268
  });
3596
- Dialog.displayName = COMPONENT_NAME$11;
4269
+ Dialog.displayName = COMPONENT_NAME$10;
3597
4270
  Dialog.className = CLASSNAME$11;
3598
- Dialog.defaultProps = DEFAULT_PROPS$X;
4271
+ Dialog.defaultProps = DEFAULT_PROPS$Y;
3599
4272
 
3600
4273
  /**
3601
4274
  * Component display name.
3602
4275
  */
3603
- const COMPONENT_NAME$10 = 'Divider';
4276
+ const COMPONENT_NAME$$ = 'Divider';
3604
4277
 
3605
4278
  /**
3606
4279
  * Component default class name and class prefix.
@@ -3639,7 +4312,7 @@ const Divider$1 = props => {
3639
4312
  /**
3640
4313
  * Component default props.
3641
4314
  */
3642
- const DEFAULT_PROPS$W = {};
4315
+ const DEFAULT_PROPS$X = {};
3643
4316
 
3644
4317
  /**
3645
4318
  * Divider component.
@@ -3660,14 +4333,14 @@ const Divider = forwardRef((props, ref) => {
3660
4333
  ...otherProps
3661
4334
  });
3662
4335
  });
3663
- Divider.displayName = COMPONENT_NAME$10;
4336
+ Divider.displayName = COMPONENT_NAME$$;
3664
4337
  Divider.className = CLASSNAME$10;
3665
- Divider.defaultProps = DEFAULT_PROPS$W;
4338
+ Divider.defaultProps = DEFAULT_PROPS$X;
3666
4339
 
3667
4340
  /**
3668
4341
  * Component display name.
3669
4342
  */
3670
- const COMPONENT_NAME$$ = 'DragHandle';
4343
+ const COMPONENT_NAME$_ = 'DragHandle';
3671
4344
 
3672
4345
  /**
3673
4346
  * Component default class name and class prefix.
@@ -3704,7 +4377,7 @@ const DragHandle = forwardRef((props, ref) => {
3704
4377
  })
3705
4378
  });
3706
4379
  });
3707
- DragHandle.displayName = COMPONENT_NAME$$;
4380
+ DragHandle.displayName = COMPONENT_NAME$_;
3708
4381
  DragHandle.className = CLASSNAME$$;
3709
4382
 
3710
4383
  const INITIAL_INDEX = -1;
@@ -3874,7 +4547,7 @@ const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNav
3874
4547
  /**
3875
4548
  * Component display name.
3876
4549
  */
3877
- const COMPONENT_NAME$_ = 'List';
4550
+ const COMPONENT_NAME$Z = 'List';
3878
4551
 
3879
4552
  /**
3880
4553
  * Component default class name and class prefix.
@@ -3887,7 +4560,7 @@ const {
3887
4560
  /**
3888
4561
  * Component default props.
3889
4562
  */
3890
- const DEFAULT_PROPS$V = {
4563
+ const DEFAULT_PROPS$W = {
3891
4564
  tabIndex: -1
3892
4565
  };
3893
4566
 
@@ -3906,7 +4579,7 @@ const InternalList = forwardRef((props, ref) => {
3906
4579
  isClickable,
3907
4580
  itemPadding,
3908
4581
  onListItemSelected,
3909
- tabIndex = DEFAULT_PROPS$V.tabIndex,
4582
+ tabIndex = DEFAULT_PROPS$W.tabIndex,
3910
4583
  ...forwardedProps
3911
4584
  } = props;
3912
4585
  const adjustedItemPadding = itemPadding ?? (isClickable ? Size$1.big : undefined);
@@ -3920,9 +4593,9 @@ const InternalList = forwardRef((props, ref) => {
3920
4593
  children: children
3921
4594
  });
3922
4595
  });
3923
- InternalList.displayName = COMPONENT_NAME$_;
4596
+ InternalList.displayName = COMPONENT_NAME$Z;
3924
4597
  InternalList.className = CLASSNAME$_;
3925
- InternalList.defaultProps = DEFAULT_PROPS$V;
4598
+ InternalList.defaultProps = DEFAULT_PROPS$W;
3926
4599
  const List = Object.assign(InternalList, {
3927
4600
  useKeyboardListNavigation
3928
4601
  });
@@ -6353,7 +7026,7 @@ function usePopoverStyle({
6353
7026
  /**
6354
7027
  * Component display name.
6355
7028
  */
6356
- const COMPONENT_NAME$Z = 'Popover';
7029
+ const COMPONENT_NAME$Y = 'Popover';
6357
7030
 
6358
7031
  /**
6359
7032
  * Component default class name and class prefix.
@@ -6367,7 +7040,7 @@ const {
6367
7040
  /**
6368
7041
  * Component default props.
6369
7042
  */
6370
- const DEFAULT_PROPS$U = {
7043
+ const DEFAULT_PROPS$V = {
6371
7044
  elevation: 3,
6372
7045
  placement: Placement.AUTO,
6373
7046
  focusAnchorOnClose: true,
@@ -6384,24 +7057,24 @@ const _InnerPopover = forwardRef((props, ref) => {
6384
7057
  className,
6385
7058
  closeOnClickAway,
6386
7059
  closeOnEscape,
6387
- elevation = DEFAULT_PROPS$U.elevation,
7060
+ elevation = DEFAULT_PROPS$V.elevation,
6388
7061
  focusElement,
6389
7062
  hasArrow,
6390
7063
  isOpen,
6391
7064
  onClose,
6392
7065
  parentElement,
6393
- usePortal = DEFAULT_PROPS$U.usePortal,
6394
- focusAnchorOnClose = DEFAULT_PROPS$U.focusAnchorOnClose,
7066
+ usePortal = DEFAULT_PROPS$V.usePortal,
7067
+ focusAnchorOnClose = DEFAULT_PROPS$V.focusAnchorOnClose,
6395
7068
  withFocusTrap,
6396
7069
  boundaryRef,
6397
7070
  fitToAnchorWidth,
6398
7071
  fitWithinViewportHeight,
6399
7072
  focusTrapZoneElement,
6400
7073
  offset,
6401
- placement = DEFAULT_PROPS$U.placement,
7074
+ placement = DEFAULT_PROPS$V.placement,
6402
7075
  style,
6403
7076
  theme,
6404
- zIndex = DEFAULT_PROPS$U.zIndex,
7077
+ zIndex = DEFAULT_PROPS$V.zIndex,
6405
7078
  ...forwardedProps
6406
7079
  } = props;
6407
7080
  const popoverRef = useRef(null);
@@ -6473,7 +7146,7 @@ const _InnerPopover = forwardRef((props, ref) => {
6473
7146
  })
6474
7147
  }) : null;
6475
7148
  });
6476
- _InnerPopover.displayName = COMPONENT_NAME$Z;
7149
+ _InnerPopover.displayName = COMPONENT_NAME$Y;
6477
7150
 
6478
7151
  /**
6479
7152
  * Popover component.
@@ -6485,9 +7158,9 @@ _InnerPopover.displayName = COMPONENT_NAME$Z;
6485
7158
  const Popover = skipRender(
6486
7159
  // Skip render in SSR
6487
7160
  () => Boolean(DOCUMENT), _InnerPopover);
6488
- Popover.displayName = COMPONENT_NAME$Z;
7161
+ Popover.displayName = COMPONENT_NAME$Y;
6489
7162
  Popover.className = CLASSNAME$Z;
6490
- Popover.defaultProps = DEFAULT_PROPS$U;
7163
+ Popover.defaultProps = DEFAULT_PROPS$V;
6491
7164
 
6492
7165
  // The error margin in px we want to have for triggering infinite scroll
6493
7166
  const SCROLL_TRIGGER_MARGIN = 5;
@@ -6533,7 +7206,7 @@ const useInfiniteScroll = (ref, callback, callbackOnMount = false, scrollTrigger
6533
7206
  /**
6534
7207
  * Component display name.
6535
7208
  */
6536
- const COMPONENT_NAME$Y = 'Dropdown';
7209
+ const COMPONENT_NAME$X = 'Dropdown';
6537
7210
 
6538
7211
  /**
6539
7212
  * Component default class name and class prefix.
@@ -6547,7 +7220,7 @@ const {
6547
7220
  /**
6548
7221
  * Component default props.
6549
7222
  */
6550
- const DEFAULT_PROPS$T = {
7223
+ const DEFAULT_PROPS$U = {
6551
7224
  closeOnClick: true,
6552
7225
  closeOnClickAway: true,
6553
7226
  closeOnEscape: true,
@@ -6570,18 +7243,18 @@ const Dropdown = forwardRef((props, ref) => {
6570
7243
  anchorRef,
6571
7244
  children,
6572
7245
  className,
6573
- closeOnClick = DEFAULT_PROPS$T.closeOnClick,
6574
- closeOnClickAway = DEFAULT_PROPS$T.closeOnClickAway,
6575
- closeOnEscape = DEFAULT_PROPS$T.closeOnEscape,
6576
- fitToAnchorWidth = DEFAULT_PROPS$T.fitToAnchorWidth,
6577
- fitWithinViewportHeight = DEFAULT_PROPS$T.fitWithinViewportHeight,
7246
+ closeOnClick = DEFAULT_PROPS$U.closeOnClick,
7247
+ closeOnClickAway = DEFAULT_PROPS$U.closeOnClickAway,
7248
+ closeOnEscape = DEFAULT_PROPS$U.closeOnEscape,
7249
+ fitToAnchorWidth = DEFAULT_PROPS$U.fitToAnchorWidth,
7250
+ fitWithinViewportHeight = DEFAULT_PROPS$U.fitWithinViewportHeight,
6578
7251
  isOpen,
6579
7252
  offset,
6580
- focusAnchorOnClose = DEFAULT_PROPS$T.focusAnchorOnClose,
7253
+ focusAnchorOnClose = DEFAULT_PROPS$U.focusAnchorOnClose,
6581
7254
  onClose,
6582
7255
  onInfiniteScroll,
6583
- placement = DEFAULT_PROPS$T.placement,
6584
- shouldFocusOnOpen = DEFAULT_PROPS$T.shouldFocusOnOpen,
7256
+ placement = DEFAULT_PROPS$U.placement,
7257
+ shouldFocusOnOpen = DEFAULT_PROPS$U.shouldFocusOnOpen,
6585
7258
  zIndex,
6586
7259
  ...forwardedProps
6587
7260
  } = props;
@@ -6625,14 +7298,14 @@ const Dropdown = forwardRef((props, ref) => {
6625
7298
  })
6626
7299
  }) : null;
6627
7300
  });
6628
- Dropdown.displayName = COMPONENT_NAME$Y;
7301
+ Dropdown.displayName = COMPONENT_NAME$X;
6629
7302
  Dropdown.className = CLASSNAME$Y;
6630
- Dropdown.defaultProps = DEFAULT_PROPS$T;
7303
+ Dropdown.defaultProps = DEFAULT_PROPS$U;
6631
7304
 
6632
7305
  /**
6633
7306
  * Component display name.
6634
7307
  */
6635
- const COMPONENT_NAME$X = 'ExpansionPanel';
7308
+ const COMPONENT_NAME$W = 'ExpansionPanel';
6636
7309
 
6637
7310
  /**
6638
7311
  * Component default class name and class prefix.
@@ -6646,7 +7319,7 @@ const {
6646
7319
  /**
6647
7320
  * Component default props.
6648
7321
  */
6649
- const DEFAULT_PROPS$S = {
7322
+ const DEFAULT_PROPS$T = {
6650
7323
  closeMode: 'unmount'
6651
7324
  };
6652
7325
  const isDragHandle = isComponent(DragHandle);
@@ -6664,7 +7337,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
6664
7337
  const defaultTheme = useTheme() || Theme$1.light;
6665
7338
  const {
6666
7339
  className,
6667
- closeMode = DEFAULT_PROPS$S.closeMode,
7340
+ closeMode = DEFAULT_PROPS$T.closeMode,
6668
7341
  children: anyChildren,
6669
7342
  hasBackground,
6670
7343
  hasHeaderDivider,
@@ -6779,13 +7452,13 @@ const ExpansionPanel = forwardRef((props, ref) => {
6779
7452
  })]
6780
7453
  });
6781
7454
  });
6782
- ExpansionPanel.displayName = COMPONENT_NAME$X;
7455
+ ExpansionPanel.displayName = COMPONENT_NAME$W;
6783
7456
  ExpansionPanel.className = CLASSNAME$X;
6784
- ExpansionPanel.defaultProps = DEFAULT_PROPS$S;
7457
+ ExpansionPanel.defaultProps = DEFAULT_PROPS$T;
6785
7458
 
6786
- const COMPONENT_NAME$W = 'Flag';
7459
+ const COMPONENT_NAME$V = 'Flag';
6787
7460
  const CLASSNAME$W = 'lumx-flag';
6788
- const DEFAULT_PROPS$R = {};
7461
+ const DEFAULT_PROPS$S = {};
6789
7462
  const {
6790
7463
  block: block$N,
6791
7464
  element: element$B
@@ -6847,9 +7520,9 @@ const Flag = forwardRef((props, ref) => {
6847
7520
  Text
6848
7521
  });
6849
7522
  });
6850
- Flag.displayName = COMPONENT_NAME$W;
7523
+ Flag.displayName = COMPONENT_NAME$V;
6851
7524
  Flag.className = CLASSNAME$W;
6852
- Flag.defaultProps = DEFAULT_PROPS$R;
7525
+ Flag.defaultProps = DEFAULT_PROPS$S;
6853
7526
 
6854
7527
  /**
6855
7528
  * Defines the props of the component.
@@ -6858,7 +7531,7 @@ Flag.defaultProps = DEFAULT_PROPS$R;
6858
7531
  /**
6859
7532
  * Component display name.
6860
7533
  */
6861
- const COMPONENT_NAME$V = 'FlexBox';
7534
+ const COMPONENT_NAME$U = 'FlexBox';
6862
7535
 
6863
7536
  /**
6864
7537
  * Component default class name and class prefix.
@@ -6922,13 +7595,13 @@ const FlexBox = forwardRef((props, ref) => {
6922
7595
  children: children
6923
7596
  });
6924
7597
  });
6925
- FlexBox.displayName = COMPONENT_NAME$V;
7598
+ FlexBox.displayName = COMPONENT_NAME$U;
6926
7599
  FlexBox.className = CLASSNAME$V;
6927
7600
 
6928
7601
  /**
6929
7602
  * Component display name.
6930
7603
  */
6931
- const COMPONENT_NAME$U = 'GenericBlock';
7604
+ const COMPONENT_NAME$T = 'GenericBlock';
6932
7605
 
6933
7606
  /**
6934
7607
  * Component default class name and class prefix.
@@ -6942,7 +7615,7 @@ const {
6942
7615
  /**
6943
7616
  * Component default props.
6944
7617
  */
6945
- const DEFAULT_PROPS$Q = {
7618
+ const DEFAULT_PROPS$R = {
6946
7619
  gap: Size$1.big,
6947
7620
  orientation: Orientation$1.horizontal
6948
7621
  };
@@ -6972,8 +7645,8 @@ const BaseGenericBlock = forwardRef((props, ref) => {
6972
7645
  children,
6973
7646
  actions,
6974
7647
  actionsProps,
6975
- gap = DEFAULT_PROPS$Q.gap,
6976
- orientation = DEFAULT_PROPS$Q.orientation,
7648
+ gap = DEFAULT_PROPS$R.gap,
7649
+ orientation = DEFAULT_PROPS$R.orientation,
6977
7650
  contentProps,
6978
7651
  ...forwardedProps
6979
7652
  } = props;
@@ -7025,9 +7698,9 @@ const BaseGenericBlock = forwardRef((props, ref) => {
7025
7698
  })]
7026
7699
  });
7027
7700
  });
7028
- BaseGenericBlock.displayName = COMPONENT_NAME$U;
7701
+ BaseGenericBlock.displayName = COMPONENT_NAME$T;
7029
7702
  BaseGenericBlock.className = CLASSNAME$U;
7030
- BaseGenericBlock.defaultProps = DEFAULT_PROPS$Q;
7703
+ BaseGenericBlock.defaultProps = DEFAULT_PROPS$R;
7031
7704
  const GenericBlock = Object.assign(BaseGenericBlock, {
7032
7705
  Figure,
7033
7706
  Content,
@@ -7065,7 +7738,7 @@ const defaultContext = {
7065
7738
  /**
7066
7739
  * Component display name.
7067
7740
  */
7068
- const COMPONENT_NAME$T = 'Heading';
7741
+ const COMPONENT_NAME$S = 'Heading';
7069
7742
 
7070
7743
  /**
7071
7744
  * Component default class name and class prefix.
@@ -7075,7 +7748,7 @@ const CLASSNAME$T = 'lumx-heading';
7075
7748
  /**
7076
7749
  * Component default props.
7077
7750
  */
7078
- const DEFAULT_PROPS$P = {};
7751
+ const DEFAULT_PROPS$Q = {};
7079
7752
 
7080
7753
  /**
7081
7754
  * Get Heading component common props
@@ -7163,7 +7836,7 @@ function wrapChildrenIconWithSpaces(children) {
7163
7836
  /**
7164
7837
  * Component display name.
7165
7838
  */
7166
- const COMPONENT_NAME$S = 'Text';
7839
+ const COMPONENT_NAME$R = 'Text';
7167
7840
 
7168
7841
  /**
7169
7842
  * Component default class name and class prefix.
@@ -7176,7 +7849,7 @@ const {
7176
7849
  /**
7177
7850
  * Component default props.
7178
7851
  */
7179
- const DEFAULT_PROPS$O = {};
7852
+ const DEFAULT_PROPS$P = {};
7180
7853
 
7181
7854
  /**
7182
7855
  * Text component common props
@@ -7261,9 +7934,9 @@ const Text = forwardRef((props, ref) => {
7261
7934
  children: wrapChildrenIconWithSpaces(children)
7262
7935
  });
7263
7936
  });
7264
- Text.displayName = COMPONENT_NAME$S;
7937
+ Text.displayName = COMPONENT_NAME$R;
7265
7938
  Text.className = CLASSNAME$S;
7266
- Text.defaultProps = DEFAULT_PROPS$O;
7939
+ Text.defaultProps = DEFAULT_PROPS$P;
7267
7940
 
7268
7941
  const HeadingLevelContext = /*#__PURE__*/createContext(defaultContext);
7269
7942
 
@@ -7298,9 +7971,9 @@ const Heading = forwardRef((props, ref) => {
7298
7971
  children: children
7299
7972
  });
7300
7973
  });
7301
- Heading.displayName = COMPONENT_NAME$T;
7974
+ Heading.displayName = COMPONENT_NAME$S;
7302
7975
  Heading.className = CLASSNAME$T;
7303
- Heading.defaultProps = DEFAULT_PROPS$P;
7976
+ Heading.defaultProps = DEFAULT_PROPS$Q;
7304
7977
 
7305
7978
  /**
7306
7979
  * Computes the next heading level based on the optional prop level or the parent context level.
@@ -7338,7 +8011,7 @@ const HeadingLevelProvider = ({
7338
8011
  /**
7339
8012
  * Component display name.
7340
8013
  */
7341
- const COMPONENT_NAME$R = 'Grid';
8014
+ const COMPONENT_NAME$Q = 'Grid';
7342
8015
 
7343
8016
  /**
7344
8017
  * Component default class name and class prefix.
@@ -7351,7 +8024,7 @@ const {
7351
8024
  /**
7352
8025
  * Component default props.
7353
8026
  */
7354
- const DEFAULT_PROPS$N = {
8027
+ const DEFAULT_PROPS$O = {
7355
8028
  orientation: Orientation$1.horizontal,
7356
8029
  wrap: 'nowrap'
7357
8030
  };
@@ -7369,9 +8042,9 @@ const Grid = forwardRef((props, ref) => {
7369
8042
  className,
7370
8043
  gutter,
7371
8044
  hAlign,
7372
- orientation = DEFAULT_PROPS$N.orientation,
8045
+ orientation = DEFAULT_PROPS$O.orientation,
7373
8046
  vAlign,
7374
- wrap = DEFAULT_PROPS$N.wrap,
8047
+ wrap = DEFAULT_PROPS$O.wrap,
7375
8048
  ...forwardedProps
7376
8049
  } = props;
7377
8050
  return /*#__PURE__*/jsx("div", {
@@ -7387,14 +8060,14 @@ const Grid = forwardRef((props, ref) => {
7387
8060
  children: children
7388
8061
  });
7389
8062
  });
7390
- Grid.displayName = COMPONENT_NAME$R;
8063
+ Grid.displayName = COMPONENT_NAME$Q;
7391
8064
  Grid.className = CLASSNAME$R;
7392
- Grid.defaultProps = DEFAULT_PROPS$N;
8065
+ Grid.defaultProps = DEFAULT_PROPS$O;
7393
8066
 
7394
8067
  /**
7395
8068
  * Component display name.
7396
8069
  */
7397
- const COMPONENT_NAME$Q = 'GridItem';
8070
+ const COMPONENT_NAME$P = 'GridItem';
7398
8071
 
7399
8072
  /**
7400
8073
  * Component default class name and class prefix.
@@ -7431,13 +8104,13 @@ const GridItem = forwardRef((props, ref) => {
7431
8104
  children: children
7432
8105
  });
7433
8106
  });
7434
- GridItem.displayName = COMPONENT_NAME$Q;
8107
+ GridItem.displayName = COMPONENT_NAME$P;
7435
8108
  GridItem.className = CLASSNAME$Q;
7436
8109
 
7437
8110
  /**
7438
8111
  * Component display name.
7439
8112
  */
7440
- const COMPONENT_NAME$P = 'GridColumn';
8113
+ const COMPONENT_NAME$O = 'GridColumn';
7441
8114
 
7442
8115
  /**
7443
8116
  * Component default class name and class prefix.
@@ -7447,7 +8120,7 @@ const CLASSNAME$P = 'lumx-grid-column';
7447
8120
  /**
7448
8121
  * Component default props.
7449
8122
  */
7450
- const DEFAULT_PROPS$M = {};
8123
+ const DEFAULT_PROPS$N = {};
7451
8124
 
7452
8125
  /**
7453
8126
  * The GridColumn is a layout component that can display children in a grid
@@ -7455,10 +8128,9 @@ const DEFAULT_PROPS$M = {};
7455
8128
  * with a number of column that reduce when there is not enough space for each item.
7456
8129
  *
7457
8130
  * @param props Component props.
7458
- * @param ref Component ref.
7459
- * @return React element.
8131
+ * @return JSX element.
7460
8132
  */
7461
- const GridColumn = forwardRef((props, ref) => {
8133
+ const GridColumn$1 = props => {
7462
8134
  const {
7463
8135
  as: Component = 'div',
7464
8136
  gap,
@@ -7467,12 +8139,13 @@ const GridColumn = forwardRef((props, ref) => {
7467
8139
  children,
7468
8140
  className,
7469
8141
  style = {},
8142
+ ref,
7470
8143
  ...forwardedProps
7471
8144
  } = props;
7472
8145
  return /*#__PURE__*/jsx(Component, {
7473
8146
  ...forwardedProps,
7474
8147
  ref: ref,
7475
- className: classNames.join(className, CLASSNAME$P),
8148
+ className: classnames(className, CLASSNAME$P),
7476
8149
  style: {
7477
8150
  ...style,
7478
8151
  ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
@@ -7481,8 +8154,38 @@ const GridColumn = forwardRef((props, ref) => {
7481
8154
  },
7482
8155
  children: children
7483
8156
  });
8157
+ };
8158
+ GridColumn$1.displayName = COMPONENT_NAME$O;
8159
+ GridColumn$1.className = CLASSNAME$P;
8160
+ GridColumn$1.defaultProps = DEFAULT_PROPS$N;
8161
+
8162
+ /**
8163
+ * Defines the props of the component.
8164
+ */
8165
+
8166
+ // Re-export types for backward compatibility
8167
+
8168
+ /**
8169
+ * Component default props.
8170
+ */
8171
+ const DEFAULT_PROPS$M = {};
8172
+
8173
+ /**
8174
+ * The GridColumn is a layout component that can display children in a grid
8175
+ * with custom display properties. It also comes with a responsive design,
8176
+ * with a number of column that reduce when there is not enough space for each item.
8177
+ *
8178
+ * @param props Component props.
8179
+ * @param ref Component ref.
8180
+ * @return React element.
8181
+ */
8182
+ const GridColumn = forwardRef((props, ref) => {
8183
+ return GridColumn$1({
8184
+ ref,
8185
+ ...props
8186
+ });
7484
8187
  });
7485
- GridColumn.displayName = COMPONENT_NAME$P;
8188
+ GridColumn.displayName = COMPONENT_NAME$O;
7486
8189
  GridColumn.className = CLASSNAME$P;
7487
8190
  GridColumn.defaultProps = DEFAULT_PROPS$M;
7488
8191
 
@@ -7588,7 +8291,7 @@ const ImageBlockCaptionPosition = {
7588
8291
  /**
7589
8292
  * Component display name.
7590
8293
  */
7591
- const COMPONENT_NAME$O = 'ImageBlock';
8294
+ const COMPONENT_NAME$N = 'ImageBlock';
7592
8295
 
7593
8296
  /**
7594
8297
  * Component default class name and class prefix.
@@ -7672,14 +8375,14 @@ const ImageBlock = forwardRef((props, ref) => {
7672
8375
  })]
7673
8376
  });
7674
8377
  });
7675
- ImageBlock.displayName = COMPONENT_NAME$O;
8378
+ ImageBlock.displayName = COMPONENT_NAME$N;
7676
8379
  ImageBlock.className = CLASSNAME$O;
7677
8380
  ImageBlock.defaultProps = DEFAULT_PROPS$L;
7678
8381
 
7679
8382
  /**
7680
8383
  * Component display name.
7681
8384
  */
7682
- const COMPONENT_NAME$N = 'ImageLightbox';
8385
+ const COMPONENT_NAME$M = 'ImageLightbox';
7683
8386
 
7684
8387
  /**
7685
8388
  * Component default class name and class prefix.
@@ -8403,7 +9106,7 @@ const Inner = forwardRef((props, ref) => {
8403
9106
  })
8404
9107
  });
8405
9108
  });
8406
- Inner.displayName = COMPONENT_NAME$N;
9109
+ Inner.displayName = COMPONENT_NAME$M;
8407
9110
  Inner.className = CLASSNAME$N;
8408
9111
 
8409
9112
  /**
@@ -8420,7 +9123,7 @@ const ImageLightbox = Object.assign(Inner, {
8420
9123
  /**
8421
9124
  * Component display name.
8422
9125
  */
8423
- const COMPONENT_NAME$M = 'InlineList';
9126
+ const COMPONENT_NAME$L = 'InlineList';
8424
9127
 
8425
9128
  /**
8426
9129
  * Component default class name and class prefix.
@@ -8485,7 +9188,7 @@ const InlineList = forwardRef((props, ref) => {
8485
9188
  })
8486
9189
  );
8487
9190
  });
8488
- InlineList.displayName = COMPONENT_NAME$M;
9191
+ InlineList.displayName = COMPONENT_NAME$L;
8489
9192
  InlineList.className = CLASSNAME$M;
8490
9193
  InlineList.defaultProps = DEFAULT_PROPS$K;
8491
9194
 
@@ -8530,7 +9233,7 @@ InputLabel.defaultProps = InputLabel$1.defaultProps;
8530
9233
  /**
8531
9234
  * Component display name.
8532
9235
  */
8533
- const COMPONENT_NAME$L = 'Lightbox';
9236
+ const COMPONENT_NAME$K = 'Lightbox';
8534
9237
 
8535
9238
  /**
8536
9239
  * Component default class name and class prefix.
@@ -8662,13 +9365,13 @@ const Lightbox = forwardRef((props, ref) => {
8662
9365
  })
8663
9366
  });
8664
9367
  });
8665
- Lightbox.displayName = COMPONENT_NAME$L;
9368
+ Lightbox.displayName = COMPONENT_NAME$K;
8666
9369
  Lightbox.className = CLASSNAME$L;
8667
9370
 
8668
9371
  /**
8669
9372
  * Component display name.
8670
9373
  */
8671
- const COMPONENT_NAME$K = 'Link';
9374
+ const COMPONENT_NAME$J = 'Link';
8672
9375
 
8673
9376
  /**
8674
9377
  * Component default class name and class prefix.
@@ -8815,14 +9518,14 @@ const Link = forwardRef((props, ref) => {
8815
9518
  isDisabled: isAnyDisabled
8816
9519
  });
8817
9520
  });
8818
- Link.displayName = COMPONENT_NAME$K;
9521
+ Link.displayName = COMPONENT_NAME$J;
8819
9522
  Link.className = CLASSNAME$K;
8820
9523
  Link.defaultProps = DEFAULT_PROPS$J;
8821
9524
 
8822
9525
  /**
8823
9526
  * Component display name.
8824
9527
  */
8825
- const COMPONENT_NAME$J = 'LinkPreview';
9528
+ const COMPONENT_NAME$I = 'LinkPreview';
8826
9529
 
8827
9530
  /**
8828
9531
  * Component default class name and class prefix.
@@ -8887,7 +9590,7 @@ const LinkPreview = forwardRef((props, ref) => {
8887
9590
  // Avoid redundant links in focus order
8888
9591
  tabIndex: -1
8889
9592
  },
8890
- aspectRatio: AspectRatio.free,
9593
+ aspectRatio: AspectRatio$1.free,
8891
9594
  fillHeight: true
8892
9595
  })
8893
9596
  }), /*#__PURE__*/jsxs("div", {
@@ -8926,7 +9629,7 @@ const LinkPreview = forwardRef((props, ref) => {
8926
9629
  })
8927
9630
  });
8928
9631
  });
8929
- LinkPreview.displayName = COMPONENT_NAME$J;
9632
+ LinkPreview.displayName = COMPONENT_NAME$I;
8930
9633
  LinkPreview.className = CLASSNAME$J;
8931
9634
  LinkPreview.defaultProps = DEFAULT_PROPS$I;
8932
9635
 
@@ -8947,7 +9650,7 @@ const renderLink = ({
8947
9650
  /**
8948
9651
  * Component display name.
8949
9652
  */
8950
- const COMPONENT_NAME$I = 'ListItem';
9653
+ const COMPONENT_NAME$H = 'ListItem';
8951
9654
 
8952
9655
  /**
8953
9656
  * Component default class name and class prefix.
@@ -9055,14 +9758,14 @@ const ListItem = forwardRef((props, ref) => {
9055
9758
  })
9056
9759
  });
9057
9760
  });
9058
- ListItem.displayName = COMPONENT_NAME$I;
9761
+ ListItem.displayName = COMPONENT_NAME$H;
9059
9762
  ListItem.className = CLASSNAME$I;
9060
9763
  ListItem.defaultProps = DEFAULT_PROPS$H;
9061
9764
 
9062
9765
  /**
9063
9766
  * Component display name.
9064
9767
  */
9065
- const COMPONENT_NAME$H = 'ListDivider';
9768
+ const COMPONENT_NAME$G = 'ListDivider';
9066
9769
 
9067
9770
  /**
9068
9771
  * Component default class name and class prefix.
@@ -9087,13 +9790,13 @@ const ListDivider = forwardRef((props, ref) => {
9087
9790
  className: classNames.join(className, CLASSNAME$H)
9088
9791
  });
9089
9792
  });
9090
- ListDivider.displayName = COMPONENT_NAME$H;
9793
+ ListDivider.displayName = COMPONENT_NAME$G;
9091
9794
  ListDivider.className = CLASSNAME$H;
9092
9795
 
9093
9796
  /**
9094
9797
  * Component display name.
9095
9798
  */
9096
- const COMPONENT_NAME$G = 'ListSubheader';
9799
+ const COMPONENT_NAME$F = 'ListSubheader';
9097
9800
 
9098
9801
  /**
9099
9802
  * Component default class name and class prefix.
@@ -9120,13 +9823,13 @@ const ListSubheader = forwardRef((props, ref) => {
9120
9823
  children: children
9121
9824
  });
9122
9825
  });
9123
- ListSubheader.displayName = COMPONENT_NAME$G;
9826
+ ListSubheader.displayName = COMPONENT_NAME$F;
9124
9827
  ListSubheader.className = CLASSNAME$G;
9125
9828
 
9126
9829
  /**
9127
9830
  * Component display name.
9128
9831
  */
9129
- const COMPONENT_NAME$F = 'Message';
9832
+ const COMPONENT_NAME$E = 'Message';
9130
9833
 
9131
9834
  /**
9132
9835
  * Component default class name and class prefix.
@@ -9209,7 +9912,7 @@ const Message$1 = props => {
9209
9912
  })]
9210
9913
  });
9211
9914
  };
9212
- Message$1.displayName = COMPONENT_NAME$F;
9915
+ Message$1.displayName = COMPONENT_NAME$E;
9213
9916
  Message$1.className = CLASSNAME$F;
9214
9917
 
9215
9918
  /**
@@ -9225,13 +9928,13 @@ const Message = forwardRef((props, ref) => {
9225
9928
  ref
9226
9929
  });
9227
9930
  });
9228
- Message.displayName = COMPONENT_NAME$F;
9931
+ Message.displayName = COMPONENT_NAME$E;
9229
9932
  Message.className = CLASSNAME$F;
9230
9933
 
9231
9934
  /**
9232
9935
  * Component display name.
9233
9936
  */
9234
- const COMPONENT_NAME$E = 'Mosaic';
9937
+ const COMPONENT_NAME$D = 'Mosaic';
9235
9938
 
9236
9939
  /**
9237
9940
  * Component default class name and class prefix.
@@ -9296,7 +9999,7 @@ const Mosaic = forwardRef((props, ref) => {
9296
9999
  align: align || Alignment.left,
9297
10000
  image: image,
9298
10001
  theme: theme,
9299
- aspectRatio: AspectRatio.free,
10002
+ aspectRatio: AspectRatio$1.free,
9300
10003
  fillHeight: true,
9301
10004
  onClick: handleImageClick?.(index, onClick) || onClick
9302
10005
  }), thumbnails.length > 4 && index === 3 && /*#__PURE__*/jsx("div", {
@@ -9310,7 +10013,7 @@ const Mosaic = forwardRef((props, ref) => {
9310
10013
  })
9311
10014
  });
9312
10015
  });
9313
- Mosaic.displayName = COMPONENT_NAME$E;
10016
+ Mosaic.displayName = COMPONENT_NAME$D;
9314
10017
  Mosaic.className = CLASSNAME$E;
9315
10018
  Mosaic.defaultProps = DEFAULT_PROPS$G;
9316
10019
 
@@ -9345,7 +10048,7 @@ const ITEM_CLASSNAME = 'lumx-navigation-item';
9345
10048
  /**
9346
10049
  * Component display name.
9347
10050
  */
9348
- const COMPONENT_NAME$D = 'NavigationSection';
10051
+ const COMPONENT_NAME$C = 'NavigationSection';
9349
10052
 
9350
10053
  /**
9351
10054
  * Component default class name and class prefix.
@@ -9437,7 +10140,7 @@ const NavigationSection = forwardRef((props, ref) => {
9437
10140
  }))]
9438
10141
  });
9439
10142
  });
9440
- NavigationSection.displayName = COMPONENT_NAME$D;
10143
+ NavigationSection.displayName = COMPONENT_NAME$C;
9441
10144
  NavigationSection.className = CLASSNAME$D;
9442
10145
 
9443
10146
  const {
@@ -9501,7 +10204,7 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
9501
10204
  /**
9502
10205
  * Component display name.
9503
10206
  */
9504
- const COMPONENT_NAME$C = 'Navigation';
10207
+ const COMPONENT_NAME$B = 'Navigation';
9505
10208
 
9506
10209
  /**
9507
10210
  * Component default class name and class prefix.
@@ -9548,7 +10251,7 @@ const Navigation = forwardRef((props, ref) => {
9548
10251
  })
9549
10252
  });
9550
10253
  });
9551
- Navigation.displayName = COMPONENT_NAME$C;
10254
+ Navigation.displayName = COMPONENT_NAME$B;
9552
10255
  Navigation.className = CLASSNAME$C;
9553
10256
  Navigation.defaultProps = DEFAULT_PROPS$F;
9554
10257
 
@@ -9581,7 +10284,7 @@ const NOTIFICATION_CONFIGURATION = {
9581
10284
  /**
9582
10285
  * Component display name.
9583
10286
  */
9584
- const COMPONENT_NAME$B = 'Notification';
10287
+ const COMPONENT_NAME$A = 'Notification';
9585
10288
 
9586
10289
  /**
9587
10290
  * Component default class name and class prefix.
@@ -9683,14 +10386,14 @@ const Notification = forwardRef((props, ref) => {
9683
10386
  })
9684
10387
  });
9685
10388
  });
9686
- Notification.displayName = COMPONENT_NAME$B;
10389
+ Notification.displayName = COMPONENT_NAME$A;
9687
10390
  Notification.className = CLASSNAME$B;
9688
10391
  Notification.defaultProps = DEFAULT_PROPS$E;
9689
10392
 
9690
10393
  /**
9691
10394
  * Component display name.
9692
10395
  */
9693
- const COMPONENT_NAME$A = 'PopoverDialog';
10396
+ const COMPONENT_NAME$z = 'PopoverDialog';
9694
10397
 
9695
10398
  /**
9696
10399
  * Component default class name and class prefix.
@@ -9741,14 +10444,14 @@ const PopoverDialog = forwardRef((props, ref) => {
9741
10444
  })
9742
10445
  });
9743
10446
  });
9744
- PopoverDialog.displayName = COMPONENT_NAME$A;
10447
+ PopoverDialog.displayName = COMPONENT_NAME$z;
9745
10448
  PopoverDialog.className = CLASSNAME$A;
9746
10449
  PopoverDialog.defaultProps = DEFAULT_PROPS$D;
9747
10450
 
9748
10451
  /**
9749
10452
  * Component display name.
9750
10453
  */
9751
- const COMPONENT_NAME$z = 'PostBlock';
10454
+ const COMPONENT_NAME$y = 'PostBlock';
9752
10455
 
9753
10456
  /**
9754
10457
  * Component default class name and class prefix.
@@ -9842,14 +10545,14 @@ const PostBlock = forwardRef((props, ref) => {
9842
10545
  })]
9843
10546
  });
9844
10547
  });
9845
- PostBlock.displayName = COMPONENT_NAME$z;
10548
+ PostBlock.displayName = COMPONENT_NAME$y;
9846
10549
  PostBlock.className = CLASSNAME$z;
9847
10550
  PostBlock.defaultProps = DEFAULT_PROPS$C;
9848
10551
 
9849
10552
  /**
9850
10553
  * Component display name.
9851
10554
  */
9852
- const COMPONENT_NAME$y = 'ProgressLinear';
10555
+ const COMPONENT_NAME$x = 'ProgressLinear';
9853
10556
 
9854
10557
  /**
9855
10558
  * Component default class name and class prefix.
@@ -9892,14 +10595,14 @@ const ProgressLinear = forwardRef((props, ref) => {
9892
10595
  })]
9893
10596
  });
9894
10597
  });
9895
- ProgressLinear.displayName = COMPONENT_NAME$y;
10598
+ ProgressLinear.displayName = COMPONENT_NAME$x;
9896
10599
  ProgressLinear.className = CLASSNAME$y;
9897
10600
  ProgressLinear.defaultProps = DEFAULT_PROPS$B;
9898
10601
 
9899
10602
  /**
9900
10603
  * Component display name.
9901
10604
  */
9902
- const COMPONENT_NAME$x = 'ProgressCircular';
10605
+ const COMPONENT_NAME$w = 'ProgressCircular';
9903
10606
 
9904
10607
  /**
9905
10608
  * Component default class name and class prefix.
@@ -9961,7 +10664,7 @@ const ProgressCircular = forwardRef((props, ref) => {
9961
10664
  })]
9962
10665
  });
9963
10666
  });
9964
- ProgressCircular.displayName = COMPONENT_NAME$x;
10667
+ ProgressCircular.displayName = COMPONENT_NAME$w;
9965
10668
  ProgressCircular.className = CLASSNAME$x;
9966
10669
  ProgressCircular.defaultProps = DEFAULT_PROPS$A;
9967
10670
 
@@ -9977,7 +10680,7 @@ const ProgressVariant = {
9977
10680
  /**
9978
10681
  * Component display name.
9979
10682
  */
9980
- const COMPONENT_NAME$w = 'Progress';
10683
+ const COMPONENT_NAME$v = 'Progress';
9981
10684
 
9982
10685
  /**
9983
10686
  * Component default class name and class prefix.
@@ -10024,7 +10727,7 @@ const Progress = forwardRef((props, ref) => {
10024
10727
  })]
10025
10728
  });
10026
10729
  });
10027
- Progress.displayName = COMPONENT_NAME$w;
10730
+ Progress.displayName = COMPONENT_NAME$v;
10028
10731
  Progress.className = CLASSNAME$w;
10029
10732
  Progress.defaultProps = DEFAULT_PROPS$z;
10030
10733
 
@@ -10283,7 +10986,7 @@ const useRovingTabIndex = ({
10283
10986
  /**
10284
10987
  * Component display name.
10285
10988
  */
10286
- const COMPONENT_NAME$v = 'ProgressTracker';
10989
+ const COMPONENT_NAME$u = 'ProgressTracker';
10287
10990
 
10288
10991
  /**
10289
10992
  * Component default class name and class prefix.
@@ -10351,14 +11054,14 @@ const ProgressTracker = forwardRef((props, ref) => {
10351
11054
  })]
10352
11055
  });
10353
11056
  });
10354
- ProgressTracker.displayName = COMPONENT_NAME$v;
11057
+ ProgressTracker.displayName = COMPONENT_NAME$u;
10355
11058
  ProgressTracker.className = CLASSNAME$v;
10356
11059
  ProgressTracker.defaultProps = DEFAULT_PROPS$x;
10357
11060
 
10358
11061
  /**
10359
11062
  * Component display name.
10360
11063
  */
10361
- const COMPONENT_NAME$u = 'ProgressTrackerStep';
11064
+ const COMPONENT_NAME$t = 'ProgressTrackerStep';
10362
11065
 
10363
11066
  /**
10364
11067
  * Component default class name and class prefix.
@@ -10465,14 +11168,14 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
10465
11168
  })]
10466
11169
  });
10467
11170
  });
10468
- ProgressTrackerStep.displayName = COMPONENT_NAME$u;
11171
+ ProgressTrackerStep.displayName = COMPONENT_NAME$t;
10469
11172
  ProgressTrackerStep.className = CLASSNAME$u;
10470
11173
  ProgressTrackerStep.defaultProps = DEFAULT_PROPS$w;
10471
11174
 
10472
11175
  /**
10473
11176
  * Component display name.
10474
11177
  */
10475
- const COMPONENT_NAME$t = 'ProgressTrackerStepPanel';
11178
+ const COMPONENT_NAME$s = 'ProgressTrackerStepPanel';
10476
11179
 
10477
11180
  /**
10478
11181
  * Component default class name and class prefix.
@@ -10519,14 +11222,14 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
10519
11222
  children: (!state?.isLazy || isActive) && children
10520
11223
  });
10521
11224
  });
10522
- ProgressTrackerStepPanel.displayName = COMPONENT_NAME$t;
11225
+ ProgressTrackerStepPanel.displayName = COMPONENT_NAME$s;
10523
11226
  ProgressTrackerStepPanel.className = CLASSNAME$t;
10524
11227
  ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$v;
10525
11228
 
10526
11229
  /**
10527
11230
  * Component display name.
10528
11231
  */
10529
- const COMPONENT_NAME$s = 'RadioButton';
11232
+ const COMPONENT_NAME$r = 'RadioButton';
10530
11233
 
10531
11234
  /**
10532
11235
  * Component default class name and class prefix.
@@ -10678,14 +11381,14 @@ const RadioButton = forwardRef((props, ref) => {
10678
11381
  inputId
10679
11382
  });
10680
11383
  });
10681
- RadioButton.displayName = COMPONENT_NAME$s;
11384
+ RadioButton.displayName = COMPONENT_NAME$r;
10682
11385
  RadioButton.className = CLASSNAME$s;
10683
11386
  RadioButton.defaultProps = DEFAULT_PROPS$u;
10684
11387
 
10685
11388
  /**
10686
11389
  * Component display name.
10687
11390
  */
10688
- const COMPONENT_NAME$r = 'RadioGroup';
11391
+ const COMPONENT_NAME$q = 'RadioGroup';
10689
11392
 
10690
11393
  /**
10691
11394
  * Component default class name and class prefix.
@@ -10717,7 +11420,7 @@ const RadioGroup$1 = props => {
10717
11420
  children: children
10718
11421
  });
10719
11422
  };
10720
- RadioGroup$1.displayName = COMPONENT_NAME$r;
11423
+ RadioGroup$1.displayName = COMPONENT_NAME$q;
10721
11424
  RadioGroup$1.className = CLASSNAME$r;
10722
11425
  RadioGroup$1.defaultProps = DEFAULT_PROPS$t;
10723
11426
 
@@ -10745,7 +11448,7 @@ const RadioGroup = forwardRef((props, ref) => {
10745
11448
  ...forwardedProps
10746
11449
  });
10747
11450
  });
10748
- RadioGroup.displayName = COMPONENT_NAME$r;
11451
+ RadioGroup.displayName = COMPONENT_NAME$q;
10749
11452
  RadioGroup.className = CLASSNAME$r;
10750
11453
 
10751
11454
  /**
@@ -10893,7 +11596,7 @@ const SelectVariant = {
10893
11596
  };
10894
11597
 
10895
11598
  /** The display name of the component. */
10896
- const COMPONENT_NAME$q = 'Select';
11599
+ const COMPONENT_NAME$p = 'Select';
10897
11600
 
10898
11601
  /** The default class name and classes prefix for this component. */
10899
11602
  const CLASSNAME$p = 'lumx-select';
@@ -11036,13 +11739,13 @@ const Select = forwardRef((props, ref) => {
11036
11739
  isEmpty: isEmpty$1
11037
11740
  }, ref);
11038
11741
  });
11039
- Select.displayName = COMPONENT_NAME$q;
11742
+ Select.displayName = COMPONENT_NAME$p;
11040
11743
  Select.className = CLASSNAME$p;
11041
11744
  Select.defaultProps = DEFAULT_PROPS$s;
11042
11745
  Select.className = CLASSNAME$p;
11043
11746
 
11044
11747
  /** The display name of the component. */
11045
- const COMPONENT_NAME$p = 'Select';
11748
+ const COMPONENT_NAME$o = 'Select';
11046
11749
 
11047
11750
  /** The default class name and classes prefix for this component. */
11048
11751
  const CLASSNAME$o = 'lumx-select';
@@ -11075,6 +11778,8 @@ const SelectMultipleField = props => {
11075
11778
  const defaultTheme = useTheme();
11076
11779
  const {
11077
11780
  anchorRef,
11781
+ // We don't have a clear button in select multiple but it must be removed from the forwardedProps
11782
+ clearButtonProps,
11078
11783
  handleKeyboardNav,
11079
11784
  hasError,
11080
11785
  icon,
@@ -11187,14 +11892,14 @@ const SelectMultiple = forwardRef((props, ref) => {
11187
11892
  isMultiple: true
11188
11893
  }, ref);
11189
11894
  });
11190
- SelectMultiple.displayName = COMPONENT_NAME$p;
11895
+ SelectMultiple.displayName = COMPONENT_NAME$o;
11191
11896
  SelectMultiple.className = CLASSNAME$o;
11192
11897
  SelectMultiple.defaultProps = DEFAULT_PROPS$r;
11193
11898
 
11194
11899
  /**
11195
11900
  * Component display name.
11196
11901
  */
11197
- const COMPONENT_NAME$o = 'SideNavigation';
11902
+ const COMPONENT_NAME$n = 'SideNavigation';
11198
11903
 
11199
11904
  /**
11200
11905
  * Component default class name and class prefix.
@@ -11224,13 +11929,13 @@ const SideNavigation = forwardRef((props, ref) => {
11224
11929
  children: content
11225
11930
  });
11226
11931
  });
11227
- SideNavigation.displayName = COMPONENT_NAME$o;
11932
+ SideNavigation.displayName = COMPONENT_NAME$n;
11228
11933
  SideNavigation.className = CLASSNAME$n;
11229
11934
 
11230
11935
  /**
11231
11936
  * Component display name.
11232
11937
  */
11233
- const COMPONENT_NAME$n = 'SideNavigationItem';
11938
+ const COMPONENT_NAME$m = 'SideNavigationItem';
11234
11939
 
11235
11940
  /**
11236
11941
  * Component default class name and class prefix.
@@ -11339,14 +12044,14 @@ const SideNavigationItem = forwardRef((props, ref) => {
11339
12044
  })]
11340
12045
  });
11341
12046
  });
11342
- SideNavigationItem.displayName = COMPONENT_NAME$n;
12047
+ SideNavigationItem.displayName = COMPONENT_NAME$m;
11343
12048
  SideNavigationItem.className = CLASSNAME$m;
11344
12049
  SideNavigationItem.defaultProps = DEFAULT_PROPS$q;
11345
12050
 
11346
12051
  /**
11347
12052
  * Component display name.
11348
12053
  */
11349
- const COMPONENT_NAME$m = 'SkeletonCircle';
12054
+ const COMPONENT_NAME$l = 'SkeletonCircle';
11350
12055
 
11351
12056
  /**
11352
12057
  * Component default class name and class prefix.
@@ -11398,7 +12103,7 @@ const SkeletonRectangleVariant = {
11398
12103
  /**
11399
12104
  * Component display name.
11400
12105
  */
11401
- const COMPONENT_NAME$l = 'SkeletonRectangle';
12106
+ const COMPONENT_NAME$k = 'SkeletonRectangle';
11402
12107
 
11403
12108
  /**
11404
12109
  * Component default class name and class prefix.
@@ -11454,7 +12159,7 @@ const SkeletonRectangle$1 = props => {
11454
12159
  /**
11455
12160
  * Component display name.
11456
12161
  */
11457
- const COMPONENT_NAME$k = 'SkeletonTypography';
12162
+ const COMPONENT_NAME$j = 'SkeletonTypography';
11458
12163
 
11459
12164
  /**
11460
12165
  * Component default class name and class prefix.
@@ -11530,7 +12235,7 @@ const SkeletonCircle = forwardRef((props, ref) => {
11530
12235
  ...forwardedProps
11531
12236
  });
11532
12237
  });
11533
- SkeletonCircle.displayName = COMPONENT_NAME$m;
12238
+ SkeletonCircle.displayName = COMPONENT_NAME$l;
11534
12239
  SkeletonCircle.defaultProps = DEFAULT_PROPS$o;
11535
12240
  SkeletonCircle.className = CLASSNAME$l;
11536
12241
 
@@ -11571,7 +12276,7 @@ const SkeletonRectangle = forwardRef((props, ref) => {
11571
12276
  ...forwardedProps
11572
12277
  });
11573
12278
  });
11574
- SkeletonRectangle.displayName = COMPONENT_NAME$l;
12279
+ SkeletonRectangle.displayName = COMPONENT_NAME$k;
11575
12280
  SkeletonRectangle.className = CLASSNAME$k;
11576
12281
  SkeletonRectangle.defaultProps = DEFAULT_PROPS$n;
11577
12282
 
@@ -11608,7 +12313,7 @@ const SkeletonTypography = forwardRef((props, ref) => {
11608
12313
  ...forwardedProps
11609
12314
  });
11610
12315
  });
11611
- SkeletonTypography.displayName = COMPONENT_NAME$k;
12316
+ SkeletonTypography.displayName = COMPONENT_NAME$j;
11612
12317
  SkeletonTypography.defaultProps = DEFAULT_PROPS$m;
11613
12318
  SkeletonTypography.className = CLASSNAME$j;
11614
12319
 
@@ -11650,7 +12355,7 @@ const clamp = (value, min, max) => {
11650
12355
  /**
11651
12356
  * Component display name.
11652
12357
  */
11653
- const COMPONENT_NAME$j = 'Slider';
12358
+ const COMPONENT_NAME$i = 'Slider';
11654
12359
 
11655
12360
  /**
11656
12361
  * Component default class name and class prefix.
@@ -11917,7 +12622,7 @@ const Slider = forwardRef((props, ref) => {
11917
12622
  })]
11918
12623
  });
11919
12624
  });
11920
- Slider.displayName = COMPONENT_NAME$j;
12625
+ Slider.displayName = COMPONENT_NAME$i;
11921
12626
  Slider.className = CLASSNAME$i;
11922
12627
  Slider.defaultProps = DEFAULT_PROPS$l;
11923
12628
 
@@ -12252,7 +12957,7 @@ const useSlideFocusManagement = ({
12252
12957
  /**
12253
12958
  * Component display name.
12254
12959
  */
12255
- const COMPONENT_NAME$i = 'SlideshowItemGroup';
12960
+ const COMPONENT_NAME$h = 'SlideshowItemGroup';
12256
12961
 
12257
12962
  /**
12258
12963
  * Component default class name and class prefix.
@@ -12291,7 +12996,7 @@ const SlideshowItemGroup = forwardRef((props, ref) => {
12291
12996
  children: children
12292
12997
  });
12293
12998
  });
12294
- SlideshowItemGroup.displayName = COMPONENT_NAME$i;
12999
+ SlideshowItemGroup.displayName = COMPONENT_NAME$h;
12295
13000
  SlideshowItemGroup.className = CLASSNAME$h;
12296
13001
 
12297
13002
  /**
@@ -12422,7 +13127,7 @@ Slideshow.defaultProps = DEFAULT_PROPS$k;
12422
13127
  /**
12423
13128
  * Component display name.
12424
13129
  */
12425
- const COMPONENT_NAME$h = 'SlideshowItem';
13130
+ const COMPONENT_NAME$g = 'SlideshowItem';
12426
13131
 
12427
13132
  /**
12428
13133
  * Component default class name and class prefix.
@@ -12449,7 +13154,7 @@ const SlideshowItem = forwardRef((props, ref) => {
12449
13154
  children: children
12450
13155
  });
12451
13156
  });
12452
- SlideshowItem.displayName = COMPONENT_NAME$h;
13157
+ SlideshowItem.displayName = COMPONENT_NAME$g;
12453
13158
  SlideshowItem.className = CLASSNAME$g;
12454
13159
 
12455
13160
  const isTouchDevice = () => 'ontouchstart' in window;
@@ -12512,7 +13217,7 @@ function usePaginationVisibleRange(activeIndex, slideCount) {
12512
13217
  /**
12513
13218
  * Component display name.
12514
13219
  */
12515
- const COMPONENT_NAME$g = 'SlideshowControls';
13220
+ const COMPONENT_NAME$f = 'SlideshowControls';
12516
13221
 
12517
13222
  /**
12518
13223
  * Component default class name and class prefix.
@@ -12653,7 +13358,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
12653
13358
  })]
12654
13359
  });
12655
13360
  });
12656
- InternalSlideshowControls.displayName = COMPONENT_NAME$g;
13361
+ InternalSlideshowControls.displayName = COMPONENT_NAME$f;
12657
13362
  InternalSlideshowControls.className = CLASSNAME$f;
12658
13363
  InternalSlideshowControls.defaultProps = DEFAULT_PROPS$j;
12659
13364
  const SlideshowControls = Object.assign(InternalSlideshowControls, {
@@ -12773,7 +13478,7 @@ const useSlideScroll = ({
12773
13478
  /**
12774
13479
  * Component display name.
12775
13480
  */
12776
- const COMPONENT_NAME$f = 'Slideshow';
13481
+ const COMPONENT_NAME$e = 'Slideshow';
12777
13482
 
12778
13483
  /**
12779
13484
  * Component default class name and class prefix.
@@ -12881,13 +13586,13 @@ const Slides = forwardRef((props, ref) => {
12881
13586
  }), afterSlides]
12882
13587
  });
12883
13588
  });
12884
- Slides.displayName = COMPONENT_NAME$f;
13589
+ Slides.displayName = COMPONENT_NAME$e;
12885
13590
  Slides.className = CLASSNAME$e;
12886
13591
 
12887
13592
  /**
12888
13593
  * Component display name.
12889
13594
  */
12890
- const COMPONENT_NAME$e = 'Switch';
13595
+ const COMPONENT_NAME$d = 'Switch';
12891
13596
 
12892
13597
  /**
12893
13598
  * Component default class name and class prefix.
@@ -13055,14 +13760,14 @@ const Switch = forwardRef((props, ref) => {
13055
13760
  inputId
13056
13761
  });
13057
13762
  });
13058
- Switch.displayName = COMPONENT_NAME$e;
13763
+ Switch.displayName = COMPONENT_NAME$d;
13059
13764
  Switch.className = CLASSNAME$d;
13060
13765
  Switch.defaultProps = DEFAULT_PROPS$g;
13061
13766
 
13062
13767
  /**
13063
13768
  * Component display name.
13064
13769
  */
13065
- const COMPONENT_NAME$d = 'Table';
13770
+ const COMPONENT_NAME$c = 'Table';
13066
13771
 
13067
13772
  /**
13068
13773
  * Component default class name and class prefix.
@@ -13071,7 +13776,7 @@ const CLASSNAME$c = 'lumx-table';
13071
13776
 
13072
13777
  const {
13073
13778
  block: block$d
13074
- } = classNames.bem(CLASSNAME$c);
13779
+ } = bem(CLASSNAME$c);
13075
13780
 
13076
13781
  /**
13077
13782
  * Defines the props of the component.
@@ -13086,38 +13791,63 @@ const DEFAULT_PROPS$f = {};
13086
13791
  * Table component.
13087
13792
  *
13088
13793
  * @param props Component props.
13089
- * @param ref Component ref.
13090
13794
  * @return React element.
13091
13795
  */
13092
- const Table = forwardRef((props, ref) => {
13093
- const defaultTheme = useTheme() || Theme$1.light;
13796
+ const Table$1 = props => {
13094
13797
  const {
13095
13798
  children,
13096
13799
  className,
13097
13800
  hasBefore,
13098
13801
  hasDividers,
13099
- theme = defaultTheme,
13802
+ ref,
13803
+ theme,
13100
13804
  ...forwardedProps
13101
13805
  } = props;
13102
13806
  return /*#__PURE__*/jsx("table", {
13103
13807
  ref: ref,
13104
13808
  ...forwardedProps,
13105
- className: classNames.join(className, block$d({
13809
+ className: classnames(className, block$d({
13106
13810
  'has-before': hasBefore,
13107
13811
  'has-dividers': hasDividers,
13108
13812
  [`theme-${theme}`]: Boolean(theme)
13109
13813
  })),
13110
13814
  children: children
13111
13815
  });
13816
+ };
13817
+
13818
+ /**
13819
+ * Defines the props of the component.
13820
+ */
13821
+
13822
+ /**
13823
+ * Table component.
13824
+ *
13825
+ * @param props Component props.
13826
+ * @param ref Component ref.
13827
+ * @return React element.
13828
+ */
13829
+ const Table = forwardRef((props, ref) => {
13830
+ const defaultTheme = useTheme() || Theme$1.light;
13831
+ const {
13832
+ children,
13833
+ theme = defaultTheme,
13834
+ ...otherProps
13835
+ } = props;
13836
+ return Table$1({
13837
+ ref,
13838
+ theme,
13839
+ children,
13840
+ ...otherProps
13841
+ });
13112
13842
  });
13113
- Table.displayName = COMPONENT_NAME$d;
13843
+ Table.displayName = COMPONENT_NAME$c;
13114
13844
  Table.className = CLASSNAME$c;
13115
13845
  Table.defaultProps = DEFAULT_PROPS$f;
13116
13846
 
13117
13847
  /**
13118
13848
  * Component display name.
13119
13849
  */
13120
- const COMPONENT_NAME$c = 'TableBody';
13850
+ const COMPONENT_NAME$b = 'TableBody';
13121
13851
 
13122
13852
  /**
13123
13853
  * Component default class name and class prefix.
@@ -13128,23 +13858,46 @@ const CLASSNAME$b = `${CLASSNAME$c}__body`;
13128
13858
  * TableBody component.
13129
13859
  *
13130
13860
  * @param props Component props.
13131
- * @param ref Component ref.
13132
13861
  * @return React element.
13133
13862
  */
13134
- const TableBody = forwardRef((props, ref) => {
13863
+ const TableBody$1 = props => {
13135
13864
  const {
13136
13865
  children,
13137
13866
  className,
13867
+ ref,
13138
13868
  ...forwardedProps
13139
13869
  } = props;
13140
13870
  return /*#__PURE__*/jsx("tbody", {
13141
13871
  ref: ref,
13142
13872
  ...forwardedProps,
13143
- className: classNames.join(className, CLASSNAME$b),
13873
+ className: classnames(className, CLASSNAME$b),
13144
13874
  children: children
13145
13875
  });
13876
+ };
13877
+
13878
+ /**
13879
+ * Defines the props of the component.
13880
+ */
13881
+
13882
+ /**
13883
+ * TableBody component.
13884
+ *
13885
+ * @param props Component props.
13886
+ * @param ref Component ref.
13887
+ * @return React element.
13888
+ */
13889
+ const TableBody = forwardRef((props, ref) => {
13890
+ const {
13891
+ children,
13892
+ ...otherProps
13893
+ } = props;
13894
+ return TableBody$1({
13895
+ ref,
13896
+ children,
13897
+ ...otherProps
13898
+ });
13146
13899
  });
13147
- TableBody.displayName = COMPONENT_NAME$c;
13900
+ TableBody.displayName = COMPONENT_NAME$b;
13148
13901
  TableBody.className = CLASSNAME$b;
13149
13902
 
13150
13903
  const ThOrder = {
@@ -13166,7 +13919,7 @@ const TableCellVariant = {
13166
13919
  /**
13167
13920
  * Component display name.
13168
13921
  */
13169
- const COMPONENT_NAME$b = 'TableCell';
13922
+ const COMPONENT_NAME$a = 'TableCell';
13170
13923
 
13171
13924
  /**
13172
13925
  * Component default class name and class prefix.
@@ -13174,7 +13927,7 @@ const COMPONENT_NAME$b = 'TableCell';
13174
13927
  const CLASSNAME$a = `${CLASSNAME$c}__cell`;
13175
13928
  const {
13176
13929
  block: block$c
13177
- } = classNames.bem(CLASSNAME$a);
13930
+ } = bem(CLASSNAME$a);
13178
13931
 
13179
13932
  /**
13180
13933
  * Component default props.
@@ -13187,16 +13940,16 @@ const DEFAULT_PROPS$e = {
13187
13940
  * TableCell component.
13188
13941
  *
13189
13942
  * @param props Component props.
13190
- * @param ref Component ref.
13191
13943
  * @return React element.
13192
13944
  */
13193
- const TableCell = forwardRef((props, ref) => {
13945
+ const TableCell$1 = props => {
13194
13946
  const {
13195
13947
  children,
13196
13948
  className,
13197
13949
  icon,
13198
13950
  isSortable,
13199
13951
  onHeaderClick,
13952
+ ref,
13200
13953
  sortOrder,
13201
13954
  variant = DEFAULT_PROPS$e.variant,
13202
13955
  ...forwardedProps
@@ -13220,7 +13973,7 @@ const TableCell = forwardRef((props, ref) => {
13220
13973
  children: [variant === TableCellVariant.head && /*#__PURE__*/jsx("th", {
13221
13974
  ref: ref,
13222
13975
  ...forwardedProps,
13223
- className: classNames.join(className, block$c({
13976
+ className: classnames(className, block$c({
13224
13977
  'is-sortable': isSortable,
13225
13978
  'is-sorted': isSortable && !!sortOrder,
13226
13979
  head: true
@@ -13229,26 +13982,27 @@ const TableCell = forwardRef((props, ref) => {
13229
13982
  children: /*#__PURE__*/jsxs(Wrapper, {
13230
13983
  className: `${CLASSNAME$a}-wrapper`,
13231
13984
  ...wrapperProps,
13232
- children: [icon && !isSortable && /*#__PURE__*/jsx(Icon, {
13985
+ children: [icon && !isSortable && Icon$1({
13233
13986
  className: `${CLASSNAME$a}-icon`,
13234
- icon: icon,
13235
- size: Size$1.xxs
13236
- }), isSortable && sortOrder === ThOrder.asc && /*#__PURE__*/jsx(Icon, {
13987
+ icon,
13988
+ size: Size.xxs
13989
+ }), isSortable && sortOrder === ThOrder.asc && Icon$1({
13237
13990
  className: `${CLASSNAME$a}-icon`,
13238
13991
  icon: mdiArrowUp,
13239
- size: Size$1.xxs
13240
- }), isSortable && sortOrder === ThOrder.desc && /*#__PURE__*/jsx(Icon, {
13992
+ size: Size.xxs
13993
+ }), isSortable && sortOrder === ThOrder.desc && Icon$1({
13241
13994
  className: `${CLASSNAME$a}-icon`,
13242
13995
  icon: mdiArrowDown,
13243
- size: Size$1.xxs
13996
+ size: Size.xxs
13244
13997
  }), /*#__PURE__*/jsx("div", {
13245
13998
  className: `${CLASSNAME$a}-content`,
13246
13999
  children: children
13247
14000
  })]
13248
14001
  })
13249
14002
  }), variant === TableCellVariant.body && /*#__PURE__*/jsx("td", {
14003
+ ref: ref,
13250
14004
  ...forwardedProps,
13251
- className: classNames.join(className, block$c({
14005
+ className: classnames(className, block$c({
13252
14006
  body: true
13253
14007
  })),
13254
14008
  children: /*#__PURE__*/jsx("div", {
@@ -13257,15 +14011,38 @@ const TableCell = forwardRef((props, ref) => {
13257
14011
  })
13258
14012
  })]
13259
14013
  });
14014
+ };
14015
+
14016
+ /**
14017
+ * Defines the props of the component.
14018
+ */
14019
+
14020
+ /**
14021
+ * TableCell component.
14022
+ *
14023
+ * @param props Component props.
14024
+ * @param ref Component ref.
14025
+ * @return React element.
14026
+ */
14027
+ const TableCell = forwardRef((props, ref) => {
14028
+ const {
14029
+ children,
14030
+ ...otherProps
14031
+ } = props;
14032
+ return TableCell$1({
14033
+ ref,
14034
+ children,
14035
+ ...otherProps
14036
+ });
13260
14037
  });
13261
- TableCell.displayName = COMPONENT_NAME$b;
14038
+ TableCell.displayName = COMPONENT_NAME$a;
13262
14039
  TableCell.className = CLASSNAME$a;
13263
14040
  TableCell.defaultProps = DEFAULT_PROPS$e;
13264
14041
 
13265
14042
  /**
13266
14043
  * Component display name.
13267
14044
  */
13268
- const COMPONENT_NAME$a = 'TableHeader';
14045
+ const COMPONENT_NAME$9 = 'TableHeader';
13269
14046
 
13270
14047
  /**
13271
14048
  * Component default class name and class prefix.
@@ -13281,30 +14058,53 @@ const DEFAULT_PROPS$d = {};
13281
14058
  * TableHeader component.
13282
14059
  *
13283
14060
  * @param props Component props.
13284
- * @param ref Component ref.
13285
14061
  * @return React element.
13286
14062
  */
13287
- const TableHeader = forwardRef((props, ref) => {
14063
+ const TableHeader$1 = props => {
13288
14064
  const {
13289
14065
  children,
13290
14066
  className,
14067
+ ref,
13291
14068
  ...forwardedProps
13292
14069
  } = props;
13293
14070
  return /*#__PURE__*/jsx("thead", {
13294
14071
  ref: ref,
13295
14072
  ...forwardedProps,
13296
- className: classNames.join(className, CLASSNAME$9),
14073
+ className: classnames(className, CLASSNAME$9),
13297
14074
  children: children
13298
14075
  });
14076
+ };
14077
+
14078
+ /**
14079
+ * Defines the props of the component.
14080
+ */
14081
+
14082
+ /**
14083
+ * TableHeader component.
14084
+ *
14085
+ * @param props Component props.
14086
+ * @param ref Component ref.
14087
+ * @return React element.
14088
+ */
14089
+ const TableHeader = forwardRef((props, ref) => {
14090
+ const {
14091
+ children,
14092
+ ...otherProps
14093
+ } = props;
14094
+ return TableHeader$1({
14095
+ ref,
14096
+ children,
14097
+ ...otherProps
14098
+ });
13299
14099
  });
13300
- TableHeader.displayName = COMPONENT_NAME$a;
14100
+ TableHeader.displayName = COMPONENT_NAME$9;
13301
14101
  TableHeader.className = CLASSNAME$9;
13302
14102
  TableHeader.defaultProps = DEFAULT_PROPS$d;
13303
14103
 
13304
14104
  /**
13305
14105
  * Component display name.
13306
14106
  */
13307
- const COMPONENT_NAME$9 = 'TableRow';
14107
+ const COMPONENT_NAME$8 = 'TableRow';
13308
14108
 
13309
14109
  /**
13310
14110
  * Component default class name and class prefix.
@@ -13312,7 +14112,7 @@ const COMPONENT_NAME$9 = 'TableRow';
13312
14112
  const CLASSNAME$8 = `${CLASSNAME$c}__row`;
13313
14113
  const {
13314
14114
  block: block$b
13315
- } = classNames.bem(CLASSNAME$8);
14115
+ } = bem(CLASSNAME$8);
13316
14116
 
13317
14117
  /**
13318
14118
  * Component default props.
@@ -13323,36 +14123,71 @@ const DEFAULT_PROPS$c = {};
13323
14123
  * TableRow component.
13324
14124
  *
13325
14125
  * @param props Component props.
13326
- * @param ref Component ref.
13327
14126
  * @return React element.
13328
14127
  */
13329
- const TableRow = forwardRef((props, ref) => {
13330
- const {
13331
- isAnyDisabled,
13332
- disabledStateProps,
13333
- otherProps
13334
- } = useDisableStateProps(props);
14128
+ const TableRow$1 = props => {
13335
14129
  const {
13336
14130
  children,
13337
14131
  className,
13338
14132
  isClickable,
13339
14133
  isSelected,
14134
+ ref,
14135
+ tabIndex,
14136
+ 'aria-disabled': ariaDisabled,
13340
14137
  ...forwardedProps
13341
- } = otherProps;
14138
+ } = props;
14139
+ const isDisabled = Boolean(ariaDisabled);
14140
+
14141
+ // Use object spread for tabIndex to ensure cross-framework compatibility (Vue JSX expects lowercase 'tabindex')
14142
+ const tabIndexProps = tabIndex !== undefined ? {
14143
+ tabIndex
14144
+ } : {};
13342
14145
  return /*#__PURE__*/jsx("tr", {
13343
14146
  ref: ref,
13344
- tabIndex: isClickable && !disabledStateProps.disabled ? 0 : -1,
14147
+ "aria-disabled": ariaDisabled,
14148
+ ...tabIndexProps,
13345
14149
  ...forwardedProps,
13346
- className: classNames.join(className, block$b({
13347
- 'is-clickable': isClickable && !isAnyDisabled,
13348
- 'is-disabled': isAnyDisabled,
13349
- 'is-selected': isSelected && !isAnyDisabled
14150
+ className: classnames(className, block$b({
14151
+ 'is-clickable': isClickable && !isDisabled,
14152
+ 'is-disabled': isDisabled,
14153
+ 'is-selected': isSelected && !isDisabled
13350
14154
  })),
13351
- "aria-disabled": isAnyDisabled,
13352
14155
  children: children
13353
14156
  });
14157
+ };
14158
+
14159
+ /**
14160
+ * Defines the props of the component.
14161
+ */
14162
+
14163
+ /**
14164
+ * TableRow component.
14165
+ *
14166
+ * @param props Component props.
14167
+ * @param ref Component ref.
14168
+ * @return React element.
14169
+ */
14170
+ const TableRow = forwardRef((props, ref) => {
14171
+ const {
14172
+ isAnyDisabled,
14173
+ otherProps
14174
+ } = useDisableStateProps(props);
14175
+ const {
14176
+ children,
14177
+ isClickable,
14178
+ 'aria-disabled': _ariaDisabled,
14179
+ ...forwardedProps
14180
+ } = otherProps;
14181
+ return TableRow$1({
14182
+ ref,
14183
+ children,
14184
+ isClickable,
14185
+ tabIndex: isClickable && !isAnyDisabled ? 0 : -1,
14186
+ 'aria-disabled': isAnyDisabled,
14187
+ ...forwardedProps
14188
+ });
13354
14189
  });
13355
- TableRow.displayName = COMPONENT_NAME$9;
14190
+ TableRow.displayName = COMPONENT_NAME$8;
13356
14191
  TableRow.className = CLASSNAME$8;
13357
14192
  TableRow.defaultProps = DEFAULT_PROPS$c;
13358
14193
 
@@ -13436,7 +14271,7 @@ let TabListLayout = /*#__PURE__*/function (TabListLayout) {
13436
14271
  /**
13437
14272
  * Component display name.
13438
14273
  */
13439
- const COMPONENT_NAME$8 = 'TabList';
14274
+ const COMPONENT_NAME$7 = 'TabList';
13440
14275
 
13441
14276
  /**
13442
14277
  * Component default props.
@@ -13489,14 +14324,14 @@ const TabList = forwardRef((props, ref) => {
13489
14324
  })
13490
14325
  });
13491
14326
  });
13492
- TabList.displayName = COMPONENT_NAME$8;
14327
+ TabList.displayName = COMPONENT_NAME$7;
13493
14328
  TabList.className = TABS_CLASSNAME;
13494
14329
  TabList.defaultProps = DEFAULT_PROPS$a;
13495
14330
 
13496
14331
  /**
13497
14332
  * Component display name.
13498
14333
  */
13499
- const COMPONENT_NAME$7 = 'Tab';
14334
+ const COMPONENT_NAME$6 = 'Tab';
13500
14335
 
13501
14336
  /**
13502
14337
  * Component default class name and class prefix.
@@ -13586,14 +14421,14 @@ const Tab = forwardRef((props, ref) => {
13586
14421
  })]
13587
14422
  });
13588
14423
  });
13589
- Tab.displayName = COMPONENT_NAME$7;
14424
+ Tab.displayName = COMPONENT_NAME$6;
13590
14425
  Tab.className = CLASSNAME$7;
13591
14426
  Tab.defaultProps = DEFAULT_PROPS$9;
13592
14427
 
13593
14428
  /**
13594
14429
  * Component display name.
13595
14430
  */
13596
- const COMPONENT_NAME$6 = 'TabPanel';
14431
+ const COMPONENT_NAME$5 = 'TabPanel';
13597
14432
 
13598
14433
  /**
13599
14434
  * Component default class name and class prefix.
@@ -13640,14 +14475,14 @@ const TabPanel = forwardRef((props, ref) => {
13640
14475
  children: (!state?.isLazy || isActive) && children
13641
14476
  });
13642
14477
  });
13643
- TabPanel.displayName = COMPONENT_NAME$6;
14478
+ TabPanel.displayName = COMPONENT_NAME$5;
13644
14479
  TabPanel.className = CLASSNAME$6;
13645
14480
  TabPanel.defaultProps = DEFAULT_PROPS$8;
13646
14481
 
13647
14482
  /**
13648
14483
  * Component display name.
13649
14484
  */
13650
- const COMPONENT_NAME$5 = 'TextField';
14485
+ const COMPONENT_NAME$4 = 'TextField';
13651
14486
 
13652
14487
  /**
13653
14488
  * Component default class name and class prefix.
@@ -14011,11 +14846,18 @@ const TextField = forwardRef((props, ref) => {
14011
14846
  })]
14012
14847
  });
14013
14848
  });
14014
- TextField.displayName = COMPONENT_NAME$5;
14849
+ TextField.displayName = COMPONENT_NAME$4;
14015
14850
  TextField.className = CLASSNAME$5;
14016
14851
  TextField.defaultProps = DEFAULT_PROPS$5;
14017
14852
 
14018
- function getState(img, event) {
14853
+ /**
14854
+ * Determines the loading state of an HTML image element.
14855
+ *
14856
+ * @param img - The HTML image element to check
14857
+ * @param event - Optional event (load or error) that triggered the state check
14858
+ * @returns The current loading state: 'hasError', 'isLoading', or 'isLoaded'
14859
+ */
14860
+ function getImageLoadingState(img, event) {
14019
14861
  // Error event occurred or image has no source.
14020
14862
  if (event?.type === 'error' || img?.complete && !img.getAttribute('src')) {
14021
14863
  return 'hasError';
@@ -14027,30 +14869,58 @@ function getState(img, event) {
14027
14869
  // Else loaded.
14028
14870
  return 'isLoaded';
14029
14871
  }
14030
- function useImageLoad(imageURL, imgRef) {
14031
- const [state, setState] = useState(getState(imgRef));
14032
14872
 
14033
- // Update state when changing image URL or DOM reference.
14034
- useEffect(() => {
14035
- setState(getState(imgRef));
14036
- }, [imageURL, imgRef]);
14873
+ /**
14874
+ * Parameters for getting image size.
14875
+ */
14037
14876
 
14038
- // Listen to `load` and `error` event on image
14039
- useEffect(() => {
14040
- const img = imgRef;
14041
- if (!img) return undefined;
14042
- const update = event => setState(getState(img, event));
14043
- img.addEventListener('load', update);
14044
- img.addEventListener('error', update);
14045
- return () => {
14046
- img.removeEventListener('load', update);
14047
- img.removeEventListener('error', update);
14877
+ /**
14878
+ * Gets the natural image size from props or element.
14879
+ * Returns undefined if focus point is not applicable or size cannot be determined.
14880
+ *
14881
+ * @param params - Image size parameters
14882
+ * @returns Image size or undefined
14883
+ */
14884
+ function getImageSize({
14885
+ image,
14886
+ aspectRatio,
14887
+ focusPoint,
14888
+ width,
14889
+ height,
14890
+ element,
14891
+ isLoaded
14892
+ }) {
14893
+ // Focus point is not applicable => exit early
14894
+ if (!image || aspectRatio === AspectRatio.original || !focusPoint?.x && !focusPoint?.y) {
14895
+ return undefined;
14896
+ }
14897
+ // Size provided via props
14898
+ if (typeof width === 'number' && typeof height === 'number') {
14899
+ return {
14900
+ width,
14901
+ height
14048
14902
  };
14049
- }, [imgRef, imgRef?.src]);
14050
- return state;
14903
+ }
14904
+ // Size from loaded element
14905
+ if (element && isLoaded) {
14906
+ return {
14907
+ width: element.naturalWidth,
14908
+ height: element.naturalHeight
14909
+ };
14910
+ }
14911
+ return undefined;
14051
14912
  }
14052
14913
 
14053
- // Calculate shift to center the focus point in the container.
14914
+ /**
14915
+ * Calculate shift position to center the focus point in the container.
14916
+ *
14917
+ * This function computes the percentage offset needed to position an image
14918
+ * such that a specific focus point on the image aligns with the center of
14919
+ * the container, taking into account the image's scale.
14920
+ *
14921
+ * @param params - Focus point shift calculation parameters
14922
+ * @returns Percentage shift (0-100) for CSS positioning
14923
+ */
14054
14924
  function shiftPosition({
14055
14925
  scale,
14056
14926
  focusPoint,
@@ -14065,97 +14935,69 @@ function shiftPosition({
14065
14935
  return Math.floor(Math.max(Math.min(shift, 1), 0) * 100);
14066
14936
  }
14067
14937
 
14068
- // Compute CSS properties to apply the focus point.
14069
- const useFocusPointStyle = ({
14938
+ /**
14939
+ * Parameters for calculating focus point style.
14940
+ */
14941
+
14942
+ /**
14943
+ * Calculates CSS style for applying focus point positioning.
14944
+ *
14945
+ * @param params - Focus point style parameters
14946
+ * @returns CSS properties to apply to the image
14947
+ */
14948
+ function calculateFocusPointStyle({
14070
14949
  image,
14071
14950
  aspectRatio,
14072
14951
  focusPoint,
14073
- imgProps: {
14074
- width,
14075
- height
14076
- } = {}
14077
- }, element, isLoaded) => {
14078
- // Get natural image size from imgProps or img element.
14079
- const imageSize = useMemo(() => {
14080
- // Focus point is not applicable => exit early
14081
- if (!image || aspectRatio === AspectRatio.original || !focusPoint?.x && !focusPoint?.y) return undefined;
14082
- if (typeof width === 'number' && typeof height === 'number') return {
14083
- width,
14084
- height
14085
- };
14086
- if (element && isLoaded) return {
14087
- width: element.naturalWidth,
14088
- height: element.naturalHeight
14952
+ element,
14953
+ imageSize,
14954
+ containerSize
14955
+ }) {
14956
+ // Focus point is not applicable => exit early
14957
+ if (!image || aspectRatio === AspectRatio.original || !focusPoint?.x && !focusPoint?.y) {
14958
+ return {};
14959
+ }
14960
+ if (!element || !imageSize) {
14961
+ // Focus point can be computed but not right now (image size unknown).
14962
+ return {
14963
+ visibility: 'hidden'
14089
14964
  };
14090
- return undefined;
14091
- }, [aspectRatio, element, focusPoint?.x, focusPoint?.y, height, image, isLoaded, width]);
14092
-
14093
- // Get container size (dependant on imageSize).
14094
- const [containerSize, setContainerSize] = useState(undefined);
14095
- useEffect(function updateContainerSize() {
14096
- const cWidth = element?.offsetWidth;
14097
- const cHeight = element?.offsetHeight;
14098
- if (cWidth && cHeight) {
14099
- // Update only if needed.
14100
- setContainerSize(oldContainerSize => oldContainerSize?.width === cWidth && oldContainerSize.height === cHeight ? oldContainerSize : {
14101
- width: cWidth,
14102
- height: cHeight
14103
- });
14104
- } else if (imageSize) {
14105
- // Wait for a render (in case the container size is dependent on the image size).
14106
- requestAnimationFrame(updateContainerSize);
14107
- }
14108
- }, [element?.offsetHeight, element?.offsetWidth, imageSize]);
14965
+ }
14966
+ if (!containerSize || !imageSize.height || !imageSize.width) {
14967
+ // Missing container or image size, abort focus point compute.
14968
+ return {};
14969
+ }
14970
+ const heightScale = imageSize.height / containerSize.height;
14971
+ const widthScale = imageSize.width / containerSize.width;
14972
+ const scale = Math.min(widthScale, heightScale);
14109
14973
 
14110
- // Compute style.
14111
- const style = useMemo(() => {
14112
- // Focus point is not applicable => exit early
14113
- if (!image || aspectRatio === AspectRatio.original || !focusPoint?.x && !focusPoint?.y) {
14114
- return {};
14115
- }
14116
- if (!element || !imageSize) {
14117
- // Focus point can be computed but now right now (image size unknown).
14118
- return {
14119
- visibility: 'hidden'
14120
- };
14121
- }
14122
- if (!containerSize || !imageSize.height || !imageSize.width) {
14123
- // Missing container or image size abort focus point compute.
14124
- return {};
14125
- }
14126
- const heightScale = imageSize.height / containerSize.height;
14127
- const widthScale = imageSize.width / containerSize.width;
14128
- const scale = Math.min(widthScale, heightScale);
14129
-
14130
- // Focus Y relative to the top (instead of the center)
14131
- const focusPointFromTop = Math.abs((focusPoint?.y || 0) - 1) / 2;
14132
- const y = shiftPosition({
14133
- scale,
14134
- focusPoint: focusPointFromTop,
14135
- imageSize: imageSize.height,
14136
- containerSize: containerSize.height
14137
- });
14974
+ // Focus Y relative to the top (instead of the center)
14975
+ const focusPointFromTop = Math.abs((focusPoint?.y || 0) - 1) / 2;
14976
+ const y = shiftPosition({
14977
+ scale,
14978
+ focusPoint: focusPointFromTop,
14979
+ imageSize: imageSize.height,
14980
+ containerSize: containerSize.height
14981
+ });
14138
14982
 
14139
- // Focus X relative to the left (instead of the center)
14140
- const focusPointFromLeft = Math.abs((focusPoint?.x || 0) + 1) / 2;
14141
- const x = shiftPosition({
14142
- scale,
14143
- focusPoint: focusPointFromLeft,
14144
- imageSize: imageSize.width,
14145
- containerSize: containerSize.width
14146
- });
14147
- const objectPosition = `${x}% ${y}%`;
14148
- return {
14149
- objectPosition
14150
- };
14151
- }, [aspectRatio, containerSize, element, focusPoint?.x, focusPoint?.y, image, imageSize]);
14152
- return style;
14153
- };
14983
+ // Focus X relative to the left (instead of the center)
14984
+ const focusPointFromLeft = Math.abs((focusPoint?.x || 0) + 1) / 2;
14985
+ const x = shiftPosition({
14986
+ scale,
14987
+ focusPoint: focusPointFromLeft,
14988
+ imageSize: imageSize.width,
14989
+ containerSize: containerSize.width
14990
+ });
14991
+ const objectPosition = `${x}% ${y}%`;
14992
+ return {
14993
+ objectPosition
14994
+ };
14995
+ }
14154
14996
 
14155
14997
  /**
14156
14998
  * Component display name.
14157
14999
  */
14158
- const COMPONENT_NAME$4 = 'Thumbnail';
15000
+ const COMPONENT_NAME$3 = 'Thumbnail';
14159
15001
 
14160
15002
  /**
14161
15003
  * Component default class name and class prefix.
@@ -14181,25 +15023,18 @@ const DEFAULT_PROPS$4 = {
14181
15023
  * @param ref Component ref.
14182
15024
  * @return React element.
14183
15025
  */
14184
- const Thumbnail = forwardRef((props, ref) => {
14185
- const {
14186
- isAnyDisabled,
14187
- otherProps,
14188
- disabledStateProps
14189
- } = useDisableStateProps(props);
14190
- const defaultTheme = useTheme() || Theme$1.light;
15026
+ const Thumbnail$1 = props => {
14191
15027
  const {
14192
15028
  align,
14193
15029
  alt,
14194
- aspectRatio = AspectRatio.original,
15030
+ aspectRatio = AspectRatio$1.original,
14195
15031
  badge,
14196
15032
  className,
14197
15033
  crossOrigin,
15034
+ ref,
14198
15035
  fallback = DEFAULT_PROPS$4.fallback,
15036
+ focusPointStyle,
14199
15037
  fillHeight,
14200
- // `focusPoint` needs to be here to remove it from `forwardedProps`.
14201
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
14202
- focusPoint,
14203
15038
  image,
14204
15039
  imgProps,
14205
15040
  imgRef: propImgRef,
@@ -14207,23 +15042,18 @@ const Thumbnail = forwardRef((props, ref) => {
14207
15042
  objectFit,
14208
15043
  loading = DEFAULT_PROPS$4.loading,
14209
15044
  loadingPlaceholderImageRef,
15045
+ isAnyDisabled,
15046
+ disabledStateProps,
14210
15047
  size,
14211
- theme = defaultTheme,
15048
+ theme,
15049
+ loadingState,
14212
15050
  variant,
14213
15051
  linkProps,
14214
15052
  linkAs,
14215
15053
  ...forwardedProps
14216
- } = otherProps;
14217
- const [imgElement, setImgElement] = useState();
14218
-
14219
- // Image loading state.
14220
- const loadingState = useImageLoad(image, imgElement);
14221
- const isLoaded = loadingState === 'isLoaded';
15054
+ } = props;
14222
15055
  const isLoading = isLoadingProp || loadingState === 'isLoading';
14223
15056
  const hasError = loadingState === 'hasError';
14224
-
14225
- // Focus point.
14226
- const focusPointStyle = useFocusPointStyle(props, imgElement, isLoaded);
14227
15057
  const hasIconErrorFallback = hasError && typeof fallback === 'string';
14228
15058
  const hasCustomErrorFallback = hasError && !hasIconErrorFallback;
14229
15059
  const imageErrorStyle = {};
@@ -14236,7 +15066,6 @@ const Thumbnail = forwardRef((props, ref) => {
14236
15066
  }
14237
15067
  const isLink = Boolean(linkProps?.href || linkAs);
14238
15068
  const isClickable = !isAnyDisabled && Boolean(isLink || !!forwardedProps.onClick);
14239
- const Wrapper = isClickable ? RawClickable : 'div';
14240
15069
  const wrapperProps = {
14241
15070
  ...forwardedProps
14242
15071
  };
@@ -14250,6 +15079,21 @@ const Thumbnail = forwardRef((props, ref) => {
14250
15079
  wrapperProps['aria-label'] = forwardedProps['aria-label'] || alt;
14251
15080
  }
14252
15081
  }
15082
+ const wrapperClassName = classNames.join(linkProps?.className, className, block$4({
15083
+ [`align-${align}`]: Boolean(align),
15084
+ [`aspect-ratio-${aspectRatio}`]: Boolean(aspectRatio),
15085
+ [`size-${size}`]: Boolean(size),
15086
+ [`theme-${theme}`]: Boolean(theme),
15087
+ [`variant-${variant}`]: Boolean(variant),
15088
+ 'is-clickable': isClickable,
15089
+ 'has-error': hasError,
15090
+ 'has-icon-error-fallback': hasIconErrorFallback,
15091
+ 'has-custom-error-fallback': hasCustomErrorFallback,
15092
+ 'is-loading': isLoading,
15093
+ [`object-fit-${objectFit}`]: Boolean(objectFit),
15094
+ 'has-badge': !!badge,
15095
+ 'fill-height': fillHeight
15096
+ }));
14253
15097
 
14254
15098
  // If we have a loading placeholder image that is really loaded (complete)
14255
15099
  const loadingPlaceholderImage = isLoading && loadingPlaceholderImageRef?.current?.complete && loadingPlaceholderImageRef?.current || undefined;
@@ -14258,24 +15102,7 @@ const Thumbnail = forwardRef((props, ref) => {
14258
15102
  const loadingStyle = loadingPlaceholderImage ? {
14259
15103
  backgroundImage: `url(${loadingPlaceholderImage.src})`
14260
15104
  } : undefined;
14261
- return /*#__PURE__*/jsxs(Wrapper, {
14262
- ...wrapperProps,
14263
- ref: ref,
14264
- className: classNames.join(linkProps?.className, className, block$4({
14265
- [`align-${align}`]: Boolean(align),
14266
- [`aspect-ratio-${aspectRatio}`]: Boolean(aspectRatio),
14267
- [`size-${size}`]: Boolean(size),
14268
- [`theme-${theme}`]: Boolean(theme),
14269
- [`variant-${variant}`]: Boolean(variant),
14270
- 'is-clickable': isClickable,
14271
- 'has-error': hasError,
14272
- 'has-icon-error-fallback': hasIconErrorFallback,
14273
- 'has-custom-error-fallback': hasCustomErrorFallback,
14274
- 'is-loading': isLoading,
14275
- [`object-fit-${objectFit}`]: Boolean(objectFit),
14276
- 'has-badge': !!badge,
14277
- 'fill-height': fillHeight
14278
- })),
15105
+ const innerImage = /*#__PURE__*/jsxs(Fragment, {
14279
15106
  children: [/*#__PURE__*/jsxs("span", {
14280
15107
  className: element$4('background'),
14281
15108
  children: [/*#__PURE__*/jsx("img", {
@@ -14291,29 +15118,168 @@ const Thumbnail = forwardRef((props, ref) => {
14291
15118
  ...focusPointStyle,
14292
15119
  ...loadingStyle
14293
15120
  },
14294
- ref: useMergeRefs(setImgElement, propImgRef),
15121
+ ref: propImgRef,
14295
15122
  className: classNames.join(element$4('image', {
14296
15123
  'is-loading': isLoading,
14297
15124
  'has-defined-size': Boolean(imgProps?.height && imgProps.width)
14298
- }), imgProps?.className),
15125
+ }), imgProps?.className)
15126
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
15127
+ // @ts-ignore - crossOrigin prop compatibility between React and Vue JSX
15128
+ ,
14299
15129
  crossOrigin: crossOrigin,
14300
15130
  src: image,
14301
15131
  alt: alt,
14302
15132
  loading: loading
14303
15133
  }), !isLoading && hasError && /*#__PURE__*/jsx("span", {
14304
15134
  className: element$4('fallback'),
14305
- children: hasIconErrorFallback ? /*#__PURE__*/jsx(Icon, {
15135
+ children: hasIconErrorFallback ? Icon$1({
14306
15136
  icon: fallback,
14307
15137
  size: Size$1.xxs,
14308
- theme: theme
15138
+ theme
14309
15139
  }) : fallback
14310
15140
  })]
14311
- }), badge && /*#__PURE__*/React__default.cloneElement(badge, {
15141
+ }), badge]
15142
+ });
15143
+
15144
+ /** Render `RawClickable` as a function since it is a core component which needs to be treated as such */
15145
+ if (isClickable) {
15146
+ return RawClickable$1({
15147
+ ref,
15148
+ ...wrapperProps,
15149
+ className: wrapperClassName,
15150
+ children: innerImage
15151
+ });
15152
+ }
15153
+ return /*#__PURE__*/jsx("div", {
15154
+ ref: ref,
15155
+ ...wrapperProps,
15156
+ className: wrapperClassName,
15157
+ children: innerImage
15158
+ });
15159
+ };
15160
+
15161
+ function useImageLoad(imageURL, imgRef) {
15162
+ const [state, setState] = useState(getImageLoadingState(imgRef));
15163
+
15164
+ // Update state when changing image URL or DOM reference.
15165
+ useEffect(() => {
15166
+ setState(getImageLoadingState(imgRef));
15167
+ }, [imageURL, imgRef]);
15168
+
15169
+ // Listen to `load` and `error` event on image
15170
+ useEffect(() => {
15171
+ const img = imgRef;
15172
+ if (!img) return undefined;
15173
+ const update = event => setState(getImageLoadingState(img, event));
15174
+ img.addEventListener('load', update);
15175
+ img.addEventListener('error', update);
15176
+ return () => {
15177
+ img.removeEventListener('load', update);
15178
+ img.removeEventListener('error', update);
15179
+ };
15180
+ }, [imgRef, imgRef?.src]);
15181
+ return state;
15182
+ }
15183
+
15184
+ // Compute CSS properties to apply the focus point.
15185
+ const useFocusPointStyle = ({
15186
+ image,
15187
+ aspectRatio,
15188
+ focusPoint,
15189
+ imgProps: {
15190
+ width,
15191
+ height
15192
+ } = {}
15193
+ }, element, isLoaded) => {
15194
+ // Get natural image size from imgProps or img element.
15195
+ const imageSize = useMemo(() => getImageSize({
15196
+ image,
15197
+ aspectRatio,
15198
+ focusPoint,
15199
+ width: typeof width === 'number' ? width : undefined,
15200
+ height: typeof height === 'number' ? height : undefined,
15201
+ element,
15202
+ isLoaded
15203
+ }), [aspectRatio, element, focusPoint, height, image, isLoaded, width]);
15204
+
15205
+ // Get container size (dependant on imageSize).
15206
+ const [containerSize, setContainerSize] = useState(undefined);
15207
+ useEffect(function updateContainerSize() {
15208
+ const cWidth = element?.offsetWidth;
15209
+ const cHeight = element?.offsetHeight;
15210
+ if (cWidth && cHeight) {
15211
+ // Update only if needed.
15212
+ setContainerSize(oldContainerSize => oldContainerSize?.width === cWidth && oldContainerSize.height === cHeight ? oldContainerSize : {
15213
+ width: cWidth,
15214
+ height: cHeight
15215
+ });
15216
+ } else if (imageSize) {
15217
+ // Wait for a render (in case the container size is dependent on the image size).
15218
+ requestAnimationFrame(updateContainerSize);
15219
+ }
15220
+ }, [element?.offsetHeight, element?.offsetWidth, imageSize]);
15221
+
15222
+ // Compute style.
15223
+ const style = useMemo(() => calculateFocusPointStyle({
15224
+ image,
15225
+ aspectRatio,
15226
+ focusPoint,
15227
+ element,
15228
+ imageSize,
15229
+ containerSize
15230
+ }), [aspectRatio, containerSize, element, focusPoint, image, imageSize]);
15231
+ return style;
15232
+ };
15233
+
15234
+ /**
15235
+ * Defines the props of the component.
15236
+ */
15237
+
15238
+ /**
15239
+ * Thumbnail component.
15240
+ *
15241
+ * @param props Component props.
15242
+ * @param ref Component ref.
15243
+ * @return React element.
15244
+ */
15245
+ const Thumbnail = forwardRef((props, ref) => {
15246
+ const {
15247
+ isAnyDisabled,
15248
+ otherProps,
15249
+ disabledStateProps
15250
+ } = useDisableStateProps(props);
15251
+ const defaultTheme = useTheme() || Theme$1.light;
15252
+ const {
15253
+ badge,
15254
+ focusPoint,
15255
+ image,
15256
+ imgRef: propImgRef,
15257
+ ...forwardedProps
15258
+ } = otherProps;
15259
+ const [imgElement, setImgElement] = useState();
15260
+
15261
+ // Image loading state.
15262
+ const loadingState = useImageLoad(image, imgElement);
15263
+ const isLoaded = loadingState === 'isLoaded';
15264
+
15265
+ // Focus point.
15266
+ const focusPointStyle = useFocusPointStyle(props, imgElement, isLoaded);
15267
+ return Thumbnail$1({
15268
+ ref,
15269
+ ...forwardedProps,
15270
+ theme: forwardedProps.theme || defaultTheme,
15271
+ isAnyDisabled,
15272
+ disabledStateProps,
15273
+ focusPointStyle,
15274
+ loadingState,
15275
+ imgRef: useMergeRefs(setImgElement, propImgRef),
15276
+ image,
15277
+ badge: badge && /*#__PURE__*/React__default.cloneElement(badge, {
14312
15278
  className: classNames.join(element$4('badge'), badge.props.className)
14313
- })]
15279
+ })
14314
15280
  });
14315
15281
  });
14316
- Thumbnail.displayName = COMPONENT_NAME$4;
15282
+ Thumbnail.displayName = COMPONENT_NAME$3;
14317
15283
  Thumbnail.className = CLASSNAME$4;
14318
15284
  Thumbnail.defaultProps = DEFAULT_PROPS$4;
14319
15285
 
@@ -14332,7 +15298,7 @@ Thumbnail.defaultProps = DEFAULT_PROPS$4;
14332
15298
  * @deprecated
14333
15299
  */
14334
15300
  const ThumbnailAspectRatio = {
14335
- ...AspectRatio
15301
+ ...AspectRatio$1
14336
15302
  };
14337
15303
 
14338
15304
  /**
@@ -14357,7 +15323,7 @@ const ThumbnailObjectFit = {
14357
15323
  /**
14358
15324
  * Component display name.
14359
15325
  */
14360
- const COMPONENT_NAME$3 = 'Toolbar';
15326
+ const TOOLBAR_NAME = 'Toolbar';
14361
15327
 
14362
15328
  /**
14363
15329
  * Component default class name and class prefix.
@@ -14366,7 +15332,7 @@ const CLASSNAME$3 = 'lumx-toolbar';
14366
15332
  const {
14367
15333
  block: block$3,
14368
15334
  element: element$3
14369
- } = classNames.bem(CLASSNAME$3);
15335
+ } = bem(CLASSNAME$3);
14370
15336
 
14371
15337
  /**
14372
15338
  * Component default props.
@@ -14377,21 +15343,21 @@ const DEFAULT_PROPS$3 = {};
14377
15343
  * Toolbar component.
14378
15344
  *
14379
15345
  * @param props Component props.
14380
- * @param ref Component ref.
14381
- * @return React element.
15346
+ * @return JSX element.
14382
15347
  */
14383
- const Toolbar = forwardRef((props, ref) => {
15348
+ const Toolbar$1 = props => {
14384
15349
  const {
14385
15350
  after,
14386
15351
  before,
14387
15352
  className,
14388
15353
  label,
15354
+ ref,
14389
15355
  ...forwardedProps
14390
15356
  } = props;
14391
15357
  return /*#__PURE__*/jsxs("div", {
14392
15358
  ref: ref,
14393
15359
  ...forwardedProps,
14394
- className: classNames.join(className, block$3({
15360
+ className: classnames(className, block$3({
14395
15361
  'has-after': Boolean(after),
14396
15362
  'has-before': Boolean(before),
14397
15363
  'has-label': Boolean(label)
@@ -14407,8 +15373,26 @@ const Toolbar = forwardRef((props, ref) => {
14407
15373
  children: after
14408
15374
  })]
14409
15375
  });
15376
+ };
15377
+
15378
+ /**
15379
+ * Defines the props of the component.
15380
+ */
15381
+
15382
+ /**
15383
+ * Toolbar component.
15384
+ *
15385
+ * @param props Component props.
15386
+ * @param ref Component ref.
15387
+ * @return React element.
15388
+ */
15389
+ const Toolbar = forwardRef((props, ref) => {
15390
+ return Toolbar$1({
15391
+ ref,
15392
+ ...props
15393
+ });
14410
15394
  });
14411
- Toolbar.displayName = COMPONENT_NAME$3;
15395
+ Toolbar.displayName = TOOLBAR_NAME;
14412
15396
  Toolbar.className = CLASSNAME$3;
14413
15397
  Toolbar.defaultProps = DEFAULT_PROPS$3;
14414
15398
 
@@ -14763,7 +15747,7 @@ const {
14763
15747
  * Component default props.
14764
15748
  */
14765
15749
  const DEFAULT_PROPS$1 = {
14766
- aspectRatio: AspectRatio.horizontal,
15750
+ aspectRatio: AspectRatio$1.horizontal,
14767
15751
  size: Size$1.xl,
14768
15752
  variant: UploaderVariant.square
14769
15753
  };
@@ -14795,7 +15779,7 @@ const Uploader = forwardRef((props, ref) => {
14795
15779
  ...forwardedProps
14796
15780
  } = otherProps;
14797
15781
  // Adjust to square aspect ratio when using circle variants.
14798
- const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio.square : aspectRatio;
15782
+ const adjustedAspectRatio = variant === UploaderVariant.circle ? AspectRatio$1.square : aspectRatio;
14799
15783
  const handleClick = React__default.useCallback(evt => {
14800
15784
  if (isAnyDisabled) {
14801
15785
  evt.preventDefault();
@@ -15008,5 +15992,5 @@ UserBlock.displayName = COMPONENT_NAME;
15008
15992
  UserBlock.className = CLASSNAME;
15009
15993
  UserBlock.defaultProps = DEFAULT_PROPS;
15010
15994
 
15011
- 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$15 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 };
15995
+ export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1e as CLASSNAME, COMBOBOX_OPTION_CLASSNAME, COMPONENT_NAME$1d as COMPONENT_NAME, Checkbox, Chip, ChipGroup, ComboboxOption, ComboboxOptionAction, ComboboxOptionMoreInfo, ComboboxOptionSkeleton, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$16 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, LUMX_CLASSNAME, 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 };
15012
15996
  //# sourceMappingURL=index.js.map