@lumx/react 4.0.1-alpha.0 → 4.0.1-alpha.10

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 (5) hide show
  1. package/index.d.ts +276 -135
  2. package/index.js +557 -554
  3. package/index.js.map +1 -1
  4. package/package.json +12 -9
  5. package/utils/index.d.ts +2 -1
package/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { Kind, Size, ColorPalette, Emphasis, Theme, AspectRatio, DIALOG_TRANSITION_DURATION, Orientation, Typography, Alignment, ColorVariant, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
1
+ import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis, Theme as Theme$1, AspectRatio, DIALOG_TRANSITION_DURATION, Orientation, Typography, Alignment, ColorVariant, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
2
2
  export * from '@lumx/core/js/constants';
3
3
  export * from '@lumx/core/js/types';
4
4
  import * as React from 'react';
@@ -10,7 +10,7 @@ import { mdiInformation } from '@lumx/icons/esm/information';
10
10
  import isBoolean from 'lodash/isBoolean';
11
11
  import isEmpty from 'lodash/isEmpty';
12
12
  import kebabCase from 'lodash/kebabCase';
13
- import { classNames as classNames$1, onEnterPressed, onEscapePressed, onButtonPressed, detectHorizontalSwipe } from '@lumx/core/js/utils';
13
+ import { classNames, onEnterPressed, onEscapePressed, onButtonPressed, detectHorizontalSwipe } from '@lumx/core/js/utils';
14
14
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
15
15
  import last from 'lodash/last';
16
16
  import pull from 'lodash/pull';
@@ -43,10 +43,8 @@ import range from 'lodash/range';
43
43
  import { mdiPlayCircleOutline } from '@lumx/icons/esm/play-circle-outline';
44
44
  import { mdiPauseCircleOutline } from '@lumx/icons/esm/pause-circle-outline';
45
45
  import chunk from 'lodash/chunk';
46
- import debounce$1 from 'lodash/debounce';
47
46
  import ReactDOM from 'react-dom';
48
47
  import take from 'lodash/take';
49
- import isObject from 'lodash/isObject';
50
48
  import { mdiRadioboxBlank } from '@lumx/icons/esm/radiobox-blank';
51
49
  import { mdiRadioboxMarked } from '@lumx/icons/esm/radiobox-marked';
52
50
  import { mdiMenuDown } from '@lumx/icons/esm/menu-down';
@@ -58,7 +56,7 @@ function getDefaultExportFromCjs (x) {
58
56
  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
59
57
  }
60
58
 
61
- var classnames = {exports: {}};
59
+ var classnames$1 = {exports: {}};
62
60
 
63
61
  /*!
64
62
  Copyright (c) 2018 Jed Watson.
@@ -69,7 +67,7 @@ var classnames = {exports: {}};
69
67
  var hasRequiredClassnames;
70
68
 
71
69
  function requireClassnames () {
72
- if (hasRequiredClassnames) return classnames.exports;
70
+ if (hasRequiredClassnames) return classnames$1.exports;
73
71
  hasRequiredClassnames = 1;
74
72
  (function (module) {
75
73
  /* global define */
@@ -120,12 +118,12 @@ function requireClassnames () {
120
118
  window.classNames = classNames;
121
119
  }
122
120
  }());
123
- } (classnames));
124
- return classnames.exports;
121
+ } (classnames$1));
122
+ return classnames$1.exports;
125
123
  }
126
124
 
127
125
  var classnamesExports = requireClassnames();
128
- var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
126
+ var classnames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
129
127
 
130
128
  /**
131
129
  * Get the basic CSS class for the given type.
@@ -192,7 +190,7 @@ function handleBasicClasses({
192
190
  })] = isBoolean(props[prop]) ? props[prop] : !_isEmpty(props[prop]);
193
191
  });
194
192
  }
195
- return classNames(prefix, otherClasses);
193
+ return classnames(prefix, otherClasses);
196
194
  }
197
195
 
198
196
  let i = 0;
@@ -218,20 +216,20 @@ const forwardRef = React__default.forwardRef;
218
216
  * Associative map from message kind to color and icon.
219
217
  */
220
218
  const CONFIG$1 = {
221
- [Kind.error]: {
222
- color: ColorPalette.red,
219
+ [Kind$1.error]: {
220
+ color: ColorPalette$1.red,
223
221
  icon: mdiAlert
224
222
  },
225
- [Kind.info]: {
226
- color: ColorPalette.blue,
223
+ [Kind$1.info]: {
224
+ color: ColorPalette$1.blue,
227
225
  icon: mdiInformation
228
226
  },
229
- [Kind.success]: {
230
- color: ColorPalette.green,
227
+ [Kind$1.success]: {
228
+ color: ColorPalette$1.green,
231
229
  icon: mdiCheckCircle
232
230
  },
233
- [Kind.warning]: {
234
- color: ColorPalette.yellow,
231
+ [Kind$1.warning]: {
232
+ color: ColorPalette$1.yellow,
235
233
  icon: mdiAlertCircle
236
234
  }
237
235
  };
@@ -249,9 +247,9 @@ const CLASSNAME$1i = 'lumx-alert-dialog';
249
247
  /**
250
248
  * Component default props.
251
249
  */
252
- const DEFAULT_PROPS$16 = {
253
- size: Size.tiny,
254
- kind: Kind.info
250
+ const DEFAULT_PROPS$15 = {
251
+ size: Size$1.tiny,
252
+ kind: Kind$1.info
255
253
  };
256
254
 
257
255
  /**
@@ -270,8 +268,8 @@ const AlertDialog = forwardRef((props, ref) => {
270
268
  className,
271
269
  cancelProps,
272
270
  confirmProps,
273
- kind = DEFAULT_PROPS$16.kind,
274
- size = DEFAULT_PROPS$16.size,
271
+ kind = DEFAULT_PROPS$15.kind,
272
+ size = DEFAULT_PROPS$15.size,
275
273
  dialogProps,
276
274
  children,
277
275
  ...forwardedProps
@@ -312,7 +310,7 @@ const AlertDialog = forwardRef((props, ref) => {
312
310
  'aria-describedby': descriptionId,
313
311
  ...dialogProps
314
312
  },
315
- className: classNames$1.join(className, handleBasicClasses({
313
+ className: classNames.join(className, handleBasicClasses({
316
314
  kind,
317
315
  prefix: CLASSNAME$1i
318
316
  })),
@@ -322,7 +320,7 @@ const AlertDialog = forwardRef((props, ref) => {
322
320
  className: "lumx-spacing-margin-horizontal",
323
321
  before: /*#__PURE__*/jsx(Icon, {
324
322
  icon: icon,
325
- size: Size.s,
323
+ size: Size$1.s,
326
324
  color: color
327
325
  }),
328
326
  label: /*#__PURE__*/jsx("h2", {
@@ -360,7 +358,7 @@ const AlertDialog = forwardRef((props, ref) => {
360
358
  });
361
359
  AlertDialog.displayName = COMPONENT_NAME$1k;
362
360
  AlertDialog.className = CLASSNAME$1i;
363
- AlertDialog.defaultProps = DEFAULT_PROPS$16;
361
+ AlertDialog.defaultProps = DEFAULT_PROPS$15;
364
362
 
365
363
  /**
366
364
  * Hook focusing an element when defined and `focus` boolean `true`.
@@ -461,7 +459,7 @@ const CLASSNAME$1h = 'lumx-autocomplete';
461
459
  /**
462
460
  * Component default props.
463
461
  */
464
- const DEFAULT_PROPS$15 = {
462
+ const DEFAULT_PROPS$14 = {
465
463
  anchorToInput: false,
466
464
  closeOnClick: false,
467
465
  closeOnClickAway: true,
@@ -483,13 +481,13 @@ const Autocomplete = forwardRef((props, ref) => {
483
481
  otherProps
484
482
  } = useDisableStateProps(props);
485
483
  const {
486
- anchorToInput = DEFAULT_PROPS$15.anchorToInput,
484
+ anchorToInput = DEFAULT_PROPS$14.anchorToInput,
487
485
  children,
488
486
  chips,
489
487
  className,
490
- closeOnClick = DEFAULT_PROPS$15.closeOnClick,
491
- closeOnClickAway = DEFAULT_PROPS$15.closeOnClickAway,
492
- closeOnEscape = DEFAULT_PROPS$15.closeOnEscape,
488
+ closeOnClick = DEFAULT_PROPS$14.closeOnClick,
489
+ closeOnClickAway = DEFAULT_PROPS$14.closeOnClickAway,
490
+ closeOnEscape = DEFAULT_PROPS$14.closeOnEscape,
493
491
  error,
494
492
  fitToAnchorWidth,
495
493
  hasError,
@@ -510,7 +508,7 @@ const Autocomplete = forwardRef((props, ref) => {
510
508
  onInfiniteScroll,
511
509
  placeholder,
512
510
  placement,
513
- shouldFocusOnClose = DEFAULT_PROPS$15.shouldFocusOnClose,
511
+ shouldFocusOnClose = DEFAULT_PROPS$14.shouldFocusOnClose,
514
512
  theme = defaultTheme,
515
513
  value,
516
514
  textFieldProps = {},
@@ -523,7 +521,7 @@ const Autocomplete = forwardRef((props, ref) => {
523
521
  return /*#__PURE__*/jsxs("div", {
524
522
  ref: ref,
525
523
  ...forwardedProps,
526
- className: classNames$1.join(className, CLASSNAME$1h),
524
+ className: classNames.join(className, CLASSNAME$1h),
527
525
  children: [/*#__PURE__*/jsx(TextField, {
528
526
  ...textFieldProps,
529
527
  chips: chips,
@@ -565,7 +563,7 @@ const Autocomplete = forwardRef((props, ref) => {
565
563
  });
566
564
  Autocomplete.displayName = COMPONENT_NAME$1j;
567
565
  Autocomplete.className = CLASSNAME$1h;
568
- Autocomplete.defaultProps = DEFAULT_PROPS$15;
566
+ Autocomplete.defaultProps = DEFAULT_PROPS$14;
569
567
 
570
568
  /**
571
569
  * Component display name.
@@ -580,7 +578,7 @@ const CLASSNAME$1g = 'lumx-autocomplete-multiple';
580
578
  /**
581
579
  * Component default props.
582
580
  */
583
- const DEFAULT_PROPS$14 = {
581
+ const DEFAULT_PROPS$13 = {
584
582
  closeOnClickAway: true,
585
583
  closeOnEscape: true,
586
584
  selectedChipRender(choice, index, onClear, isDisabled) {
@@ -588,10 +586,10 @@ const DEFAULT_PROPS$14 = {
588
586
  return /*#__PURE__*/jsx(Chip, {
589
587
  after: onClear && /*#__PURE__*/jsx(Icon, {
590
588
  icon: mdiClose,
591
- size: Size.xxs
589
+ size: Size$1.xxs
592
590
  }),
593
591
  isDisabled: isDisabled,
594
- size: Size.s,
592
+ size: Size$1.s,
595
593
  onAfterClick: onClick,
596
594
  onClick: onClick,
597
595
  children: choice
@@ -620,8 +618,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
620
618
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
621
619
  chipsAlignment,
622
620
  className,
623
- closeOnClickAway = DEFAULT_PROPS$14.closeOnClickAway,
624
- closeOnEscape = DEFAULT_PROPS$14.closeOnEscape,
621
+ closeOnClickAway = DEFAULT_PROPS$13.closeOnClickAway,
622
+ closeOnEscape = DEFAULT_PROPS$13.closeOnEscape,
625
623
  fitToAnchorWidth,
626
624
  hasError,
627
625
  helper,
@@ -643,19 +641,19 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
643
641
  onKeyDown,
644
642
  placeholder,
645
643
  placement,
646
- selectedChipRender = DEFAULT_PROPS$14.selectedChipRender,
644
+ selectedChipRender = DEFAULT_PROPS$13.selectedChipRender,
647
645
  shouldFocusOnClose,
648
646
  theme = defaultTheme,
649
647
  type,
650
648
  value,
651
- values = DEFAULT_PROPS$14.values,
649
+ values = DEFAULT_PROPS$13.values,
652
650
  ...forwardedProps
653
651
  } = otherProps;
654
652
  return /*#__PURE__*/jsx(Autocomplete, {
655
653
  ref: ref,
656
654
  ...forwardedProps,
657
655
  anchorToInput: anchorToInput,
658
- className: classNames$1.join(className, CLASSNAME$1g),
656
+ className: classNames.join(className, CLASSNAME$1g),
659
657
  name: name,
660
658
  value: value,
661
659
  onChange: onChange,
@@ -690,7 +688,7 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
690
688
  });
691
689
  AutocompleteMultiple.displayName = COMPONENT_NAME$1i;
692
690
  AutocompleteMultiple.className = CLASSNAME$1g;
693
- AutocompleteMultiple.defaultProps = DEFAULT_PROPS$14;
691
+ AutocompleteMultiple.defaultProps = DEFAULT_PROPS$13;
694
692
 
695
693
  /**
696
694
  * Component display name.
@@ -705,8 +703,8 @@ const CLASSNAME$1f = 'lumx-avatar';
705
703
  /**
706
704
  * Component default props.
707
705
  */
708
- const DEFAULT_PROPS$13 = {
709
- size: Size.m
706
+ const DEFAULT_PROPS$12 = {
707
+ size: Size$1.m
710
708
  };
711
709
 
712
710
  /**
@@ -717,7 +715,7 @@ const DEFAULT_PROPS$13 = {
717
715
  * @return React element.
718
716
  */
719
717
  const Avatar = forwardRef((props, ref) => {
720
- const defaultTheme = useTheme() || Theme.light;
718
+ const defaultTheme = useTheme() || Theme$1.light;
721
719
  const {
722
720
  actions,
723
721
  alt,
@@ -728,7 +726,7 @@ const Avatar = forwardRef((props, ref) => {
728
726
  linkAs,
729
727
  onClick,
730
728
  onKeyPress,
731
- size = DEFAULT_PROPS$13.size,
729
+ size = DEFAULT_PROPS$12.size,
732
730
  theme = defaultTheme,
733
731
  thumbnailProps,
734
732
  ...forwardedProps
@@ -736,7 +734,7 @@ const Avatar = forwardRef((props, ref) => {
736
734
  return /*#__PURE__*/jsxs("div", {
737
735
  ref: ref,
738
736
  ...forwardedProps,
739
- className: classNames$1.join(className, handleBasicClasses({
737
+ className: classNames.join(className, handleBasicClasses({
740
738
  prefix: CLASSNAME$1f,
741
739
  size,
742
740
  theme
@@ -764,7 +762,7 @@ const Avatar = forwardRef((props, ref) => {
764
762
  });
765
763
  Avatar.displayName = COMPONENT_NAME$1h;
766
764
  Avatar.className = CLASSNAME$1f;
767
- Avatar.defaultProps = DEFAULT_PROPS$13;
765
+ Avatar.defaultProps = DEFAULT_PROPS$12;
768
766
 
769
767
  /**
770
768
  * Component display name.
@@ -779,8 +777,8 @@ const CLASSNAME$1e = 'lumx-badge';
779
777
  /**
780
778
  * Component default props.
781
779
  */
782
- const DEFAULT_PROPS$12 = {
783
- color: ColorPalette.primary
780
+ const DEFAULT_PROPS$11 = {
781
+ color: ColorPalette$1.primary
784
782
  };
785
783
 
786
784
  /**
@@ -794,13 +792,13 @@ const Badge = forwardRef((props, ref) => {
794
792
  const {
795
793
  children,
796
794
  className,
797
- color = DEFAULT_PROPS$12.color,
795
+ color = DEFAULT_PROPS$11.color,
798
796
  ...forwardedProps
799
797
  } = props;
800
798
  return /*#__PURE__*/jsx("div", {
801
799
  ref: ref,
802
800
  ...forwardedProps,
803
- className: classNames$1.join(className, handleBasicClasses({
801
+ className: classNames.join(className, handleBasicClasses({
804
802
  prefix: CLASSNAME$1e,
805
803
  color
806
804
  })),
@@ -809,7 +807,7 @@ const Badge = forwardRef((props, ref) => {
809
807
  });
810
808
  Badge.displayName = COMPONENT_NAME$1g;
811
809
  Badge.className = CLASSNAME$1e;
812
- Badge.defaultProps = DEFAULT_PROPS$12;
810
+ Badge.defaultProps = DEFAULT_PROPS$11;
813
811
 
814
812
  /**
815
813
  * Component default class name and class prefix.
@@ -825,7 +823,7 @@ const BadgeWrapper = forwardRef((props, ref) => {
825
823
  return /*#__PURE__*/jsxs("div", {
826
824
  ref: ref,
827
825
  ...forwardedProps,
828
- className: classNames$1.join(className, CLASSNAME$1d),
826
+ className: classNames.join(className, CLASSNAME$1d),
829
827
  children: [children, badge && /*#__PURE__*/jsx("div", {
830
828
  className: `${CLASSNAME$1d}__badge`,
831
829
  children: badge
@@ -923,8 +921,8 @@ const renderButtonWrapper = props => {
923
921
  variant,
924
922
  fullWidth
925
923
  } = props;
926
- const adaptedColor = emphasis === Emphasis.low && (color === ColorPalette.light ? ColorPalette.dark : ColorPalette.light);
927
- const wrapperClassName = classNames$1.join(handleBasicClasses({
924
+ const adaptedColor = emphasis === Emphasis.low && (color === ColorPalette$1.light ? ColorPalette$1.dark : ColorPalette$1.light);
925
+ const wrapperClassName = classNames.join(handleBasicClasses({
928
926
  color: adaptedColor,
929
927
  prefix: BUTTON_WRAPPER_CLASSNAME,
930
928
  variant,
@@ -973,7 +971,7 @@ const ButtonRoot = forwardRef((props, ref) => {
973
971
  fullWidth,
974
972
  ...forwardedProps
975
973
  } = otherProps;
976
- const adaptedColor = color || emphasis !== Emphasis.high && theme === Theme.dark && ColorPalette.light || emphasis === Emphasis.high && ColorPalette.primary || ColorPalette.dark;
974
+ const adaptedColor = color || emphasis !== Emphasis.high && theme === Theme$1.dark && ColorPalette$1.light || emphasis === Emphasis.high && ColorPalette$1.primary || ColorPalette$1.dark;
977
975
  if (hasBackground) {
978
976
  return renderButtonWrapper({
979
977
  ...props,
@@ -982,7 +980,7 @@ const ButtonRoot = forwardRef((props, ref) => {
982
980
  color: adaptedColor
983
981
  });
984
982
  }
985
- const buttonClassName = classNames$1.join(className, handleBasicClasses({
983
+ const buttonClassName = classNames.join(className, handleBasicClasses({
986
984
  color: adaptedColor,
987
985
  emphasis,
988
986
  isSelected,
@@ -1029,9 +1027,9 @@ const CLASSNAME$1c = 'lumx-button';
1029
1027
  /**
1030
1028
  * Component default props.
1031
1029
  */
1032
- const DEFAULT_PROPS$11 = {
1030
+ const DEFAULT_PROPS$10 = {
1033
1031
  emphasis: Emphasis.high,
1034
- size: Size.m
1032
+ size: Size$1.m
1035
1033
  };
1036
1034
 
1037
1035
  /**
@@ -1042,18 +1040,18 @@ const DEFAULT_PROPS$11 = {
1042
1040
  * @return React element.
1043
1041
  */
1044
1042
  const Button = forwardRef((props, ref) => {
1045
- const defaultTheme = useTheme() || Theme.light;
1043
+ const defaultTheme = useTheme() || Theme$1.light;
1046
1044
  const {
1047
1045
  children,
1048
1046
  className,
1049
- emphasis = DEFAULT_PROPS$11.emphasis,
1047
+ emphasis = DEFAULT_PROPS$10.emphasis,
1050
1048
  leftIcon,
1051
1049
  rightIcon,
1052
- size = DEFAULT_PROPS$11.size,
1050
+ size = DEFAULT_PROPS$10.size,
1053
1051
  theme = defaultTheme,
1054
1052
  ...forwardedProps
1055
1053
  } = props;
1056
- const buttonClassName = classNames$1.join(className, getBasicClass({
1054
+ const buttonClassName = classNames.join(className, getBasicClass({
1057
1055
  prefix: CLASSNAME$1c,
1058
1056
  type: 'hasLeftIcon',
1059
1057
  value: !isEmpty(leftIcon)
@@ -1093,7 +1091,7 @@ const Button = forwardRef((props, ref) => {
1093
1091
  });
1094
1092
  Button.displayName = COMPONENT_NAME$1e;
1095
1093
  Button.className = CLASSNAME$1c;
1096
- Button.defaultProps = DEFAULT_PROPS$11;
1094
+ Button.defaultProps = DEFAULT_PROPS$10;
1097
1095
 
1098
1096
  /**
1099
1097
  * Component display name.
@@ -1108,9 +1106,9 @@ const CLASSNAME$1b = 'lumx-icon-button';
1108
1106
  /**
1109
1107
  * Component default props.
1110
1108
  */
1111
- const DEFAULT_PROPS$10 = {
1109
+ const DEFAULT_PROPS$$ = {
1112
1110
  emphasis: Emphasis.high,
1113
- size: Size.m
1111
+ size: Size$1.m
1114
1112
  };
1115
1113
 
1116
1114
  /**
@@ -1121,13 +1119,13 @@ const DEFAULT_PROPS$10 = {
1121
1119
  * @return React element.
1122
1120
  */
1123
1121
  const IconButton = forwardRef((props, ref) => {
1124
- const defaultTheme = useTheme() || Theme.light;
1122
+ const defaultTheme = useTheme() || Theme$1.light;
1125
1123
  const {
1126
- emphasis = DEFAULT_PROPS$10.emphasis,
1124
+ emphasis = DEFAULT_PROPS$$.emphasis,
1127
1125
  image,
1128
1126
  icon,
1129
1127
  label,
1130
- size = DEFAULT_PROPS$10.size,
1128
+ size = DEFAULT_PROPS$$.size,
1131
1129
  theme = defaultTheme,
1132
1130
  tooltipProps,
1133
1131
  hideTooltip,
@@ -1159,7 +1157,7 @@ const IconButton = forwardRef((props, ref) => {
1159
1157
  });
1160
1158
  IconButton.displayName = COMPONENT_NAME$1d;
1161
1159
  IconButton.className = CLASSNAME$1b;
1162
- IconButton.defaultProps = DEFAULT_PROPS$10;
1160
+ IconButton.defaultProps = DEFAULT_PROPS$$;
1163
1161
 
1164
1162
  /**
1165
1163
  * Component display name.
@@ -1174,7 +1172,7 @@ const CLASSNAME$1a = 'lumx-button-group';
1174
1172
  /**
1175
1173
  * Component default props.
1176
1174
  */
1177
- const DEFAULT_PROPS$$ = {};
1175
+ const DEFAULT_PROPS$_ = {};
1178
1176
 
1179
1177
  /**
1180
1178
  * ButtonGroup component.
@@ -1192,13 +1190,13 @@ const ButtonGroup = forwardRef((props, ref) => {
1192
1190
  return /*#__PURE__*/jsx("div", {
1193
1191
  ref: ref,
1194
1192
  ...forwardedProps,
1195
- className: classNames$1.join(className, CLASSNAME$1a),
1193
+ className: classNames.join(className, CLASSNAME$1a),
1196
1194
  children: children
1197
1195
  });
1198
1196
  });
1199
1197
  ButtonGroup.displayName = COMPONENT_NAME$1c;
1200
1198
  ButtonGroup.className = CLASSNAME$1a;
1201
- ButtonGroup.defaultProps = DEFAULT_PROPS$$;
1199
+ ButtonGroup.defaultProps = DEFAULT_PROPS$_;
1202
1200
 
1203
1201
  /**
1204
1202
  * Intermediate state of checkbox.
@@ -1222,7 +1220,7 @@ const CLASSNAME$19 = 'lumx-checkbox';
1222
1220
  /**
1223
1221
  * Component default props.
1224
1222
  */
1225
- const DEFAULT_PROPS$_ = {};
1223
+ const DEFAULT_PROPS$Z = {};
1226
1224
 
1227
1225
  /**
1228
1226
  * Checkbox component.
@@ -1237,7 +1235,7 @@ const Checkbox = forwardRef((props, ref) => {
1237
1235
  disabledStateProps,
1238
1236
  otherProps
1239
1237
  } = useDisableStateProps(props);
1240
- const defaultTheme = useTheme() || Theme.light;
1238
+ const defaultTheme = useTheme() || Theme$1.light;
1241
1239
  const {
1242
1240
  checked,
1243
1241
  className,
@@ -1269,7 +1267,7 @@ const Checkbox = forwardRef((props, ref) => {
1269
1267
  return /*#__PURE__*/jsxs("div", {
1270
1268
  ref: ref,
1271
1269
  ...forwardedProps,
1272
- className: classNames$1.join(className, handleBasicClasses({
1270
+ className: classNames.join(className, handleBasicClasses({
1273
1271
  // Whether state is intermediate class name will "-checked"
1274
1272
  isChecked: intermediateState ? true : isChecked,
1275
1273
  isDisabled: isAnyDisabled,
@@ -1322,7 +1320,7 @@ const Checkbox = forwardRef((props, ref) => {
1322
1320
  });
1323
1321
  Checkbox.displayName = COMPONENT_NAME$1b;
1324
1322
  Checkbox.className = CLASSNAME$19;
1325
- Checkbox.defaultProps = DEFAULT_PROPS$_;
1323
+ Checkbox.defaultProps = DEFAULT_PROPS$Z;
1326
1324
 
1327
1325
  /**
1328
1326
  * Wrap mouse event handler to stop event propagation.
@@ -1353,8 +1351,8 @@ const CLASSNAME$18 = 'lumx-chip';
1353
1351
  /**
1354
1352
  * Component default props.
1355
1353
  */
1356
- const DEFAULT_PROPS$Z = {
1357
- size: Size.m
1354
+ const DEFAULT_PROPS$Y = {
1355
+ size: Size$1.m
1358
1356
  };
1359
1357
 
1360
1358
  /**
@@ -1365,7 +1363,7 @@ const DEFAULT_PROPS$Z = {
1365
1363
  * @return React element.
1366
1364
  */
1367
1365
  const Chip = forwardRef((props, ref) => {
1368
- const defaultTheme = useTheme() || Theme.light;
1366
+ const defaultTheme = useTheme() || Theme$1.light;
1369
1367
  const {
1370
1368
  isAnyDisabled,
1371
1369
  disabledStateProps,
@@ -1383,7 +1381,7 @@ const Chip = forwardRef((props, ref) => {
1383
1381
  onAfterClick,
1384
1382
  onBeforeClick,
1385
1383
  onClick,
1386
- size = DEFAULT_PROPS$Z.size,
1384
+ size = DEFAULT_PROPS$Y.size,
1387
1385
  theme = defaultTheme,
1388
1386
  href,
1389
1387
  onKeyDown,
@@ -1396,7 +1394,7 @@ const Chip = forwardRef((props, ref) => {
1396
1394
  const isClickable = Boolean(hasOnClick) || Boolean(href) || propIsClickable;
1397
1395
 
1398
1396
  // Adapt color to the theme.
1399
- const chipColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
1397
+ const chipColor = color || (theme === Theme$1.light ? ColorPalette$1.dark : ColorPalette$1.light);
1400
1398
  const handleOnBeforeClick = useStopPropagation(onBeforeClick);
1401
1399
  const handleOnAfterClick = useStopPropagation(onAfterClick);
1402
1400
  const handleKeyDown = evt => {
@@ -1414,7 +1412,7 @@ const Chip = forwardRef((props, ref) => {
1414
1412
  ...forwardedProps,
1415
1413
  href: !disabledStateProps.disabled ? href : undefined,
1416
1414
  ref: ref,
1417
- className: classNames$1.join(className, handleBasicClasses({
1415
+ className: classNames.join(className, handleBasicClasses({
1418
1416
  clickable: isClickable,
1419
1417
  color: chipColor,
1420
1418
  isDisabled: isAnyDisabled,
@@ -1433,7 +1431,7 @@ const Chip = forwardRef((props, ref) => {
1433
1431
  /*#__PURE__*/
1434
1432
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
1435
1433
  jsx("div", {
1436
- className: classNames$1.join(`${CLASSNAME$18}__before`, {
1434
+ className: classNames.join(`${CLASSNAME$18}__before`, {
1437
1435
  [`${CLASSNAME$18}__before--is-clickable`]: hasBeforeClick
1438
1436
  }),
1439
1437
  onClick: handleOnBeforeClick,
@@ -1445,7 +1443,7 @@ const Chip = forwardRef((props, ref) => {
1445
1443
  /*#__PURE__*/
1446
1444
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
1447
1445
  jsx("div", {
1448
- className: classNames$1.join(`${CLASSNAME$18}__after`, {
1446
+ className: classNames.join(`${CLASSNAME$18}__after`, {
1449
1447
  [`${CLASSNAME$18}__after--is-clickable`]: hasAfterClick
1450
1448
  }),
1451
1449
  onClick: handleOnAfterClick,
@@ -1456,7 +1454,7 @@ const Chip = forwardRef((props, ref) => {
1456
1454
  });
1457
1455
  Chip.displayName = COMPONENT_NAME$1a;
1458
1456
  Chip.className = CLASSNAME$18;
1459
- Chip.defaultProps = DEFAULT_PROPS$Z;
1457
+ Chip.defaultProps = DEFAULT_PROPS$Y;
1460
1458
 
1461
1459
  const INITIAL_STATE_ACTIVE_CHIP = -1;
1462
1460
 
@@ -1512,7 +1510,7 @@ const useChipGroupNavigation = (chips, onChipDeleted, initialActiveChip = INITIA
1512
1510
  /**
1513
1511
  * Component default props.
1514
1512
  */
1515
- const DEFAULT_PROPS$Y = {};
1513
+ const DEFAULT_PROPS$X = {};
1516
1514
 
1517
1515
  /**
1518
1516
  * Component display name.
@@ -1541,13 +1539,13 @@ const InternalChipGroup = forwardRef((props, ref) => {
1541
1539
  return /*#__PURE__*/jsx("div", {
1542
1540
  ref: ref,
1543
1541
  ...forwardedProps,
1544
- className: classNames$1.join(className, CLASSNAME$17),
1542
+ className: classNames.join(className, CLASSNAME$17),
1545
1543
  children: children
1546
1544
  });
1547
1545
  });
1548
1546
  InternalChipGroup.displayName = COMPONENT_NAME$19;
1549
1547
  InternalChipGroup.className = CLASSNAME$17;
1550
- InternalChipGroup.defaultProps = DEFAULT_PROPS$Y;
1548
+ InternalChipGroup.defaultProps = DEFAULT_PROPS$X;
1551
1549
  const ChipGroup = Object.assign(InternalChipGroup, {
1552
1550
  useChipGroupNavigation
1553
1551
  });
@@ -1577,7 +1575,7 @@ const CLASSNAME$16 = 'lumx-comment-block';
1577
1575
  /**
1578
1576
  * Component default props.
1579
1577
  */
1580
- const DEFAULT_PROPS$X = {
1578
+ const DEFAULT_PROPS$W = {
1581
1579
  variant: CommentBlockVariant.indented
1582
1580
  };
1583
1581
 
@@ -1589,7 +1587,7 @@ const DEFAULT_PROPS$X = {
1589
1587
  * @return React element.
1590
1588
  */
1591
1589
  const CommentBlock = forwardRef((props, ref) => {
1592
- const defaultTheme = useTheme() || Theme.light;
1590
+ const defaultTheme = useTheme() || Theme$1.light;
1593
1591
  const {
1594
1592
  actions,
1595
1593
  avatarProps,
@@ -1607,13 +1605,13 @@ const CommentBlock = forwardRef((props, ref) => {
1607
1605
  onMouseLeave,
1608
1606
  text,
1609
1607
  theme = defaultTheme,
1610
- variant = DEFAULT_PROPS$X.variant,
1608
+ variant = DEFAULT_PROPS$W.variant,
1611
1609
  ...forwardedProps
1612
1610
  } = props;
1613
1611
  const hasChildren = Children.count(children) > 0;
1614
1612
  return /*#__PURE__*/jsxs("div", {
1615
1613
  ref: ref,
1616
- className: classNames$1.join(className, handleBasicClasses({
1614
+ className: classNames.join(className, handleBasicClasses({
1617
1615
  hasChildren: hasChildren && isOpen,
1618
1616
  hasIndentedChildren: hasChildren && variant === CommentBlockVariant.indented,
1619
1617
  hasLinearChildren: hasChildren && variant === CommentBlockVariant.linear,
@@ -1628,7 +1626,7 @@ const CommentBlock = forwardRef((props, ref) => {
1628
1626
  className: `${CLASSNAME$16}__avatar`,
1629
1627
  children: /*#__PURE__*/jsx(Avatar, {
1630
1628
  ...avatarProps,
1631
- size: Size.m,
1629
+ size: Size$1.m,
1632
1630
  onClick: onClick
1633
1631
  })
1634
1632
  }), /*#__PURE__*/jsxs("div", {
@@ -1677,7 +1675,7 @@ const CommentBlock = forwardRef((props, ref) => {
1677
1675
  });
1678
1676
  CommentBlock.displayName = COMPONENT_NAME$18;
1679
1677
  CommentBlock.className = CLASSNAME$16;
1680
- CommentBlock.defaultProps = DEFAULT_PROPS$X;
1678
+ CommentBlock.defaultProps = DEFAULT_PROPS$W;
1681
1679
 
1682
1680
  /**
1683
1681
  * Add a number of months from a date while resetting the day to prevent month length mismatches.
@@ -2027,7 +2025,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
2027
2025
  label: /*#__PURE__*/jsxs(Fragment, {
2028
2026
  children: [/*#__PURE__*/jsx("span", {
2029
2027
  "aria-live": labelAriaLive,
2030
- className: onMonthChange ? classNames$1.visuallyHidden() : undefined,
2028
+ className: onMonthChange ? classNames.visuallyHidden() : undefined,
2031
2029
  dir: "auto",
2032
2030
  children: monthYear
2033
2031
  }), onMonthChange && /*#__PURE__*/jsx(FlexBox, {
@@ -2087,7 +2085,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
2087
2085
  className: `${CLASSNAME$15}__day-wrapper`,
2088
2086
  children: date && /*#__PURE__*/jsxs(Button, {
2089
2087
  ref: isSelected || !value && isToday ? todayOrSelectedDateRef : null,
2090
- className: classNames$1.join(`${CLASSNAME$15}__month-day`, {
2088
+ className: classNames.join(`${CLASSNAME$15}__month-day`, {
2091
2089
  [`${CLASSNAME$15}__month-day--is-today`]: isToday
2092
2090
  }),
2093
2091
  disabled: isOutOfRange,
@@ -2098,7 +2096,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
2098
2096
  "aria-hidden": true,
2099
2097
  children: formatDayNumber(locale, date)
2100
2098
  }), /*#__PURE__*/jsx("span", {
2101
- className: classNames$1.visuallyHidden(),
2099
+ className: classNames.visuallyHidden(),
2102
2100
  children: date.toLocaleDateString(locale, {
2103
2101
  day: 'numeric',
2104
2102
  month: 'long',
@@ -2770,8 +2768,8 @@ const CLASSNAME$14 = 'lumx-dialog';
2770
2768
  /**
2771
2769
  * Component default props.
2772
2770
  */
2773
- const DEFAULT_PROPS$W = {
2774
- size: Size.big,
2771
+ const DEFAULT_PROPS$V = {
2772
+ size: Size$1.big,
2775
2773
  disableBodyScroll: true
2776
2774
  };
2777
2775
 
@@ -2801,11 +2799,11 @@ const Dialog = forwardRef((props, ref) => {
2801
2799
  parentElement,
2802
2800
  contentRef,
2803
2801
  preventAutoClose,
2804
- size = DEFAULT_PROPS$W.size,
2802
+ size = DEFAULT_PROPS$V.size,
2805
2803
  zIndex,
2806
2804
  dialogProps,
2807
2805
  onVisibilityChange,
2808
- disableBodyScroll = DEFAULT_PROPS$W.disableBodyScroll,
2806
+ disableBodyScroll = DEFAULT_PROPS$V.disableBodyScroll,
2809
2807
  preventCloseOnClick,
2810
2808
  preventCloseOnEscape,
2811
2809
  ...forwardedProps
@@ -2876,7 +2874,7 @@ const Dialog = forwardRef((props, ref) => {
2876
2874
  children: /*#__PURE__*/jsxs("div", {
2877
2875
  ref: mergeRefs(rootRef, ref),
2878
2876
  ...forwardedProps,
2879
- className: classNames$1.join(className, handleBasicClasses({
2877
+ className: classNames.join(className, handleBasicClasses({
2880
2878
  isHidden: !isOpen,
2881
2879
  isLoading,
2882
2880
  isShown: isOpen || isVisible,
@@ -2906,7 +2904,7 @@ const Dialog = forwardRef((props, ref) => {
2906
2904
  ref: wrapperRef,
2907
2905
  children: [(header || headerChildContent) && /*#__PURE__*/jsxs("header", {
2908
2906
  ...headerChildProps,
2909
- className: classNames$1.join(`${CLASSNAME$14}__header`, (forceHeaderDivider || hasTopIntersection) && `${CLASSNAME$14}__header--has-divider`, headerChildProps?.className),
2907
+ className: classNames.join(`${CLASSNAME$14}__header`, (forceHeaderDivider || hasTopIntersection) && `${CLASSNAME$14}__header--has-divider`, headerChildProps?.className),
2910
2908
  children: [header, headerChildContent]
2911
2909
  }), /*#__PURE__*/jsxs("div", {
2912
2910
  ref: mergeRefs(contentRef, localContentRef),
@@ -2920,7 +2918,7 @@ const Dialog = forwardRef((props, ref) => {
2920
2918
  })]
2921
2919
  }), (footer || footerChildContent) && /*#__PURE__*/jsxs("footer", {
2922
2920
  ...footerChildProps,
2923
- className: classNames$1.join(`${CLASSNAME$14}__footer`, (forceFooterDivider || hasBottomIntersection) && `${CLASSNAME$14}__footer--has-divider`, footerChildProps?.className),
2921
+ className: classNames.join(`${CLASSNAME$14}__footer`, (forceFooterDivider || hasBottomIntersection) && `${CLASSNAME$14}__footer--has-divider`, footerChildProps?.className),
2924
2922
  children: [footer, footerChildContent]
2925
2923
  }), isLoading && /*#__PURE__*/jsx("div", {
2926
2924
  className: `${CLASSNAME$14}__progress-overlay`,
@@ -2938,7 +2936,7 @@ const Dialog = forwardRef((props, ref) => {
2938
2936
  });
2939
2937
  Dialog.displayName = COMPONENT_NAME$14;
2940
2938
  Dialog.className = CLASSNAME$14;
2941
- Dialog.defaultProps = DEFAULT_PROPS$W;
2939
+ Dialog.defaultProps = DEFAULT_PROPS$V;
2942
2940
 
2943
2941
  /**
2944
2942
  * Component display name.
@@ -2953,7 +2951,7 @@ const CLASSNAME$13 = 'lumx-divider';
2953
2951
  /**
2954
2952
  * Component default props.
2955
2953
  */
2956
- const DEFAULT_PROPS$V = {};
2954
+ const DEFAULT_PROPS$U = {};
2957
2955
 
2958
2956
  /**
2959
2957
  * Divider component.
@@ -2963,7 +2961,7 @@ const DEFAULT_PROPS$V = {};
2963
2961
  * @return React element.
2964
2962
  */
2965
2963
  const Divider = forwardRef((props, ref) => {
2966
- const defaultTheme = useTheme() || Theme.light;
2964
+ const defaultTheme = useTheme() || Theme$1.light;
2967
2965
  const {
2968
2966
  className,
2969
2967
  theme = defaultTheme,
@@ -2972,7 +2970,7 @@ const Divider = forwardRef((props, ref) => {
2972
2970
  return /*#__PURE__*/jsx("hr", {
2973
2971
  ref: ref,
2974
2972
  ...forwardedProps,
2975
- className: classNames$1.join(className, handleBasicClasses({
2973
+ className: classNames.join(className, handleBasicClasses({
2976
2974
  prefix: CLASSNAME$13,
2977
2975
  theme
2978
2976
  }))
@@ -2980,7 +2978,7 @@ const Divider = forwardRef((props, ref) => {
2980
2978
  });
2981
2979
  Divider.displayName = COMPONENT_NAME$13;
2982
2980
  Divider.className = CLASSNAME$13;
2983
- Divider.defaultProps = DEFAULT_PROPS$V;
2981
+ Divider.defaultProps = DEFAULT_PROPS$U;
2984
2982
 
2985
2983
  /**
2986
2984
  * Component display name.
@@ -3009,14 +3007,14 @@ const DragHandle = forwardRef((props, ref) => {
3009
3007
  return /*#__PURE__*/jsx("div", {
3010
3008
  ref: ref,
3011
3009
  ...forwardedProps,
3012
- className: classNames$1.join(className, handleBasicClasses({
3010
+ className: classNames.join(className, handleBasicClasses({
3013
3011
  prefix: CLASSNAME$12,
3014
3012
  theme
3015
3013
  })),
3016
3014
  children: /*#__PURE__*/jsx(Icon, {
3017
3015
  icon: mdiDragVertical,
3018
- color: theme === Theme.dark ? ColorPalette.light : ColorPalette.dark,
3019
- size: Size.xs
3016
+ color: theme === Theme$1.dark ? ColorPalette$1.light : ColorPalette$1.dark,
3017
+ size: Size$1.xs
3020
3018
  })
3021
3019
  });
3022
3020
  });
@@ -3200,7 +3198,7 @@ const CLASSNAME$11 = 'lumx-list';
3200
3198
  /**
3201
3199
  * Component default props.
3202
3200
  */
3203
- const DEFAULT_PROPS$U = {
3201
+ const DEFAULT_PROPS$T = {
3204
3202
  tabIndex: -1
3205
3203
  };
3206
3204
 
@@ -3219,14 +3217,14 @@ const InternalList = forwardRef((props, ref) => {
3219
3217
  isClickable,
3220
3218
  itemPadding,
3221
3219
  onListItemSelected,
3222
- tabIndex = DEFAULT_PROPS$U.tabIndex,
3220
+ tabIndex = DEFAULT_PROPS$T.tabIndex,
3223
3221
  ...forwardedProps
3224
3222
  } = props;
3225
3223
  return /*#__PURE__*/jsx("ul", {
3226
3224
  ...forwardedProps,
3227
- className: classNames$1.join(className, handleBasicClasses({
3225
+ className: classNames.join(className, handleBasicClasses({
3228
3226
  prefix: CLASSNAME$11,
3229
- itemPadding: itemPadding ?? (isClickable ? Size.big : undefined)
3227
+ itemPadding: itemPadding ?? (isClickable ? Size$1.big : undefined)
3230
3228
  })),
3231
3229
  tabIndex: tabIndex,
3232
3230
  ref: ref,
@@ -3235,7 +3233,7 @@ const InternalList = forwardRef((props, ref) => {
3235
3233
  });
3236
3234
  InternalList.displayName = COMPONENT_NAME$11;
3237
3235
  InternalList.className = CLASSNAME$11;
3238
- InternalList.defaultProps = DEFAULT_PROPS$U;
3236
+ InternalList.defaultProps = DEFAULT_PROPS$T;
3239
3237
  const List = Object.assign(InternalList, {
3240
3238
  useKeyboardListNavigation
3241
3239
  });
@@ -3245,7 +3243,7 @@ const List = Object.assign(InternalList, {
3245
3243
  */
3246
3244
  const skipRender = (predicate, Component) => {
3247
3245
  const Wrapper = /*#__PURE__*/React__default.forwardRef((props, ref) => {
3248
- if (!DOCUMENT) {
3246
+ if (!predicate(props)) {
3249
3247
  // Can't render in SSR.
3250
3248
  return null;
3251
3249
  }
@@ -5676,7 +5674,7 @@ const CLASSNAME$10 = 'lumx-popover';
5676
5674
  /**
5677
5675
  * Component default props.
5678
5676
  */
5679
- const DEFAULT_PROPS$T = {
5677
+ const DEFAULT_PROPS$S = {
5680
5678
  elevation: 3,
5681
5679
  placement: Placement.AUTO,
5682
5680
  focusAnchorOnClose: true,
@@ -5693,24 +5691,24 @@ const _InnerPopover = forwardRef((props, ref) => {
5693
5691
  className,
5694
5692
  closeOnClickAway,
5695
5693
  closeOnEscape,
5696
- elevation = DEFAULT_PROPS$T.elevation,
5694
+ elevation = DEFAULT_PROPS$S.elevation,
5697
5695
  focusElement,
5698
5696
  hasArrow,
5699
5697
  isOpen,
5700
5698
  onClose,
5701
5699
  parentElement,
5702
- usePortal = DEFAULT_PROPS$T.usePortal,
5703
- focusAnchorOnClose = DEFAULT_PROPS$T.focusAnchorOnClose,
5700
+ usePortal = DEFAULT_PROPS$S.usePortal,
5701
+ focusAnchorOnClose = DEFAULT_PROPS$S.focusAnchorOnClose,
5704
5702
  withFocusTrap,
5705
5703
  boundaryRef,
5706
5704
  fitToAnchorWidth,
5707
5705
  fitWithinViewportHeight,
5708
5706
  focusTrapZoneElement,
5709
5707
  offset,
5710
- placement = DEFAULT_PROPS$T.placement,
5708
+ placement = DEFAULT_PROPS$S.placement,
5711
5709
  style,
5712
5710
  theme,
5713
- zIndex = DEFAULT_PROPS$T.zIndex,
5711
+ zIndex = DEFAULT_PROPS$S.zIndex,
5714
5712
  ...forwardedProps
5715
5713
  } = props;
5716
5714
  const popoverRef = useRef(null);
@@ -5751,7 +5749,7 @@ const _InnerPopover = forwardRef((props, ref) => {
5751
5749
  children: /*#__PURE__*/jsxs(Component, {
5752
5750
  ...forwardedProps,
5753
5751
  ref: mergedRefs,
5754
- className: classNames$1.join(className, handleBasicClasses({
5752
+ className: classNames.join(className, handleBasicClasses({
5755
5753
  prefix: CLASSNAME$10,
5756
5754
  theme,
5757
5755
  elevation: Math.min(elevation || 0, 5),
@@ -5796,7 +5794,7 @@ const Popover = skipRender(
5796
5794
  () => Boolean(DOCUMENT), _InnerPopover);
5797
5795
  Popover.displayName = COMPONENT_NAME$10;
5798
5796
  Popover.className = CLASSNAME$10;
5799
- Popover.defaultProps = DEFAULT_PROPS$T;
5797
+ Popover.defaultProps = DEFAULT_PROPS$S;
5800
5798
 
5801
5799
  // The error margin in px we want to have for triggering infinite scroll
5802
5800
  const SCROLL_TRIGGER_MARGIN = 5;
@@ -5852,7 +5850,7 @@ const CLASSNAME$$ = 'lumx-dropdown';
5852
5850
  /**
5853
5851
  * Component default props.
5854
5852
  */
5855
- const DEFAULT_PROPS$S = {
5853
+ const DEFAULT_PROPS$R = {
5856
5854
  closeOnClick: true,
5857
5855
  closeOnClickAway: true,
5858
5856
  closeOnEscape: true,
@@ -5875,18 +5873,18 @@ const Dropdown = forwardRef((props, ref) => {
5875
5873
  anchorRef,
5876
5874
  children,
5877
5875
  className,
5878
- closeOnClick = DEFAULT_PROPS$S.closeOnClick,
5879
- closeOnClickAway = DEFAULT_PROPS$S.closeOnClickAway,
5880
- closeOnEscape = DEFAULT_PROPS$S.closeOnEscape,
5881
- fitToAnchorWidth = DEFAULT_PROPS$S.fitToAnchorWidth,
5882
- fitWithinViewportHeight = DEFAULT_PROPS$S.fitWithinViewportHeight,
5876
+ closeOnClick = DEFAULT_PROPS$R.closeOnClick,
5877
+ closeOnClickAway = DEFAULT_PROPS$R.closeOnClickAway,
5878
+ closeOnEscape = DEFAULT_PROPS$R.closeOnEscape,
5879
+ fitToAnchorWidth = DEFAULT_PROPS$R.fitToAnchorWidth,
5880
+ fitWithinViewportHeight = DEFAULT_PROPS$R.fitWithinViewportHeight,
5883
5881
  isOpen,
5884
5882
  offset,
5885
- focusAnchorOnClose = DEFAULT_PROPS$S.focusAnchorOnClose,
5883
+ focusAnchorOnClose = DEFAULT_PROPS$R.focusAnchorOnClose,
5886
5884
  onClose,
5887
5885
  onInfiniteScroll,
5888
- placement = DEFAULT_PROPS$S.placement,
5889
- shouldFocusOnOpen = DEFAULT_PROPS$S.shouldFocusOnOpen,
5886
+ placement = DEFAULT_PROPS$R.placement,
5887
+ shouldFocusOnOpen = DEFAULT_PROPS$R.shouldFocusOnOpen,
5890
5888
  zIndex,
5891
5889
  ...forwardedProps
5892
5890
  } = props;
@@ -5911,7 +5909,7 @@ const Dropdown = forwardRef((props, ref) => {
5911
5909
  ...forwardedProps,
5912
5910
  focusAnchorOnClose: focusAnchorOnClose,
5913
5911
  anchorRef: anchorRef,
5914
- className: classNames$1.join(className, CLASSNAME$$),
5912
+ className: classNames.join(className, CLASSNAME$$),
5915
5913
  elevation: 0,
5916
5914
  closeOnClickAway: closeOnClickAway,
5917
5915
  closeOnEscape: closeOnEscape,
@@ -5932,7 +5930,7 @@ const Dropdown = forwardRef((props, ref) => {
5932
5930
  });
5933
5931
  Dropdown.displayName = COMPONENT_NAME$$;
5934
5932
  Dropdown.className = CLASSNAME$$;
5935
- Dropdown.defaultProps = DEFAULT_PROPS$S;
5933
+ Dropdown.defaultProps = DEFAULT_PROPS$R;
5936
5934
 
5937
5935
  /**
5938
5936
  * Component display name.
@@ -5947,7 +5945,7 @@ const CLASSNAME$_ = 'lumx-expansion-panel';
5947
5945
  /**
5948
5946
  * Component default props.
5949
5947
  */
5950
- const DEFAULT_PROPS$R = {
5948
+ const DEFAULT_PROPS$Q = {
5951
5949
  closeMode: 'unmount'
5952
5950
  };
5953
5951
  const isDragHandle = isComponent(DragHandle);
@@ -5962,10 +5960,10 @@ const isFooter = isComponent('footer');
5962
5960
  * @return React element.
5963
5961
  */
5964
5962
  const ExpansionPanel = forwardRef((props, ref) => {
5965
- const defaultTheme = useTheme() || Theme.light;
5963
+ const defaultTheme = useTheme() || Theme$1.light;
5966
5964
  const {
5967
5965
  className,
5968
- closeMode = DEFAULT_PROPS$R.closeMode,
5966
+ closeMode = DEFAULT_PROPS$Q.closeMode,
5969
5967
  children: anyChildren,
5970
5968
  hasBackground,
5971
5969
  hasHeaderDivider,
@@ -6001,8 +5999,8 @@ const ExpansionPanel = forwardRef((props, ref) => {
6001
5999
  onToggleOpen(shouldOpen, event);
6002
6000
  }
6003
6001
  };
6004
- const color = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
6005
- const rootClassName = classNames$1.join(className, handleBasicClasses({
6002
+ const color = theme === Theme$1.dark ? ColorPalette$1.light : ColorPalette$1.dark;
6003
+ const rootClassName = classNames.join(className, handleBasicClasses({
6006
6004
  hasBackground,
6007
6005
  hasHeader: Boolean(!isEmpty(headerProps.children)),
6008
6006
  hasHeaderDivider,
@@ -6083,11 +6081,11 @@ const ExpansionPanel = forwardRef((props, ref) => {
6083
6081
  });
6084
6082
  ExpansionPanel.displayName = COMPONENT_NAME$_;
6085
6083
  ExpansionPanel.className = CLASSNAME$_;
6086
- ExpansionPanel.defaultProps = DEFAULT_PROPS$R;
6084
+ ExpansionPanel.defaultProps = DEFAULT_PROPS$Q;
6087
6085
 
6088
6086
  const COMPONENT_NAME$Z = 'Flag';
6089
6087
  const CLASSNAME$Z = 'lumx-flag';
6090
- const DEFAULT_PROPS$Q = {};
6088
+ const DEFAULT_PROPS$P = {};
6091
6089
 
6092
6090
  /**
6093
6091
  * Flag component.
@@ -6097,7 +6095,7 @@ const DEFAULT_PROPS$Q = {};
6097
6095
  * @return React element.
6098
6096
  */
6099
6097
  const Flag = forwardRef((props, ref) => {
6100
- const defaultTheme = useTheme() || Theme.light;
6098
+ const defaultTheme = useTheme() || Theme$1.light;
6101
6099
  const {
6102
6100
  label,
6103
6101
  icon,
@@ -6107,11 +6105,11 @@ const Flag = forwardRef((props, ref) => {
6107
6105
  truncate,
6108
6106
  ...forwardedProps
6109
6107
  } = props;
6110
- const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
6108
+ const flagColor = color || (theme === Theme$1.light ? ColorPalette$1.dark : ColorPalette$1.light);
6111
6109
  const isTruncated = !!truncate;
6112
6110
  return /*#__PURE__*/jsxs("div", {
6113
6111
  ...forwardedProps,
6114
- className: classNames$1.join(className, handleBasicClasses({
6112
+ className: classNames.join(className, handleBasicClasses({
6115
6113
  prefix: CLASSNAME$Z,
6116
6114
  color: flagColor,
6117
6115
  isTruncated
@@ -6119,7 +6117,7 @@ const Flag = forwardRef((props, ref) => {
6119
6117
  ref: ref,
6120
6118
  children: [icon && /*#__PURE__*/jsx(Icon, {
6121
6119
  icon: icon,
6122
- size: Size.xxs,
6120
+ size: Size$1.xxs,
6123
6121
  className: `${CLASSNAME$Z}__icon`
6124
6122
  }), /*#__PURE__*/jsx(Text, {
6125
6123
  as: "span",
@@ -6132,7 +6130,7 @@ const Flag = forwardRef((props, ref) => {
6132
6130
  });
6133
6131
  Flag.displayName = COMPONENT_NAME$Z;
6134
6132
  Flag.className = CLASSNAME$Z;
6135
- Flag.defaultProps = DEFAULT_PROPS$Q;
6133
+ Flag.defaultProps = DEFAULT_PROPS$P;
6136
6134
 
6137
6135
  /**
6138
6136
  * Component display name.
@@ -6169,7 +6167,7 @@ const FlexBox = forwardRef((props, ref) => {
6169
6167
  return /*#__PURE__*/jsx(Component, {
6170
6168
  ref: ref,
6171
6169
  ...forwardedProps,
6172
- className: classNames$1.join(className, handleBasicClasses({
6170
+ className: classNames.join(className, handleBasicClasses({
6173
6171
  prefix: CLASSNAME$Y,
6174
6172
  orientation: orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null),
6175
6173
  vAlign,
@@ -6195,8 +6193,8 @@ const CLASSNAME$X = 'lumx-generic-block';
6195
6193
  /**
6196
6194
  * Component default props.
6197
6195
  */
6198
- const DEFAULT_PROPS$P = {
6199
- gap: Size.big,
6196
+ const DEFAULT_PROPS$O = {
6197
+ gap: Size$1.big,
6200
6198
  orientation: Orientation.horizontal
6201
6199
  };
6202
6200
  const Figure = noop.bind({});
@@ -6225,8 +6223,8 @@ const BaseGenericBlock = forwardRef((props, ref) => {
6225
6223
  children,
6226
6224
  actions,
6227
6225
  actionsProps,
6228
- gap = DEFAULT_PROPS$P.gap,
6229
- orientation = DEFAULT_PROPS$P.orientation,
6226
+ gap = DEFAULT_PROPS$O.gap,
6227
+ orientation = DEFAULT_PROPS$O.orientation,
6230
6228
  contentProps,
6231
6229
  ...forwardedProps
6232
6230
  } = props;
@@ -6245,7 +6243,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
6245
6243
  }, [children]);
6246
6244
  return /*#__PURE__*/jsxs(FlexBox, {
6247
6245
  ref: ref,
6248
- className: classNames$1.join(className, CLASSNAME$X),
6246
+ className: classNames.join(className, CLASSNAME$X),
6249
6247
  gap: gap,
6250
6248
  orientation: orientation,
6251
6249
  ...forwardedProps,
@@ -6255,7 +6253,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
6255
6253
  hAlign: forwardedProps.hAlign,
6256
6254
  ...figureProps,
6257
6255
  ...sections.figureChildProps,
6258
- className: classNames$1.join(figureProps?.className, sections.figureChildProps?.className, `${CLASSNAME$X}__figure`),
6256
+ className: classNames.join(figureProps?.className, sections.figureChildProps?.className, `${CLASSNAME$X}__figure`),
6259
6257
  children: [figure, sections.figureChildProps?.children]
6260
6258
  }), (sections.contentChildProps?.children || sections.otherChildren.length > 0) && /*#__PURE__*/jsxs(FlexBox, {
6261
6259
  ref: sections.contentChild?.ref,
@@ -6265,7 +6263,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
6265
6263
  hAlign: forwardedProps.hAlign,
6266
6264
  ...contentProps,
6267
6265
  ...sections.contentChildProps,
6268
- className: classNames$1.join(contentProps?.className, sections.contentChildProps?.className, `${CLASSNAME$X}__content`),
6266
+ className: classNames.join(contentProps?.className, sections.contentChildProps?.className, `${CLASSNAME$X}__content`),
6269
6267
  children: [sections.contentChildProps?.children, sections.otherChildren]
6270
6268
  }), (actions || sections.actionsChildProps?.children) && /*#__PURE__*/jsxs(FlexBox, {
6271
6269
  ref: sections.actionsChild?.ref,
@@ -6273,14 +6271,14 @@ const BaseGenericBlock = forwardRef((props, ref) => {
6273
6271
  hAlign: forwardedProps.hAlign,
6274
6272
  ...actionsProps,
6275
6273
  ...sections.actionsChildProps,
6276
- className: classNames$1.join(actionsProps?.className, sections.actionsChildProps?.className, `${CLASSNAME$X}__actions`),
6274
+ className: classNames.join(actionsProps?.className, sections.actionsChildProps?.className, `${CLASSNAME$X}__actions`),
6277
6275
  children: [actions, sections.actionsChildProps?.children]
6278
6276
  })]
6279
6277
  });
6280
6278
  });
6281
6279
  BaseGenericBlock.displayName = COMPONENT_NAME$X;
6282
6280
  BaseGenericBlock.className = CLASSNAME$X;
6283
- BaseGenericBlock.defaultProps = DEFAULT_PROPS$P;
6281
+ BaseGenericBlock.defaultProps = DEFAULT_PROPS$O;
6284
6282
  const GenericBlock = Object.assign(BaseGenericBlock, {
6285
6283
  Figure,
6286
6284
  Content,
@@ -6290,7 +6288,7 @@ const GenericBlock = Object.assign(BaseGenericBlock, {
6290
6288
  /**
6291
6289
  * Accepted gap sizes for the generic block.
6292
6290
  */
6293
- const GenericBlockGapSize = pick(Size, ['tiny', 'regular', 'medium', 'big', 'huge']);
6291
+ const GenericBlockGapSize = pick(Size$1, ['tiny', 'regular', 'medium', 'big', 'huge']);
6294
6292
 
6295
6293
  const DEFAULT_VALUE = {};
6296
6294
 
@@ -6319,7 +6317,7 @@ const useOverflowTooltipLabel = content => {
6319
6317
  // Not inside a tooltip
6320
6318
  !parentTooltip && labelElement &&
6321
6319
  // Not inside a visually hidden
6322
- !labelElement?.closest(`.${classNames$1.visuallyHidden()}`) &&
6320
+ !labelElement?.closest(`.${classNames.visuallyHidden()}`) &&
6323
6321
  // Text overflows
6324
6322
  labelElement.offsetWidth < labelElement.scrollWidth) {
6325
6323
  // Set tooltip label
@@ -6361,7 +6359,7 @@ const CLASSNAME$W = 'lumx-text';
6361
6359
  /**
6362
6360
  * Component default props.
6363
6361
  */
6364
- const DEFAULT_PROPS$O = {};
6362
+ const DEFAULT_PROPS$N = {};
6365
6363
 
6366
6364
  /**
6367
6365
  * Text component.
@@ -6406,11 +6404,11 @@ const Text = forwardRef((props, ref) => {
6406
6404
  } = useOverflowTooltipLabel(children);
6407
6405
  return /*#__PURE__*/jsx(Component, {
6408
6406
  ref: useMergeRefs(ref, labelRef),
6409
- className: classNames$1.join(className, handleBasicClasses({
6407
+ className: classNames.join(className, handleBasicClasses({
6410
6408
  prefix: CLASSNAME$W,
6411
6409
  isTruncated: isTruncated && !isTruncatedMultiline,
6412
6410
  isTruncatedMultiline
6413
- }), typography && classNames$1.typography(typography), color && classNames$1.font(color, colorVariant), noWrap && `${CLASSNAME$W}--no-wrap`),
6411
+ }), typography && classNames.typography(typography), color && classNames.font(color, colorVariant), noWrap && `${CLASSNAME$W}--no-wrap`),
6414
6412
  title: tooltipLabel,
6415
6413
  style: {
6416
6414
  ...truncateLinesStyle,
@@ -6423,7 +6421,7 @@ const Text = forwardRef((props, ref) => {
6423
6421
  });
6424
6422
  Text.displayName = COMPONENT_NAME$W;
6425
6423
  Text.className = CLASSNAME$W;
6426
- Text.defaultProps = DEFAULT_PROPS$O;
6424
+ Text.defaultProps = DEFAULT_PROPS$N;
6427
6425
 
6428
6426
  /** The maximum authorized heading level. */
6429
6427
  const MAX_HEADING_LEVEL = 6;
@@ -6470,7 +6468,7 @@ const CLASSNAME$V = 'lumx-heading';
6470
6468
  /**
6471
6469
  * Component default props.
6472
6470
  */
6473
- const DEFAULT_PROPS$N = {};
6471
+ const DEFAULT_PROPS$M = {};
6474
6472
 
6475
6473
  /**
6476
6474
  * Renders a heading component.
@@ -6490,7 +6488,7 @@ const Heading = forwardRef((props, ref) => {
6490
6488
  const computedHeadingElement = as || headingElement;
6491
6489
  return /*#__PURE__*/jsx(Text, {
6492
6490
  ref: ref,
6493
- className: classNames$1.join(className, CLASSNAME$V),
6491
+ className: classNames.join(className, CLASSNAME$V),
6494
6492
  as: computedHeadingElement,
6495
6493
  typography: DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement],
6496
6494
  ...forwardedProps,
@@ -6499,7 +6497,7 @@ const Heading = forwardRef((props, ref) => {
6499
6497
  });
6500
6498
  Heading.displayName = COMPONENT_NAME$V;
6501
6499
  Heading.className = CLASSNAME$V;
6502
- Heading.defaultProps = DEFAULT_PROPS$N;
6500
+ Heading.defaultProps = DEFAULT_PROPS$M;
6503
6501
 
6504
6502
  /**
6505
6503
  * Provide a new heading level context.
@@ -6537,7 +6535,7 @@ const CLASSNAME$U = 'lumx-grid';
6537
6535
  /**
6538
6536
  * Component default props.
6539
6537
  */
6540
- const DEFAULT_PROPS$M = {
6538
+ const DEFAULT_PROPS$L = {
6541
6539
  orientation: Orientation.horizontal,
6542
6540
  wrap: 'nowrap'
6543
6541
  };
@@ -6555,15 +6553,15 @@ const Grid = forwardRef((props, ref) => {
6555
6553
  className,
6556
6554
  gutter,
6557
6555
  hAlign,
6558
- orientation = DEFAULT_PROPS$M.orientation,
6556
+ orientation = DEFAULT_PROPS$L.orientation,
6559
6557
  vAlign,
6560
- wrap = DEFAULT_PROPS$M.wrap,
6558
+ wrap = DEFAULT_PROPS$L.wrap,
6561
6559
  ...forwardedProps
6562
6560
  } = props;
6563
6561
  return /*#__PURE__*/jsx("div", {
6564
6562
  ref: ref,
6565
6563
  ...forwardedProps,
6566
- className: classNames$1.join(className, `${CLASSNAME$U}-container`, {
6564
+ className: classNames.join(className, `${CLASSNAME$U}-container`, {
6567
6565
  [`${CLASSNAME$U}--h-align-${hAlign}`]: hAlign
6568
6566
  }, {
6569
6567
  [`${CLASSNAME$U}--v-align-${vAlign}`]: vAlign
@@ -6578,7 +6576,7 @@ const Grid = forwardRef((props, ref) => {
6578
6576
  });
6579
6577
  Grid.displayName = COMPONENT_NAME$U;
6580
6578
  Grid.className = CLASSNAME$U;
6581
- Grid.defaultProps = DEFAULT_PROPS$M;
6579
+ Grid.defaultProps = DEFAULT_PROPS$L;
6582
6580
 
6583
6581
  /**
6584
6582
  * Component display name.
@@ -6609,7 +6607,7 @@ const GridItem = forwardRef((props, ref) => {
6609
6607
  return /*#__PURE__*/jsx("div", {
6610
6608
  ref: ref,
6611
6609
  ...forwardedProps,
6612
- className: classNames$1.join(className, handleBasicClasses({
6610
+ className: classNames.join(className, handleBasicClasses({
6613
6611
  prefix: CLASSNAME$T,
6614
6612
  width,
6615
6613
  order,
@@ -6634,7 +6632,7 @@ const CLASSNAME$S = 'lumx-grid-column';
6634
6632
  /**
6635
6633
  * Component default props.
6636
6634
  */
6637
- const DEFAULT_PROPS$L = {};
6635
+ const DEFAULT_PROPS$K = {};
6638
6636
 
6639
6637
  /**
6640
6638
  * The GridColumn is a layout component that can display children in a grid
@@ -6659,7 +6657,7 @@ const GridColumn = forwardRef((props, ref) => {
6659
6657
  return /*#__PURE__*/jsx(Component, {
6660
6658
  ...forwardedProps,
6661
6659
  ref: ref,
6662
- className: classNames$1.join(className, CLASSNAME$S),
6660
+ className: classNames.join(className, CLASSNAME$S),
6663
6661
  style: {
6664
6662
  ...style,
6665
6663
  ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
@@ -6671,7 +6669,7 @@ const GridColumn = forwardRef((props, ref) => {
6671
6669
  });
6672
6670
  GridColumn.displayName = COMPONENT_NAME$S;
6673
6671
  GridColumn.className = CLASSNAME$S;
6674
- GridColumn.defaultProps = DEFAULT_PROPS$L;
6672
+ GridColumn.defaultProps = DEFAULT_PROPS$K;
6675
6673
 
6676
6674
  /** Resolve color & color variant from a `ColorWithVariants` and optionally a `ColorVariant`. */
6677
6675
  function resolveColorWithVariants(colorWithVariants, colorVariant) {
@@ -6681,29 +6679,66 @@ function resolveColorWithVariants(colorWithVariants, colorVariant) {
6681
6679
  }
6682
6680
 
6683
6681
  /**
6684
- * Component display name.
6682
+ * Returns the classname associated to the given typography. For example, for Typography.title it returns
6683
+ * lumx-typography-title
6684
+ */
6685
+ function typography(typo) {
6686
+ return `lumx-typography-${typo}`;
6687
+ }
6688
+
6689
+ /**
6690
+ * Alignments.
6691
+ */
6692
+ const Theme = {
6693
+ dark: 'dark'
6694
+ };
6695
+ const Size = {
6696
+ xxs: 'xxs',
6697
+ xs: 'xs',
6698
+ s: 's',
6699
+ m: 'm',
6700
+ xl: 'xl',
6701
+ xxl: 'xxl'};
6702
+ /**
6703
+ * Semantic info about the purpose of the component
6685
6704
  */
6705
+ const Kind = {
6706
+ info: 'info',
6707
+ success: 'success',
6708
+ warning: 'warning',
6709
+ error: 'error'
6710
+ };
6711
+ /**
6712
+ * See SCSS variable $lumx-color-palette
6713
+ */
6714
+ const ColorPalette = {
6715
+ dark: 'dark',
6716
+ yellow: 'yellow',
6717
+ light: 'light'};
6718
+
6719
+ /** ColorPalette with all possible color variant combination */
6720
+
6686
6721
  const COMPONENT_NAME$R = 'Icon';
6722
+ const IconClassName = 'lumx-icon';
6687
6723
 
6688
6724
  /**
6689
- * Component default class name and class prefix.
6725
+ * Defines the props of the component.
6690
6726
  */
6691
- const CLASSNAME$R = 'lumx-icon';
6727
+
6728
+ const CLASSNAME$R = IconClassName;
6692
6729
 
6693
6730
  /**
6694
6731
  * Component default props.
6695
6732
  */
6696
- const DEFAULT_PROPS$K = {};
6733
+ const DEFAULT_PROPS$J = {};
6697
6734
 
6698
6735
  /**
6699
6736
  * Icon component.
6700
6737
  *
6701
6738
  * @param props Component props.
6702
6739
  * @param ref Component ref.
6703
- * @return React element.
6704
6740
  */
6705
- const Icon = forwardRef((props, ref) => {
6706
- const defaultTheme = useTheme();
6741
+ const Icon$1 = props => {
6707
6742
  const {
6708
6743
  className,
6709
6744
  color: propColor,
@@ -6711,7 +6746,8 @@ const Icon = forwardRef((props, ref) => {
6711
6746
  hasShape,
6712
6747
  icon,
6713
6748
  size,
6714
- theme = defaultTheme,
6749
+ ref,
6750
+ theme,
6715
6751
  alt,
6716
6752
  ...forwardedProps
6717
6753
  } = props;
@@ -6743,7 +6779,7 @@ const Icon = forwardRef((props, ref) => {
6743
6779
  return /*#__PURE__*/jsx("i", {
6744
6780
  ref: ref,
6745
6781
  ...forwardedProps,
6746
- className: classNames$1.join(className, handleBasicClasses({
6782
+ className: classnames(className, handleBasicClasses({
6747
6783
  color: iconColor,
6748
6784
  colorVariant: iconColorVariant,
6749
6785
  hasShape,
@@ -6768,10 +6804,29 @@ const Icon = forwardRef((props, ref) => {
6768
6804
  })
6769
6805
  })
6770
6806
  });
6807
+ };
6808
+ Icon$1.displayName = COMPONENT_NAME$R;
6809
+ Icon$1.className = CLASSNAME$R;
6810
+ Icon$1.defaultProps = DEFAULT_PROPS$J;
6811
+
6812
+ /**
6813
+ * Icon component.
6814
+ *
6815
+ * @param props Component props.
6816
+ * @param ref Component ref.
6817
+ * @return React element.
6818
+ */
6819
+ const Icon = forwardRef((props, ref) => {
6820
+ const defaultTheme = useTheme();
6821
+ return Icon$1({
6822
+ ...props,
6823
+ ref,
6824
+ theme: props.theme || defaultTheme
6825
+ });
6771
6826
  });
6772
- Icon.displayName = COMPONENT_NAME$R;
6773
- Icon.className = CLASSNAME$R;
6774
- Icon.defaultProps = DEFAULT_PROPS$K;
6827
+ Icon.displayName = Icon$1.displayName;
6828
+ Icon.className = Icon$1.className;
6829
+ Icon.defaultProps = Icon$1.defaultProps;
6775
6830
 
6776
6831
  /** Internal component used to render image captions */
6777
6832
  const ImageCaption = props => {
@@ -6806,7 +6861,7 @@ const ImageCaption = props => {
6806
6861
  };
6807
6862
  return /*#__PURE__*/jsxs(FlexBox, {
6808
6863
  as: as,
6809
- className: classNames$1.join(baseClassName && `${baseClassName}__wrapper`),
6864
+ className: classNames.join(baseClassName && `${baseClassName}__wrapper`),
6810
6865
  style: captionStyle,
6811
6866
  orientation: "vertical",
6812
6867
  vAlign: align,
@@ -6814,25 +6869,25 @@ const ImageCaption = props => {
6814
6869
  gap: "regular",
6815
6870
  children: [(title || description) && /*#__PURE__*/jsxs(Text, {
6816
6871
  as: "p",
6817
- className: classNames$1.join(baseClassName && `${baseClassName}__caption`),
6872
+ className: classNames.join(baseClassName && `${baseClassName}__caption`),
6818
6873
  truncate: truncate,
6819
6874
  ...baseColor,
6820
6875
  children: [title && /*#__PURE__*/jsx(Text, {
6821
6876
  ...titleProps,
6822
6877
  as: "span",
6823
- className: classNames$1.join(titleProps?.className, baseClassName && `${baseClassName}__title`),
6878
+ className: classNames.join(titleProps?.className, baseClassName && `${baseClassName}__title`),
6824
6879
  typography: "subtitle1",
6825
6880
  ...titleColor,
6826
6881
  children: title
6827
6882
  }), ' ', description && /*#__PURE__*/jsx(Text, {
6828
6883
  ...descriptionProps,
6829
6884
  as: "span",
6830
- className: classNames$1.join(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
6885
+ className: classNames.join(descriptionProps?.className, baseClassName && `${baseClassName}__description`),
6831
6886
  typography: "body1",
6832
6887
  ...descriptionContent
6833
6888
  })]
6834
6889
  }), tags && /*#__PURE__*/jsx(FlexBox, {
6835
- className: classNames$1.join(baseClassName && `${baseClassName}__tags`),
6890
+ className: classNames.join(baseClassName && `${baseClassName}__tags`),
6836
6891
  orientation: "horizontal",
6837
6892
  vAlign: align,
6838
6893
  children: tags
@@ -6866,7 +6921,7 @@ const CLASSNAME$Q = 'lumx-image-block';
6866
6921
  /**
6867
6922
  * Component default props.
6868
6923
  */
6869
- const DEFAULT_PROPS$J = {
6924
+ const DEFAULT_PROPS$I = {
6870
6925
  captionPosition: ImageBlockCaptionPosition.below,
6871
6926
  align: Alignment.left
6872
6927
  };
@@ -6879,12 +6934,12 @@ const DEFAULT_PROPS$J = {
6879
6934
  * @return React element.
6880
6935
  */
6881
6936
  const ImageBlock = forwardRef((props, ref) => {
6882
- const defaultTheme = useTheme() || Theme.light;
6937
+ const defaultTheme = useTheme() || Theme$1.light;
6883
6938
  const {
6884
6939
  actions,
6885
- align = DEFAULT_PROPS$J.align,
6940
+ align = DEFAULT_PROPS$I.align,
6886
6941
  alt,
6887
- captionPosition = DEFAULT_PROPS$J.captionPosition,
6942
+ captionPosition = DEFAULT_PROPS$I.captionPosition,
6888
6943
  captionStyle,
6889
6944
  className,
6890
6945
  description,
@@ -6902,7 +6957,7 @@ const ImageBlock = forwardRef((props, ref) => {
6902
6957
  return /*#__PURE__*/jsxs("figure", {
6903
6958
  ref: ref,
6904
6959
  ...forwardedProps,
6905
- className: classNames$1.join(className, handleBasicClasses({
6960
+ className: classNames.join(className, handleBasicClasses({
6906
6961
  prefix: CLASSNAME$Q,
6907
6962
  captionPosition,
6908
6963
  align,
@@ -6911,7 +6966,7 @@ const ImageBlock = forwardRef((props, ref) => {
6911
6966
  }), fillHeight && `${CLASSNAME$Q}--fill-height`),
6912
6967
  children: [/*#__PURE__*/jsx(Thumbnail, {
6913
6968
  ...thumbnailProps,
6914
- className: classNames$1.join(`${CLASSNAME$Q}__image`, thumbnailProps?.className),
6969
+ className: classNames.join(`${CLASSNAME$Q}__image`, thumbnailProps?.className),
6915
6970
  fillHeight: fillHeight,
6916
6971
  align: align,
6917
6972
  image: image,
@@ -6938,7 +6993,7 @@ const ImageBlock = forwardRef((props, ref) => {
6938
6993
  });
6939
6994
  ImageBlock.displayName = COMPONENT_NAME$Q;
6940
6995
  ImageBlock.className = CLASSNAME$Q;
6941
- ImageBlock.defaultProps = DEFAULT_PROPS$J;
6996
+ ImageBlock.defaultProps = DEFAULT_PROPS$I;
6942
6997
 
6943
6998
  /**
6944
6999
  * Component display name.
@@ -7632,7 +7687,7 @@ const Inner = forwardRef((props, ref) => {
7632
7687
  }, [onClose]);
7633
7688
  return /*#__PURE__*/jsx(Lightbox, {
7634
7689
  ref: ref,
7635
- className: classNames$1.join(className, CLASSNAME$P),
7690
+ className: classNames.join(className, CLASSNAME$P),
7636
7691
  parentElement: parentElement,
7637
7692
  isOpen: isOpen,
7638
7693
  onClose: onClose,
@@ -7688,7 +7743,7 @@ const CLASSNAME$O = 'lumx-inline-list';
7688
7743
  /**
7689
7744
  * Component default props.
7690
7745
  */
7691
- const DEFAULT_PROPS$I = {};
7746
+ const DEFAULT_PROPS$H = {};
7692
7747
 
7693
7748
  /**
7694
7749
  * InlineList component.
@@ -7713,7 +7768,7 @@ const InlineList = forwardRef((props, ref) => {
7713
7768
  jsx("ul", {
7714
7769
  ...forwardedProps,
7715
7770
  ref: ref,
7716
- className: classNames$1.join(className, CLASSNAME$O, wrap && `${CLASSNAME$O}--wrap`, color && classNames$1.font(color, colorVariant), typography && classNames$1.typography(typography))
7771
+ className: classNames.join(className, CLASSNAME$O, wrap && `${CLASSNAME$O}--wrap`, color && classNames.font(color, colorVariant), typography && classNames.typography(typography))
7717
7772
  // Lists with removed bullet style can lose their a11y list role on some browsers
7718
7773
  ,
7719
7774
  role: "list",
@@ -7739,51 +7794,46 @@ const InlineList = forwardRef((props, ref) => {
7739
7794
  });
7740
7795
  InlineList.displayName = COMPONENT_NAME$O;
7741
7796
  InlineList.className = CLASSNAME$O;
7742
- InlineList.defaultProps = DEFAULT_PROPS$I;
7797
+ InlineList.defaultProps = DEFAULT_PROPS$H;
7743
7798
 
7744
7799
  const INPUT_HELPER_CONFIGURATION = {
7745
- error: {
7800
+ [Kind.error]: {
7746
7801
  color: 'red'
7747
7802
  },
7748
- success: {
7803
+ [Kind.success]: {
7749
7804
  color: 'green'
7750
7805
  },
7751
- warning: {
7806
+ [Kind.warning]: {
7752
7807
  color: 'yellow'
7753
7808
  }
7754
7809
  };
7755
7810
 
7756
- /**
7757
- * Component display name.
7758
- */
7759
7811
  const COMPONENT_NAME$N = 'InputHelper';
7812
+ const InputHelperClassName = 'lumx-input-helper';
7760
7813
 
7761
7814
  /**
7762
- * Component default class name and class prefix.
7815
+ * Defines the props of the component.
7763
7816
  */
7764
- const CLASSNAME$N = 'lumx-input-helper';
7817
+
7818
+ const CLASSNAME$N = InputHelperClassName;
7765
7819
 
7766
7820
  /**
7767
7821
  * Component default props.
7768
7822
  */
7769
- const DEFAULT_PROPS$H = {
7823
+ const DEFAULT_PROPS$G = {
7770
7824
  kind: Kind.info
7771
7825
  };
7772
7826
 
7773
7827
  /**
7774
7828
  * InputHelper component.
7775
- *
7776
- * @param props Component props.
7777
- * @param ref Component ref.
7778
- * @return React element.
7779
7829
  */
7780
- const InputHelper = forwardRef((props, ref) => {
7781
- const defaultTheme = useTheme() || Theme.light;
7830
+ function InputHelper$1(props) {
7782
7831
  const {
7783
7832
  children,
7784
7833
  className,
7785
- kind = DEFAULT_PROPS$H.kind,
7786
- theme = defaultTheme,
7834
+ kind = DEFAULT_PROPS$G.kind,
7835
+ theme,
7836
+ ref,
7787
7837
  ...forwardedProps
7788
7838
  } = props;
7789
7839
  const {
@@ -7792,67 +7842,91 @@ const InputHelper = forwardRef((props, ref) => {
7792
7842
  return /*#__PURE__*/jsx("p", {
7793
7843
  ref: ref,
7794
7844
  ...forwardedProps,
7795
- className: classNames$1.join(className, handleBasicClasses({
7845
+ className: classnames(className, handleBasicClasses({
7796
7846
  prefix: CLASSNAME$N,
7797
7847
  color,
7798
7848
  theme
7799
7849
  })),
7800
7850
  children: children
7801
7851
  });
7802
- });
7803
- InputHelper.displayName = COMPONENT_NAME$N;
7804
- InputHelper.className = CLASSNAME$N;
7805
- InputHelper.defaultProps = DEFAULT_PROPS$H;
7806
-
7807
- /**
7808
- * Component display name.
7809
- */
7810
- const COMPONENT_NAME$M = 'InputLabel';
7852
+ }
7853
+ InputHelper$1.displayName = COMPONENT_NAME$N;
7854
+ InputHelper$1.className = CLASSNAME$N;
7855
+ InputHelper$1.defaultProps = DEFAULT_PROPS$G;
7811
7856
 
7812
7857
  /**
7813
- * Component default class name and class prefix.
7858
+ * InputHelper component.
7859
+ *
7860
+ * @param props Component props.
7861
+ * @param ref Component ref.
7862
+ * @return React element.
7814
7863
  */
7815
- const CLASSNAME$M = 'lumx-input-label';
7864
+ const InputHelper = forwardRef((props, ref) => {
7865
+ const defaultTheme = useTheme() || Theme$1.light;
7866
+ return InputHelper$1({
7867
+ ...props,
7868
+ ref,
7869
+ theme: props.theme || defaultTheme
7870
+ });
7871
+ });
7872
+ InputHelper.displayName = InputHelper$1.displayName;
7873
+ InputHelper.className = InputHelper$1.className;
7874
+ InputHelper.defaultProps = InputHelper$1.defaultProps;
7816
7875
 
7817
- /**
7818
- * Component default props.
7819
- */
7820
- const DEFAULT_PROPS$G = {};
7876
+ const COMPONENT_NAME$M = 'InputLabel';
7877
+ const InputLabelClassName = 'lumx-input-label';
7878
+ const CLASSNAME$M = InputLabelClassName;
7879
+ const DEFAULT_PROPS$F = {};
7821
7880
 
7822
7881
  /**
7823
7882
  * InputLabel component.
7824
- *
7825
- * @param props Component props.
7826
- * @param ref Component ref.
7827
- * @return React element.
7828
7883
  */
7829
- const InputLabel = forwardRef((props, ref) => {
7830
- const defaultTheme = useTheme() || Theme.light;
7884
+ function InputLabel$1(props) {
7831
7885
  const {
7832
7886
  children,
7833
7887
  className,
7834
7888
  htmlFor,
7835
7889
  isRequired,
7836
- theme = defaultTheme,
7837
- typography,
7890
+ theme,
7891
+ typography: typography$1,
7892
+ ref,
7838
7893
  ...forwardedProps
7839
7894
  } = props;
7840
7895
  return /*#__PURE__*/jsx("label", {
7841
7896
  ref: ref,
7842
7897
  ...forwardedProps,
7843
7898
  htmlFor: htmlFor,
7844
- className: classNames$1.join(className, handleBasicClasses({
7899
+ className: classnames(className, handleBasicClasses({
7845
7900
  prefix: CLASSNAME$M,
7846
7901
  isRequired,
7847
7902
  theme,
7848
- hasCustomTypography: Boolean(typography)
7849
- }), typography && classNames$1.typography(typography)),
7903
+ hasCustomTypography: Boolean(typography$1)
7904
+ }), typography$1 && typography(typography$1)),
7850
7905
  children: children
7851
7906
  });
7907
+ }
7908
+ InputLabel$1.displayName = COMPONENT_NAME$M;
7909
+ InputLabel$1.className = CLASSNAME$M;
7910
+ InputLabel$1.defaultProps = DEFAULT_PROPS$F;
7911
+
7912
+ /**
7913
+ * InputLabel component.
7914
+ *
7915
+ * @param props Component props.
7916
+ * @param ref Component ref.
7917
+ * @return React element.
7918
+ */
7919
+ const InputLabel = forwardRef((props, ref) => {
7920
+ const defaultTheme = useTheme() || Theme$1.light;
7921
+ return InputLabel$1({
7922
+ ...props,
7923
+ ref,
7924
+ theme: props.theme || defaultTheme
7925
+ });
7852
7926
  });
7853
- InputLabel.displayName = COMPONENT_NAME$M;
7854
- InputLabel.className = CLASSNAME$M;
7855
- InputLabel.defaultProps = DEFAULT_PROPS$G;
7927
+ InputLabel.displayName = InputLabel$1.displayName;
7928
+ InputLabel.className = InputLabel$1.className;
7929
+ InputLabel.defaultProps = InputLabel$1.defaultProps;
7856
7930
 
7857
7931
  /**
7858
7932
  * Component display name.
@@ -7946,7 +8020,7 @@ const Lightbox = forwardRef((props, ref) => {
7946
8020
  "aria-modal": "true",
7947
8021
  role: "dialog",
7948
8022
  tabIndex: -1,
7949
- className: classNames$1.join(className, handleBasicClasses({
8023
+ className: classNames.join(className, handleBasicClasses({
7950
8024
  prefix: CLASSNAME$L,
7951
8025
  isHidden: !isOpen,
7952
8026
  isShown: isOpen || isVisible,
@@ -8028,12 +8102,12 @@ const Link = forwardRef((props, ref) => {
8028
8102
  as: linkAs || (forwardedProps.href ? 'a' : 'button'),
8029
8103
  ...forwardedProps,
8030
8104
  ...disabledStateProps,
8031
- className: classNames$1.join(className, handleBasicClasses({
8105
+ className: classNames.join(className, handleBasicClasses({
8032
8106
  prefix: CLASSNAME$K,
8033
8107
  color,
8034
8108
  colorVariant,
8035
8109
  hasTypography: !!typography
8036
- }), typography && classNames$1.typography(typography)),
8110
+ }), typography && classNames.typography(typography)),
8037
8111
  children: wrapChildrenIconWithSpaces(/*#__PURE__*/jsxs(Fragment, {
8038
8112
  children: [leftIcon && /*#__PURE__*/jsx(Icon, {
8039
8113
  icon: leftIcon,
@@ -8064,8 +8138,8 @@ const CLASSNAME$J = 'lumx-link-preview';
8064
8138
  /**
8065
8139
  * Component default props.
8066
8140
  */
8067
- const DEFAULT_PROPS$F = {
8068
- size: Size.regular,
8141
+ const DEFAULT_PROPS$E = {
8142
+ size: Size$1.regular,
8069
8143
  titleHeading: 'h2'
8070
8144
  };
8071
8145
 
@@ -8077,18 +8151,18 @@ const DEFAULT_PROPS$F = {
8077
8151
  * @return React element.
8078
8152
  */
8079
8153
  const LinkPreview = forwardRef((props, ref) => {
8080
- const defaultTheme = useTheme() || Theme.light;
8154
+ const defaultTheme = useTheme() || Theme$1.light;
8081
8155
  const {
8082
8156
  className,
8083
8157
  description,
8084
8158
  link,
8085
8159
  linkAs,
8086
8160
  linkProps,
8087
- size = DEFAULT_PROPS$F.size,
8161
+ size = DEFAULT_PROPS$E.size,
8088
8162
  theme = defaultTheme,
8089
8163
  thumbnailProps,
8090
8164
  title,
8091
- titleHeading = DEFAULT_PROPS$F.titleHeading,
8165
+ titleHeading = DEFAULT_PROPS$E.titleHeading,
8092
8166
  ...forwardedProps
8093
8167
  } = props;
8094
8168
  // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
@@ -8096,9 +8170,9 @@ const LinkPreview = forwardRef((props, ref) => {
8096
8170
  return /*#__PURE__*/jsx("article", {
8097
8171
  ref: ref,
8098
8172
  ...forwardedProps,
8099
- className: classNames$1.join(className, handleBasicClasses({
8173
+ className: classNames.join(className, handleBasicClasses({
8100
8174
  prefix: CLASSNAME$J,
8101
- size: size === Size.big && thumbnailProps ? Size.big : Size.regular,
8175
+ size: size === Size$1.big && thumbnailProps ? Size$1.big : Size$1.regular,
8102
8176
  theme
8103
8177
  })),
8104
8178
  children: /*#__PURE__*/jsxs("div", {
@@ -8127,7 +8201,7 @@ const LinkPreview = forwardRef((props, ref) => {
8127
8201
  linkAs: linkAs,
8128
8202
  target: "_blank",
8129
8203
  href: link,
8130
- color: theme === Theme.light ? ColorPalette.dark : ColorPalette.light,
8204
+ color: theme === Theme$1.light ? ColorPalette$1.dark : ColorPalette$1.light,
8131
8205
  colorVariant: ColorVariant.N,
8132
8206
  children: title
8133
8207
  })
@@ -8139,10 +8213,10 @@ const LinkPreview = forwardRef((props, ref) => {
8139
8213
  children: /*#__PURE__*/jsx(Link, {
8140
8214
  ...linkProps,
8141
8215
  linkAs: linkAs,
8142
- className: classNames$1.join(`${CLASSNAME$J}__link`, linkProps?.className),
8216
+ className: classNames.join(`${CLASSNAME$J}__link`, linkProps?.className),
8143
8217
  target: "_blank",
8144
8218
  href: link,
8145
- color: theme === Theme.light ? ColorPalette.primary : ColorPalette.light,
8219
+ color: theme === Theme$1.light ? ColorPalette$1.primary : ColorPalette$1.light,
8146
8220
  colorVariant: ColorVariant.N
8147
8221
  // Avoid redundant links in focus order
8148
8222
  ,
@@ -8156,7 +8230,7 @@ const LinkPreview = forwardRef((props, ref) => {
8156
8230
  });
8157
8231
  LinkPreview.displayName = COMPONENT_NAME$J;
8158
8232
  LinkPreview.className = CLASSNAME$J;
8159
- LinkPreview.defaultProps = DEFAULT_PROPS$F;
8233
+ LinkPreview.defaultProps = DEFAULT_PROPS$E;
8160
8234
 
8161
8235
  /**
8162
8236
  * Render link with default <a> HTML component or a custom one provided by `linkAs`.
@@ -8185,8 +8259,8 @@ const CLASSNAME$I = 'lumx-list-item';
8185
8259
  /**
8186
8260
  * Component default props.
8187
8261
  */
8188
- const DEFAULT_PROPS$E = {
8189
- size: Size.regular
8262
+ const DEFAULT_PROPS$D = {
8263
+ size: Size$1.regular
8190
8264
  };
8191
8265
 
8192
8266
  /**
@@ -8224,7 +8298,7 @@ const ListItem = forwardRef((props, ref) => {
8224
8298
  linkProps = {},
8225
8299
  linkRef,
8226
8300
  onItemSelected,
8227
- size = DEFAULT_PROPS$E.size,
8301
+ size = DEFAULT_PROPS$D.size,
8228
8302
  ...forwardedProps
8229
8303
  } = otherProps;
8230
8304
  const role = linkAs || linkProps.href ? 'link' : 'button';
@@ -8248,7 +8322,7 @@ const ListItem = forwardRef((props, ref) => {
8248
8322
  return /*#__PURE__*/jsx("li", {
8249
8323
  ref: ref,
8250
8324
  ...forwardedProps,
8251
- className: classNames$1.join(className, handleBasicClasses({
8325
+ className: classNames.join(className, handleBasicClasses({
8252
8326
  prefix: CLASSNAME$I,
8253
8327
  size
8254
8328
  })),
@@ -8263,7 +8337,7 @@ const ListItem = forwardRef((props, ref) => {
8263
8337
  'aria-disabled': isAnyDisabled,
8264
8338
  ...linkProps,
8265
8339
  href: isAnyDisabled ? undefined : linkProps.href,
8266
- className: classNames$1.join(handleBasicClasses({
8340
+ className: classNames.join(handleBasicClasses({
8267
8341
  prefix: `${CLASSNAME$I}__link`,
8268
8342
  isHighlighted,
8269
8343
  isSelected,
@@ -8283,7 +8357,7 @@ const ListItem = forwardRef((props, ref) => {
8283
8357
  });
8284
8358
  ListItem.displayName = COMPONENT_NAME$I;
8285
8359
  ListItem.className = CLASSNAME$I;
8286
- ListItem.defaultProps = DEFAULT_PROPS$E;
8360
+ ListItem.defaultProps = DEFAULT_PROPS$D;
8287
8361
 
8288
8362
  /**
8289
8363
  * Component display name.
@@ -8310,7 +8384,7 @@ const ListDivider = forwardRef((props, ref) => {
8310
8384
  return /*#__PURE__*/jsx("li", {
8311
8385
  ref: ref,
8312
8386
  ...forwardedProps,
8313
- className: classNames$1.join(className, CLASSNAME$H)
8387
+ className: classNames.join(className, CLASSNAME$H)
8314
8388
  });
8315
8389
  });
8316
8390
  ListDivider.displayName = COMPONENT_NAME$H;
@@ -8342,7 +8416,7 @@ const ListSubheader = forwardRef((props, ref) => {
8342
8416
  return /*#__PURE__*/jsx("li", {
8343
8417
  ref: ref,
8344
8418
  ...forwardedProps,
8345
- className: classNames$1.join(className, CLASSNAME$G),
8419
+ className: classNames.join(className, CLASSNAME$G),
8346
8420
  children: children
8347
8421
  });
8348
8422
  });
@@ -8363,20 +8437,20 @@ const CLASSNAME$F = 'lumx-message';
8363
8437
  * Associative map from message kind to color and icon.
8364
8438
  */
8365
8439
  const CONFIG = {
8366
- [Kind.error]: {
8367
- color: ColorPalette.red,
8440
+ [Kind$1.error]: {
8441
+ color: ColorPalette$1.red,
8368
8442
  icon: mdiAlert
8369
8443
  },
8370
- [Kind.info]: {
8371
- color: ColorPalette.blue,
8444
+ [Kind$1.info]: {
8445
+ color: ColorPalette$1.blue,
8372
8446
  icon: mdiInformation
8373
8447
  },
8374
- [Kind.success]: {
8375
- color: ColorPalette.green,
8448
+ [Kind$1.success]: {
8449
+ color: ColorPalette$1.green,
8376
8450
  icon: mdiCheckCircle
8377
8451
  },
8378
- [Kind.warning]: {
8379
- color: ColorPalette.yellow,
8452
+ [Kind$1.warning]: {
8453
+ color: ColorPalette$1.yellow,
8380
8454
  icon: mdiAlertCircle
8381
8455
  }
8382
8456
  };
@@ -8409,7 +8483,7 @@ const Message = forwardRef((props, ref) => {
8409
8483
  const isCloseButtonDisplayed = hasBackground && kind === 'info' && onClick && closeButtonLabel;
8410
8484
  return /*#__PURE__*/jsxs("div", {
8411
8485
  ref: ref,
8412
- className: classNames$1.join(className, handleBasicClasses({
8486
+ className: classNames.join(className, handleBasicClasses({
8413
8487
  color,
8414
8488
  hasBackground,
8415
8489
  prefix: CLASSNAME$F
@@ -8418,7 +8492,7 @@ const Message = forwardRef((props, ref) => {
8418
8492
  children: [(customIcon || icon) && /*#__PURE__*/jsx(Icon, {
8419
8493
  className: `${CLASSNAME$F}__icon`,
8420
8494
  icon: customIcon || icon,
8421
- size: Size.xs,
8495
+ size: Size$1.xs,
8422
8496
  color: color
8423
8497
  }), /*#__PURE__*/jsx("div", {
8424
8498
  className: `${CLASSNAME$F}__text`,
@@ -8448,7 +8522,7 @@ const CLASSNAME$E = 'lumx-mosaic';
8448
8522
  /**
8449
8523
  * Component default props.
8450
8524
  */
8451
- const DEFAULT_PROPS$D = {};
8525
+ const DEFAULT_PROPS$C = {};
8452
8526
 
8453
8527
  /**
8454
8528
  * Mosaic component.
@@ -8458,7 +8532,7 @@ const DEFAULT_PROPS$D = {};
8458
8532
  * @return React element.
8459
8533
  */
8460
8534
  const Mosaic = forwardRef((props, ref) => {
8461
- const defaultTheme = useTheme() || Theme.light;
8535
+ const defaultTheme = useTheme() || Theme$1.light;
8462
8536
  const {
8463
8537
  className,
8464
8538
  theme = defaultTheme,
@@ -8476,7 +8550,7 @@ const Mosaic = forwardRef((props, ref) => {
8476
8550
  return /*#__PURE__*/jsx("div", {
8477
8551
  ref: ref,
8478
8552
  ...forwardedProps,
8479
- className: classNames$1.join(className, handleBasicClasses({
8553
+ className: classNames.join(className, handleBasicClasses({
8480
8554
  prefix: CLASSNAME$E,
8481
8555
  theme
8482
8556
  }), {
@@ -8517,7 +8591,7 @@ const Mosaic = forwardRef((props, ref) => {
8517
8591
  });
8518
8592
  Mosaic.displayName = COMPONENT_NAME$E;
8519
8593
  Mosaic.className = CLASSNAME$E;
8520
- Mosaic.defaultProps = DEFAULT_PROPS$D;
8594
+ Mosaic.defaultProps = DEFAULT_PROPS$C;
8521
8595
 
8522
8596
  const NavigationContext = /*#__PURE__*/createContext({
8523
8597
  orientation: Orientation.vertical
@@ -8559,7 +8633,7 @@ const NavigationSection = forwardRef((props, ref) => {
8559
8633
  const theme = useTheme();
8560
8634
  const isDropdown = orientation === Orientation.horizontal;
8561
8635
  return /*#__PURE__*/jsxs("li", {
8562
- className: classNames$1.join(className, CLASSNAME$D, ITEM_CLASSNAME, handleBasicClasses({
8636
+ className: classNames.join(className, CLASSNAME$D, ITEM_CLASSNAME, handleBasicClasses({
8563
8637
  prefix: ITEM_CLASSNAME,
8564
8638
  theme
8565
8639
  })),
@@ -8569,7 +8643,7 @@ const NavigationSection = forwardRef((props, ref) => {
8569
8643
  ...forwardedProps,
8570
8644
  "aria-controls": sectionId,
8571
8645
  "aria-expanded": isOpen,
8572
- className: classNames$1.join(`${ITEM_CLASSNAME}__link`),
8646
+ className: classNames.join(`${ITEM_CLASSNAME}__link`),
8573
8647
  ref: buttonRef,
8574
8648
  onClick: event => {
8575
8649
  setIsOpen(!isOpen);
@@ -8578,7 +8652,7 @@ const NavigationSection = forwardRef((props, ref) => {
8578
8652
  children: [icon ? /*#__PURE__*/jsx(Icon, {
8579
8653
  className: `${ITEM_CLASSNAME}__icon`,
8580
8654
  icon: icon,
8581
- size: Size.xs
8655
+ size: Size$1.xs
8582
8656
  }) : null, /*#__PURE__*/jsx(Text, {
8583
8657
  as: "span",
8584
8658
  truncate: true,
@@ -8586,7 +8660,7 @@ const NavigationSection = forwardRef((props, ref) => {
8586
8660
  ref: ref,
8587
8661
  children: label
8588
8662
  }), /*#__PURE__*/jsx(Icon, {
8589
- className: classNames$1.join(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME$D}__chevron`),
8663
+ className: classNames.join(`${ITEM_CLASSNAME}__icon`, `${CLASSNAME$D}__chevron`),
8590
8664
  icon: isOpen ? mdiChevronUp : mdiChevronDown
8591
8665
  })]
8592
8666
  }), isOpen && (isDropdown ? /*#__PURE__*/jsx(Popover, {
@@ -8600,7 +8674,7 @@ const NavigationSection = forwardRef((props, ref) => {
8600
8674
  onClose: () => setIsOpen(false),
8601
8675
  zIndex: 996,
8602
8676
  children: /*#__PURE__*/jsx(ThemeProvider, {
8603
- value: Theme.light,
8677
+ value: Theme$1.light,
8604
8678
  children: /*#__PURE__*/jsx("ul", {
8605
8679
  className: `${CLASSNAME$D}__drawer--popover`,
8606
8680
  id: sectionId,
@@ -8637,7 +8711,7 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
8637
8711
  labelRef
8638
8712
  } = useOverflowTooltipLabel(label);
8639
8713
  return /*#__PURE__*/jsx("li", {
8640
- className: classNames$1.join(className, handleBasicClasses({
8714
+ className: classNames.join(className, handleBasicClasses({
8641
8715
  prefix: ITEM_CLASSNAME,
8642
8716
  theme
8643
8717
  })),
@@ -8656,7 +8730,7 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
8656
8730
  children: [icon ? /*#__PURE__*/jsx(Icon, {
8657
8731
  className: `${ITEM_CLASSNAME}__icon`,
8658
8732
  icon: icon,
8659
- size: Size.xs,
8733
+ size: Size$1.xs,
8660
8734
  theme: theme
8661
8735
  }) : null, /*#__PURE__*/jsx(Text, {
8662
8736
  as: "span",
@@ -8686,22 +8760,22 @@ const CLASSNAME$C = 'lumx-navigation';
8686
8760
  /**
8687
8761
  * Component default props
8688
8762
  */
8689
- const DEFAULT_PROPS$C = {
8763
+ const DEFAULT_PROPS$B = {
8690
8764
  orientation: Orientation.vertical
8691
8765
  };
8692
8766
  const Navigation = forwardRef((props, ref) => {
8693
- const defaultTheme = useTheme() || Theme.light;
8767
+ const defaultTheme = useTheme() || Theme$1.light;
8694
8768
  const {
8695
8769
  children,
8696
8770
  className,
8697
8771
  theme = defaultTheme,
8698
- orientation = DEFAULT_PROPS$C.orientation,
8772
+ orientation = DEFAULT_PROPS$B.orientation,
8699
8773
  ...forwardedProps
8700
8774
  } = props;
8701
8775
  return /*#__PURE__*/jsx(ThemeProvider, {
8702
8776
  value: theme,
8703
8777
  children: /*#__PURE__*/jsx("nav", {
8704
- className: classNames$1.join(className, handleBasicClasses({
8778
+ className: classNames.join(className, handleBasicClasses({
8705
8779
  prefix: CLASSNAME$C,
8706
8780
  theme,
8707
8781
  orientation
@@ -8722,7 +8796,7 @@ const Navigation = forwardRef((props, ref) => {
8722
8796
  });
8723
8797
  Navigation.displayName = COMPONENT_NAME$C;
8724
8798
  Navigation.className = CLASSNAME$C;
8725
- Navigation.defaultProps = DEFAULT_PROPS$C;
8799
+ Navigation.defaultProps = DEFAULT_PROPS$B;
8726
8800
 
8727
8801
  // Sub components
8728
8802
  Navigation.Section = NavigationSection;
@@ -8763,7 +8837,7 @@ const CLASSNAME$B = 'lumx-notification';
8763
8837
  /**
8764
8838
  * Component default props.
8765
8839
  */
8766
- const DEFAULT_PROPS$B = {
8840
+ const DEFAULT_PROPS$A = {
8767
8841
  zIndex: 9999,
8768
8842
  usePortal: true
8769
8843
  };
@@ -8777,7 +8851,7 @@ const DEFAULT_PROPS$B = {
8777
8851
  * @return React element.
8778
8852
  */
8779
8853
  const Notification = forwardRef((props, ref) => {
8780
- const defaultTheme = useTheme() || Theme.light;
8854
+ const defaultTheme = useTheme() || Theme$1.light;
8781
8855
  const {
8782
8856
  actionLabel,
8783
8857
  className,
@@ -8787,8 +8861,8 @@ const Notification = forwardRef((props, ref) => {
8787
8861
  onClick,
8788
8862
  theme = defaultTheme,
8789
8863
  type,
8790
- zIndex = DEFAULT_PROPS$B.zIndex,
8791
- usePortal = DEFAULT_PROPS$B.usePortal,
8864
+ zIndex = DEFAULT_PROPS$A.zIndex,
8865
+ usePortal = DEFAULT_PROPS$A.usePortal,
8792
8866
  style,
8793
8867
  ...forwardedProps
8794
8868
  } = props;
@@ -8818,7 +8892,7 @@ const Notification = forwardRef((props, ref) => {
8818
8892
  ref: mergeRefs(ref, rootRef),
8819
8893
  role: "alert",
8820
8894
  ...forwardedProps,
8821
- className: classNames$1.join(className, handleBasicClasses({
8895
+ className: classNames.join(className, handleBasicClasses({
8822
8896
  color,
8823
8897
  hasAction,
8824
8898
  isHidden: !isOpen,
@@ -8833,7 +8907,7 @@ const Notification = forwardRef((props, ref) => {
8833
8907
  className: `${CLASSNAME$B}__icon`,
8834
8908
  children: /*#__PURE__*/jsx(Icon, {
8835
8909
  icon: icon,
8836
- size: Size.s
8910
+ size: Size$1.s
8837
8911
  })
8838
8912
  }), /*#__PURE__*/jsx("div", {
8839
8913
  className: `${CLASSNAME$B}__content`,
@@ -8854,7 +8928,7 @@ const Notification = forwardRef((props, ref) => {
8854
8928
  });
8855
8929
  Notification.displayName = COMPONENT_NAME$B;
8856
8930
  Notification.className = CLASSNAME$B;
8857
- Notification.defaultProps = DEFAULT_PROPS$B;
8931
+ Notification.defaultProps = DEFAULT_PROPS$A;
8858
8932
 
8859
8933
  /**
8860
8934
  * Component display name.
@@ -8869,7 +8943,7 @@ const CLASSNAME$A = 'lumx-popover-dialog';
8869
8943
  /**
8870
8944
  * Component default props.
8871
8945
  */
8872
- const DEFAULT_PROPS$A = {};
8946
+ const DEFAULT_PROPS$z = {};
8873
8947
 
8874
8948
  /**
8875
8949
  * PopoverDialog component.
@@ -8891,7 +8965,7 @@ const PopoverDialog = forwardRef((props, ref) => {
8891
8965
  return /*#__PURE__*/jsx(Popover, {
8892
8966
  ...forwardedProps,
8893
8967
  ref: ref,
8894
- className: classNames$1.join(className, CLASSNAME$A),
8968
+ className: classNames.join(className, CLASSNAME$A),
8895
8969
  role: "dialog",
8896
8970
  "aria-modal": "true"
8897
8971
  /**
@@ -8912,7 +8986,7 @@ const PopoverDialog = forwardRef((props, ref) => {
8912
8986
  });
8913
8987
  PopoverDialog.displayName = COMPONENT_NAME$A;
8914
8988
  PopoverDialog.className = CLASSNAME$A;
8915
- PopoverDialog.defaultProps = DEFAULT_PROPS$A;
8989
+ PopoverDialog.defaultProps = DEFAULT_PROPS$z;
8916
8990
 
8917
8991
  /**
8918
8992
  * Component display name.
@@ -8927,7 +9001,7 @@ const CLASSNAME$z = 'lumx-post-block';
8927
9001
  /**
8928
9002
  * Component default props.
8929
9003
  */
8930
- const DEFAULT_PROPS$z = {
9004
+ const DEFAULT_PROPS$y = {
8931
9005
  orientation: Orientation.horizontal
8932
9006
  };
8933
9007
 
@@ -8939,7 +9013,7 @@ const DEFAULT_PROPS$z = {
8939
9013
  * @return React element.
8940
9014
  */
8941
9015
  const PostBlock = forwardRef((props, ref) => {
8942
- const defaultTheme = useTheme() || Theme.light;
9016
+ const defaultTheme = useTheme() || Theme$1.light;
8943
9017
  const {
8944
9018
  actions,
8945
9019
  attachments,
@@ -8947,7 +9021,7 @@ const PostBlock = forwardRef((props, ref) => {
8947
9021
  className,
8948
9022
  meta,
8949
9023
  onClick,
8950
- orientation = DEFAULT_PROPS$z.orientation,
9024
+ orientation = DEFAULT_PROPS$y.orientation,
8951
9025
  tags,
8952
9026
  text,
8953
9027
  theme = defaultTheme,
@@ -8957,7 +9031,7 @@ const PostBlock = forwardRef((props, ref) => {
8957
9031
  } = props;
8958
9032
  return /*#__PURE__*/jsxs("div", {
8959
9033
  ref: ref,
8960
- className: classNames$1.join(className, handleBasicClasses({
9034
+ className: classNames.join(className, handleBasicClasses({
8961
9035
  prefix: CLASSNAME$z,
8962
9036
  orientation,
8963
9037
  theme
@@ -8983,15 +9057,15 @@ const PostBlock = forwardRef((props, ref) => {
8983
9057
  }), meta && /*#__PURE__*/jsx("span", {
8984
9058
  className: `${CLASSNAME$z}__meta`,
8985
9059
  children: meta
8986
- }), isObject(text) && text.__html ?
9060
+ }), typeof text === 'string' ? /*#__PURE__*/jsx("p", {
9061
+ className: `${CLASSNAME$z}__text`,
9062
+ children: text
9063
+ }) :
8987
9064
  /*#__PURE__*/
8988
9065
  // eslint-disable-next-line react/no-danger
8989
9066
  jsx("p", {
8990
9067
  dangerouslySetInnerHTML: text,
8991
9068
  className: `${CLASSNAME$z}__text`
8992
- }) : /*#__PURE__*/jsx("p", {
8993
- className: `${CLASSNAME$z}__text`,
8994
- children: text
8995
9069
  }), attachments && /*#__PURE__*/jsx("div", {
8996
9070
  className: `${CLASSNAME$z}__attachments`,
8997
9071
  children: attachments
@@ -9010,7 +9084,7 @@ const PostBlock = forwardRef((props, ref) => {
9010
9084
  });
9011
9085
  PostBlock.displayName = COMPONENT_NAME$z;
9012
9086
  PostBlock.className = CLASSNAME$z;
9013
- PostBlock.defaultProps = DEFAULT_PROPS$z;
9087
+ PostBlock.defaultProps = DEFAULT_PROPS$y;
9014
9088
 
9015
9089
  /**
9016
9090
  * Component display name.
@@ -9025,7 +9099,7 @@ const CLASSNAME$y = 'lumx-progress-linear';
9025
9099
  /**
9026
9100
  * Component default props.
9027
9101
  */
9028
- const DEFAULT_PROPS$y = {};
9102
+ const DEFAULT_PROPS$x = {};
9029
9103
 
9030
9104
  /**
9031
9105
  * ProgressLinear component.
@@ -9035,7 +9109,7 @@ const DEFAULT_PROPS$y = {};
9035
9109
  * @return React element.
9036
9110
  */
9037
9111
  const ProgressLinear = forwardRef((props, ref) => {
9038
- const defaultTheme = useTheme() || Theme.light;
9112
+ const defaultTheme = useTheme() || Theme$1.light;
9039
9113
  const {
9040
9114
  className,
9041
9115
  theme = defaultTheme,
@@ -9044,7 +9118,7 @@ const ProgressLinear = forwardRef((props, ref) => {
9044
9118
  return /*#__PURE__*/jsxs("div", {
9045
9119
  ref: ref,
9046
9120
  ...forwardedProps,
9047
- className: classNames$1.join(className, handleBasicClasses({
9121
+ className: classNames.join(className, handleBasicClasses({
9048
9122
  prefix: CLASSNAME$y,
9049
9123
  theme
9050
9124
  })),
@@ -9057,7 +9131,7 @@ const ProgressLinear = forwardRef((props, ref) => {
9057
9131
  });
9058
9132
  ProgressLinear.displayName = COMPONENT_NAME$y;
9059
9133
  ProgressLinear.className = CLASSNAME$y;
9060
- ProgressLinear.defaultProps = DEFAULT_PROPS$y;
9134
+ ProgressLinear.defaultProps = DEFAULT_PROPS$x;
9061
9135
 
9062
9136
  /**
9063
9137
  * Component display name.
@@ -9072,8 +9146,8 @@ const CLASSNAME$x = 'lumx-progress-circular';
9072
9146
  /**
9073
9147
  * Component default props.
9074
9148
  */
9075
- const DEFAULT_PROPS$x = {
9076
- size: Size.m,
9149
+ const DEFAULT_PROPS$w = {
9150
+ size: Size$1.m,
9077
9151
  display: 'block'
9078
9152
  };
9079
9153
 
@@ -9085,19 +9159,19 @@ const DEFAULT_PROPS$x = {
9085
9159
  * @return React element.
9086
9160
  */
9087
9161
  const ProgressCircular = forwardRef((props, ref) => {
9088
- const defaultTheme = useTheme() || Theme.light;
9162
+ const defaultTheme = useTheme() || Theme$1.light;
9089
9163
  const {
9090
9164
  className,
9091
9165
  theme = defaultTheme,
9092
- size = DEFAULT_PROPS$x.size,
9093
- display = DEFAULT_PROPS$x.display,
9166
+ size = DEFAULT_PROPS$w.size,
9167
+ display = DEFAULT_PROPS$w.display,
9094
9168
  ...forwardedProps
9095
9169
  } = props;
9096
9170
  const Element = display === 'block' ? 'div' : 'span';
9097
9171
  return /*#__PURE__*/jsxs(Element, {
9098
9172
  ref: ref,
9099
9173
  ...forwardedProps,
9100
- className: classNames$1.join(className, handleBasicClasses({
9174
+ className: classNames.join(className, handleBasicClasses({
9101
9175
  prefix: CLASSNAME$x,
9102
9176
  theme,
9103
9177
  size,
@@ -9123,7 +9197,7 @@ const ProgressCircular = forwardRef((props, ref) => {
9123
9197
  });
9124
9198
  ProgressCircular.displayName = COMPONENT_NAME$x;
9125
9199
  ProgressCircular.className = CLASSNAME$x;
9126
- ProgressCircular.defaultProps = DEFAULT_PROPS$x;
9200
+ ProgressCircular.defaultProps = DEFAULT_PROPS$w;
9127
9201
 
9128
9202
  const ProgressVariant = {
9129
9203
  linear: 'linear',
@@ -9147,7 +9221,7 @@ const CLASSNAME$w = 'lumx-progress';
9147
9221
  /**
9148
9222
  * Component default props.
9149
9223
  */
9150
- const DEFAULT_PROPS$w = {
9224
+ const DEFAULT_PROPS$v = {
9151
9225
  variant: ProgressVariant.circular
9152
9226
  };
9153
9227
 
@@ -9160,17 +9234,17 @@ const DEFAULT_PROPS$w = {
9160
9234
  * @return React element.
9161
9235
  */
9162
9236
  const Progress = forwardRef((props, ref) => {
9163
- const defaultTheme = useTheme() || Theme.light;
9237
+ const defaultTheme = useTheme() || Theme$1.light;
9164
9238
  const {
9165
9239
  className,
9166
9240
  theme = defaultTheme,
9167
- variant = DEFAULT_PROPS$w.variant,
9241
+ variant = DEFAULT_PROPS$v.variant,
9168
9242
  ...forwardedProps
9169
9243
  } = props;
9170
9244
  return /*#__PURE__*/jsxs("div", {
9171
9245
  ref: ref,
9172
9246
  ...forwardedProps,
9173
- className: classNames$1.join(className, handleBasicClasses({
9247
+ className: classNames.join(className, handleBasicClasses({
9174
9248
  prefix: CLASSNAME$w,
9175
9249
  theme,
9176
9250
  variant
@@ -9184,7 +9258,7 @@ const Progress = forwardRef((props, ref) => {
9184
9258
  });
9185
9259
  Progress.displayName = COMPONENT_NAME$w;
9186
9260
  Progress.className = CLASSNAME$w;
9187
- Progress.defaultProps = DEFAULT_PROPS$w;
9261
+ Progress.defaultProps = DEFAULT_PROPS$v;
9188
9262
 
9189
9263
  const INIT_STATE = {
9190
9264
  isLazy: true,
@@ -9311,7 +9385,7 @@ const useTabProviderContextState = () => {
9311
9385
  return context?.[0];
9312
9386
  };
9313
9387
 
9314
- const DEFAULT_PROPS$v = {
9388
+ const DEFAULT_PROPS$u = {
9315
9389
  isLazy: INIT_STATE.isLazy,
9316
9390
  shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
9317
9391
  };
@@ -9340,7 +9414,7 @@ const ProgressTrackerProvider = props => {
9340
9414
  dispatch({
9341
9415
  type: 'update',
9342
9416
  payload: {
9343
- ...DEFAULT_PROPS$v,
9417
+ ...DEFAULT_PROPS$u,
9344
9418
  ...propState,
9345
9419
  activeTabIndex: propState.activeStepIndex || INIT_STATE.activeTabIndex
9346
9420
  }
@@ -9363,7 +9437,7 @@ const ProgressTrackerProvider = props => {
9363
9437
  children: children
9364
9438
  });
9365
9439
  };
9366
- ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$v;
9440
+ ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$u;
9367
9441
 
9368
9442
  const useRovingTabIndex = ({
9369
9443
  parentRef,
@@ -9451,7 +9525,7 @@ const CLASSNAME$v = 'lumx-progress-tracker';
9451
9525
  /**
9452
9526
  * Component default props.
9453
9527
  */
9454
- const DEFAULT_PROPS$u = {};
9528
+ const DEFAULT_PROPS$t = {};
9455
9529
 
9456
9530
  /**
9457
9531
  * ProgressTracker component.
@@ -9483,7 +9557,7 @@ const ProgressTracker = forwardRef((props, ref) => {
9483
9557
  return /*#__PURE__*/jsxs("div", {
9484
9558
  ref: mergeRefs(ref, stepListRef),
9485
9559
  ...forwardedProps,
9486
- className: classNames$1.join(className, CLASSNAME$v),
9560
+ className: classNames.join(className, CLASSNAME$v),
9487
9561
  children: [/*#__PURE__*/jsx("div", {
9488
9562
  className: `${CLASSNAME$v}__steps`,
9489
9563
  role: "tablist",
@@ -9507,7 +9581,7 @@ const ProgressTracker = forwardRef((props, ref) => {
9507
9581
  });
9508
9582
  ProgressTracker.displayName = COMPONENT_NAME$v;
9509
9583
  ProgressTracker.className = CLASSNAME$v;
9510
- ProgressTracker.defaultProps = DEFAULT_PROPS$u;
9584
+ ProgressTracker.defaultProps = DEFAULT_PROPS$t;
9511
9585
 
9512
9586
  /**
9513
9587
  * Component display name.
@@ -9522,7 +9596,7 @@ const CLASSNAME$u = 'lumx-progress-tracker-step';
9522
9596
  /**
9523
9597
  * Component default props.
9524
9598
  */
9525
- const DEFAULT_PROPS$t = {};
9599
+ const DEFAULT_PROPS$s = {};
9526
9600
 
9527
9601
  /**
9528
9602
  * ProgressTrackerStep component.
@@ -9586,7 +9660,7 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
9586
9660
  ...forwardedProps,
9587
9661
  type: "button",
9588
9662
  id: state?.tabId,
9589
- className: classNames$1.join(className, handleBasicClasses({
9663
+ className: classNames.join(className, handleBasicClasses({
9590
9664
  prefix: CLASSNAME$u,
9591
9665
  hasError,
9592
9666
  isActive,
@@ -9604,13 +9678,13 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
9604
9678
  children: [/*#__PURE__*/jsx(Icon, {
9605
9679
  className: `${CLASSNAME$u}__state`,
9606
9680
  icon: getIcon(),
9607
- size: Size.s
9681
+ size: Size$1.s
9608
9682
  }), /*#__PURE__*/jsx(InputLabel, {
9609
9683
  htmlFor: state?.tabId || '',
9610
9684
  className: `${CLASSNAME$u}__label`,
9611
9685
  children: label
9612
9686
  }), helper && /*#__PURE__*/jsx(InputHelper, {
9613
- kind: hasError ? Kind.error : Kind.info,
9687
+ kind: hasError ? Kind$1.error : Kind$1.info,
9614
9688
  className: `${CLASSNAME$u}__helper`,
9615
9689
  children: helper
9616
9690
  })]
@@ -9618,7 +9692,7 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
9618
9692
  });
9619
9693
  ProgressTrackerStep.displayName = COMPONENT_NAME$u;
9620
9694
  ProgressTrackerStep.className = CLASSNAME$u;
9621
- ProgressTrackerStep.defaultProps = DEFAULT_PROPS$t;
9695
+ ProgressTrackerStep.defaultProps = DEFAULT_PROPS$s;
9622
9696
 
9623
9697
  /**
9624
9698
  * Component display name.
@@ -9633,7 +9707,7 @@ const CLASSNAME$t = `lumx-step-panel`;
9633
9707
  /**
9634
9708
  * Component default props.
9635
9709
  */
9636
- const DEFAULT_PROPS$s = {};
9710
+ const DEFAULT_PROPS$r = {};
9637
9711
 
9638
9712
  /**
9639
9713
  * ProgressTrackerStepPanel component.
@@ -9658,7 +9732,7 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
9658
9732
  ref: ref,
9659
9733
  ...forwardedProps,
9660
9734
  id: state?.tabPanelId,
9661
- className: classNames$1.join(className, handleBasicClasses({
9735
+ className: classNames.join(className, handleBasicClasses({
9662
9736
  prefix: CLASSNAME$t,
9663
9737
  isActive
9664
9738
  })),
@@ -9670,7 +9744,7 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
9670
9744
  });
9671
9745
  ProgressTrackerStepPanel.displayName = COMPONENT_NAME$t;
9672
9746
  ProgressTrackerStepPanel.className = CLASSNAME$t;
9673
- ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$s;
9747
+ ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$r;
9674
9748
 
9675
9749
  /**
9676
9750
  * Component display name.
@@ -9685,7 +9759,7 @@ const CLASSNAME$s = 'lumx-radio-button';
9685
9759
  /**
9686
9760
  * Component default props.
9687
9761
  */
9688
- const DEFAULT_PROPS$r = {};
9762
+ const DEFAULT_PROPS$q = {};
9689
9763
 
9690
9764
  /**
9691
9765
  * RadioButton component.
@@ -9700,7 +9774,7 @@ const RadioButton = forwardRef((props, ref) => {
9700
9774
  disabledStateProps,
9701
9775
  otherProps
9702
9776
  } = useDisableStateProps(props);
9703
- const defaultTheme = useTheme() || Theme.light;
9777
+ const defaultTheme = useTheme() || Theme$1.light;
9704
9778
  const {
9705
9779
  checked,
9706
9780
  className,
@@ -9726,7 +9800,7 @@ const RadioButton = forwardRef((props, ref) => {
9726
9800
  return /*#__PURE__*/jsxs("div", {
9727
9801
  ref: ref,
9728
9802
  ...forwardedProps,
9729
- className: classNames$1.join(className, handleBasicClasses({
9803
+ className: classNames.join(className, handleBasicClasses({
9730
9804
  isChecked,
9731
9805
  isDisabled: isAnyDisabled,
9732
9806
  isUnchecked: !isChecked,
@@ -9774,7 +9848,7 @@ const RadioButton = forwardRef((props, ref) => {
9774
9848
  });
9775
9849
  RadioButton.displayName = COMPONENT_NAME$s;
9776
9850
  RadioButton.className = CLASSNAME$s;
9777
- RadioButton.defaultProps = DEFAULT_PROPS$r;
9851
+ RadioButton.defaultProps = DEFAULT_PROPS$q;
9778
9852
 
9779
9853
  /**
9780
9854
  * Component display name.
@@ -9802,7 +9876,7 @@ const RadioGroup = forwardRef((props, ref) => {
9802
9876
  return /*#__PURE__*/jsx("div", {
9803
9877
  ref: ref,
9804
9878
  ...forwardedProps,
9805
- className: classNames$1.join(className, CLASSNAME$r),
9879
+ className: classNames.join(className, CLASSNAME$r),
9806
9880
  children: children
9807
9881
  });
9808
9882
  });
@@ -9836,7 +9910,7 @@ function useListenFocus(ref) {
9836
9910
  /** The default class name and classes prefix for this component. */
9837
9911
  const CLASSNAME$q = 'lumx-select';
9838
9912
  const WithSelectContext = (SelectElement, props, ref) => {
9839
- const defaultTheme = useTheme() || Theme.light;
9913
+ const defaultTheme = useTheme() || Theme$1.light;
9840
9914
  const {
9841
9915
  children,
9842
9916
  className,
@@ -9887,7 +9961,7 @@ const WithSelectContext = (SelectElement, props, ref) => {
9887
9961
  useFocusTrap(isOpen && dropdownRef.current, focusElement?.current);
9888
9962
  return /*#__PURE__*/jsxs("div", {
9889
9963
  ref: mergeRefs(ref, selectRef),
9890
- className: classNames$1.join(className, handleBasicClasses({
9964
+ className: classNames.join(className, handleBasicClasses({
9891
9965
  hasError,
9892
9966
  hasLabel: Boolean(label),
9893
9967
  hasPlaceholder: Boolean(placeholder),
@@ -9898,7 +9972,7 @@ const WithSelectContext = (SelectElement, props, ref) => {
9898
9972
  isOpen,
9899
9973
  isValid,
9900
9974
  prefix: CLASSNAME$q,
9901
- theme: theme === Theme.light ? Theme.light : Theme.dark
9975
+ theme: theme === Theme$1.light ? Theme$1.light : Theme$1.dark
9902
9976
  })),
9903
9977
  children: [/*#__PURE__*/jsx(SelectElement, {
9904
9978
  ...forwardedProps,
@@ -9931,7 +10005,7 @@ const WithSelectContext = (SelectElement, props, ref) => {
9931
10005
  children: children
9932
10006
  }), hasError && error && /*#__PURE__*/jsx(InputHelper, {
9933
10007
  className: `${CLASSNAME$q}__helper`,
9934
- kind: Kind.error,
10008
+ kind: Kind$1.error,
9935
10009
  theme: theme,
9936
10010
  children: error
9937
10011
  }), helper && /*#__PURE__*/jsx(InputHelper, {
@@ -9957,7 +10031,7 @@ const COMPONENT_NAME$q = 'Select';
9957
10031
  const CLASSNAME$p = 'lumx-select';
9958
10032
 
9959
10033
  /** The default value of props. */
9960
- const DEFAULT_PROPS$q = {
10034
+ const DEFAULT_PROPS$p = {
9961
10035
  selectedValueRender: choice => choice,
9962
10036
  variant: SelectVariant.input
9963
10037
  };
@@ -10013,11 +10087,11 @@ const SelectField = props => {
10013
10087
  ...forwardedProps,
10014
10088
  children: [icon && /*#__PURE__*/jsx(Icon, {
10015
10089
  className: `${CLASSNAME$p}__input-icon`,
10016
- color: theme === Theme.dark ? 'light' : undefined,
10090
+ color: theme === Theme$1.dark ? 'light' : undefined,
10017
10091
  icon: icon,
10018
- size: Size.xs
10092
+ size: Size$1.xs
10019
10093
  }), /*#__PURE__*/jsxs("div", {
10020
- className: classNames$1.join([`${CLASSNAME$p}__input-native`, isEmpty && placeholder && `${CLASSNAME$p}__input-native--placeholder`]),
10094
+ className: classNames.join([`${CLASSNAME$p}__input-native`, isEmpty && placeholder && `${CLASSNAME$p}__input-native--placeholder`]),
10021
10095
  children: [!isEmpty && /*#__PURE__*/jsx("span", {
10022
10096
  children: selectedValueRender?.(value)
10023
10097
  }), isEmpty && placeholder && /*#__PURE__*/jsx("span", {
@@ -10027,14 +10101,14 @@ const SelectField = props => {
10027
10101
  className: `${CLASSNAME$p}__input-validity`,
10028
10102
  children: /*#__PURE__*/jsx(Icon, {
10029
10103
  icon: isValid ? mdiCheckCircle : mdiAlertCircle,
10030
- size: Size.xxs
10104
+ size: Size$1.xxs
10031
10105
  })
10032
10106
  }), hasInputClear && clearButtonProps && /*#__PURE__*/jsx(IconButton, {
10033
10107
  ...clearButtonProps,
10034
10108
  className: `${CLASSNAME$p}__input-clear`,
10035
10109
  icon: mdiCloseCircle,
10036
10110
  emphasis: Emphasis.low,
10037
- size: Size.s,
10111
+ size: Size$1.s,
10038
10112
  theme: theme,
10039
10113
  onClick: onClear,
10040
10114
  onKeyDown: stopPropagation
@@ -10042,7 +10116,7 @@ const SelectField = props => {
10042
10116
  className: `${CLASSNAME$p}__input-indicator`,
10043
10117
  children: /*#__PURE__*/jsx(Icon, {
10044
10118
  icon: mdiMenuDown,
10045
- size: Size.s
10119
+ size: Size$1.s
10046
10120
  })
10047
10121
  })]
10048
10122
  })]
@@ -10078,9 +10152,9 @@ const Select = forwardRef((props, ref) => {
10078
10152
  const isEmpty$1 = isEmpty(props.value);
10079
10153
  const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty$1;
10080
10154
  return WithSelectContext(SelectField, {
10081
- ...DEFAULT_PROPS$q,
10155
+ ...DEFAULT_PROPS$p,
10082
10156
  ...props,
10083
- className: classNames$1.join(props.className, handleBasicClasses({
10157
+ className: classNames.join(props.className, handleBasicClasses({
10084
10158
  hasInputClear,
10085
10159
  hasUnique: !props.isEmpty,
10086
10160
  prefix: CLASSNAME$p
@@ -10091,7 +10165,7 @@ const Select = forwardRef((props, ref) => {
10091
10165
  });
10092
10166
  Select.displayName = COMPONENT_NAME$q;
10093
10167
  Select.className = CLASSNAME$p;
10094
- Select.defaultProps = DEFAULT_PROPS$q;
10168
+ Select.defaultProps = DEFAULT_PROPS$p;
10095
10169
  Select.className = CLASSNAME$p;
10096
10170
 
10097
10171
  /** The display name of the component. */
@@ -10101,16 +10175,16 @@ const COMPONENT_NAME$p = 'Select';
10101
10175
  const CLASSNAME$o = 'lumx-select';
10102
10176
 
10103
10177
  /** The default value of props. */
10104
- const DEFAULT_PROPS$p = {
10178
+ const DEFAULT_PROPS$o = {
10105
10179
  selectedChipRender(choice, index, onClear, isDisabled, theme) {
10106
10180
  const onClick = event => onClear && onClear(event, choice);
10107
10181
  return /*#__PURE__*/jsx(Chip, {
10108
10182
  after: onClear && /*#__PURE__*/jsx(Icon, {
10109
10183
  icon: mdiClose,
10110
- size: Size.xxs
10184
+ size: Size$1.xxs
10111
10185
  }),
10112
10186
  isDisabled: isDisabled,
10113
- size: Size.s,
10187
+ size: Size$1.s,
10114
10188
  onAfterClick: onClick,
10115
10189
  onClick: onClick,
10116
10190
  theme: theme,
@@ -10166,14 +10240,14 @@ const SelectMultipleField = props => {
10166
10240
  ...forwardedProps,
10167
10241
  children: [icon && /*#__PURE__*/jsx(Icon, {
10168
10242
  className: `${CLASSNAME$o}__input-icon`,
10169
- color: theme === Theme.dark ? 'light' : undefined,
10243
+ color: theme === Theme$1.dark ? 'light' : undefined,
10170
10244
  icon: icon,
10171
- size: Size.xs
10245
+ size: Size$1.xs
10172
10246
  }), /*#__PURE__*/jsx("div", {
10173
10247
  className: `${CLASSNAME$o}__chips`,
10174
10248
  children: !isEmpty && value.map((val, index) => selectedChipRender?.(val, index, onClear, isDisabled, theme))
10175
10249
  }), isEmpty && placeholder && /*#__PURE__*/jsx("div", {
10176
- className: classNames$1.join([`${CLASSNAME$o}__input-native`, `${CLASSNAME$o}__input-native--placeholder`]),
10250
+ className: classNames.join([`${CLASSNAME$o}__input-native`, `${CLASSNAME$o}__input-native--placeholder`]),
10177
10251
  children: /*#__PURE__*/jsx("span", {
10178
10252
  children: placeholder
10179
10253
  })
@@ -10181,13 +10255,13 @@ const SelectMultipleField = props => {
10181
10255
  className: `${CLASSNAME$o}__input-validity`,
10182
10256
  children: /*#__PURE__*/jsx(Icon, {
10183
10257
  icon: isValid ? mdiCheckCircle : mdiAlertCircle,
10184
- size: Size.xxs
10258
+ size: Size$1.xxs
10185
10259
  })
10186
10260
  }), /*#__PURE__*/jsx("div", {
10187
10261
  className: `${CLASSNAME$o}__input-indicator`,
10188
10262
  children: /*#__PURE__*/jsx(Icon, {
10189
10263
  icon: mdiMenuDown,
10190
- size: Size.s
10264
+ size: Size$1.s
10191
10265
  })
10192
10266
  })]
10193
10267
  })]
@@ -10225,9 +10299,9 @@ const SelectMultipleField = props => {
10225
10299
  */
10226
10300
  const SelectMultiple = forwardRef((props, ref) => {
10227
10301
  return WithSelectContext(SelectMultipleField, {
10228
- ...DEFAULT_PROPS$p,
10302
+ ...DEFAULT_PROPS$o,
10229
10303
  ...props,
10230
- className: classNames$1.join(props.className, handleBasicClasses({
10304
+ className: classNames.join(props.className, handleBasicClasses({
10231
10305
  hasMultiple: !props.isEmpty,
10232
10306
  prefix: CLASSNAME$o
10233
10307
  })),
@@ -10237,7 +10311,7 @@ const SelectMultiple = forwardRef((props, ref) => {
10237
10311
  });
10238
10312
  SelectMultiple.displayName = COMPONENT_NAME$p;
10239
10313
  SelectMultiple.className = CLASSNAME$o;
10240
- SelectMultiple.defaultProps = DEFAULT_PROPS$p;
10314
+ SelectMultiple.defaultProps = DEFAULT_PROPS$o;
10241
10315
 
10242
10316
  /**
10243
10317
  * Component display name.
@@ -10268,7 +10342,7 @@ const SideNavigation = forwardRef((props, ref) => {
10268
10342
  return /*#__PURE__*/jsx("ul", {
10269
10343
  ref: ref,
10270
10344
  ...forwardedProps,
10271
- className: classNames$1.join(className, theme === Theme.dark && 'lumx-color-font-light-N', CLASSNAME$n),
10345
+ className: classNames.join(className, theme === Theme$1.dark && 'lumx-color-font-light-N', CLASSNAME$n),
10272
10346
  children: content
10273
10347
  });
10274
10348
  });
@@ -10288,7 +10362,7 @@ const CLASSNAME$m = 'lumx-side-navigation-item';
10288
10362
  /**
10289
10363
  * Component default props.
10290
10364
  */
10291
- const DEFAULT_PROPS$o = {
10365
+ const DEFAULT_PROPS$n = {
10292
10366
  emphasis: Emphasis.high,
10293
10367
  closeMode: 'unmount'
10294
10368
  };
@@ -10304,7 +10378,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
10304
10378
  const {
10305
10379
  children,
10306
10380
  className,
10307
- emphasis = DEFAULT_PROPS$o.emphasis,
10381
+ emphasis = DEFAULT_PROPS$n.emphasis,
10308
10382
  icon,
10309
10383
  isOpen,
10310
10384
  isSelected,
@@ -10314,7 +10388,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
10314
10388
  onActionClick,
10315
10389
  onClick,
10316
10390
  toggleButtonProps,
10317
- closeMode = DEFAULT_PROPS$o.closeMode,
10391
+ closeMode = DEFAULT_PROPS$n.closeMode,
10318
10392
  ...forwardedProps
10319
10393
  } = props;
10320
10394
  const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
@@ -10331,7 +10405,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
10331
10405
  return /*#__PURE__*/jsxs("li", {
10332
10406
  ref: ref,
10333
10407
  ...forwardedProps,
10334
- className: classNames$1.join(className, handleBasicClasses({
10408
+ className: classNames.join(className, handleBasicClasses({
10335
10409
  emphasis,
10336
10410
  isOpen: showChildren,
10337
10411
  isSelected,
@@ -10347,7 +10421,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
10347
10421
  children: [icon && /*#__PURE__*/jsx(Icon, {
10348
10422
  className: `${CLASSNAME$m}__icon`,
10349
10423
  icon: icon,
10350
- size: Size.xs
10424
+ size: Size$1.xs
10351
10425
  }), /*#__PURE__*/jsx("span", {
10352
10426
  children: label
10353
10427
  })]
@@ -10355,7 +10429,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
10355
10429
  ...toggleButtonProps,
10356
10430
  className: `${CLASSNAME$m}__toggle`,
10357
10431
  icon: isOpen ? mdiChevronUp : mdiChevronDown,
10358
- size: Size.m,
10432
+ size: Size$1.m,
10359
10433
  emphasis: Emphasis.low,
10360
10434
  onClick: onActionClick,
10361
10435
  ...ariaProps
@@ -10369,13 +10443,13 @@ const SideNavigationItem = forwardRef((props, ref) => {
10369
10443
  children: [icon && /*#__PURE__*/jsx(Icon, {
10370
10444
  className: `${CLASSNAME$m}__icon`,
10371
10445
  icon: icon,
10372
- size: Size.xs
10446
+ size: Size$1.xs
10373
10447
  }), /*#__PURE__*/jsx("span", {
10374
10448
  children: label
10375
10449
  }), hasContent && /*#__PURE__*/jsx(Icon, {
10376
10450
  className: `${CLASSNAME$m}__chevron`,
10377
10451
  icon: isOpen ? mdiChevronUp : mdiChevronDown,
10378
- size: Size.xs
10452
+ size: Size$1.xs
10379
10453
  })]
10380
10454
  }), (closeMode === 'hide' || showChildren) && /*#__PURE__*/jsx("ul", {
10381
10455
  className: `${CLASSNAME$m}__children`,
@@ -10386,9 +10460,9 @@ const SideNavigationItem = forwardRef((props, ref) => {
10386
10460
  });
10387
10461
  SideNavigationItem.displayName = COMPONENT_NAME$n;
10388
10462
  SideNavigationItem.className = CLASSNAME$m;
10389
- SideNavigationItem.defaultProps = DEFAULT_PROPS$o;
10463
+ SideNavigationItem.defaultProps = DEFAULT_PROPS$n;
10390
10464
 
10391
- const DEFAULT_PROPS$n = {};
10465
+ const DEFAULT_PROPS$m = {};
10392
10466
 
10393
10467
  /**
10394
10468
  * Component display name.
@@ -10408,7 +10482,7 @@ const CLASSNAME$l = 'lumx-skeleton-circle';
10408
10482
  * @return React element.
10409
10483
  */
10410
10484
  const SkeletonCircle = forwardRef((props, ref) => {
10411
- const defaultTheme = useTheme() || Theme.light;
10485
+ const defaultTheme = useTheme() || Theme$1.light;
10412
10486
  const {
10413
10487
  className,
10414
10488
  size,
@@ -10419,7 +10493,7 @@ const SkeletonCircle = forwardRef((props, ref) => {
10419
10493
  return /*#__PURE__*/jsx("div", {
10420
10494
  ref: ref,
10421
10495
  ...forwardedProps,
10422
- className: classNames$1.join(className, handleBasicClasses({
10496
+ className: classNames.join(className, handleBasicClasses({
10423
10497
  prefix: CLASSNAME$l,
10424
10498
  size,
10425
10499
  color,
@@ -10428,7 +10502,7 @@ const SkeletonCircle = forwardRef((props, ref) => {
10428
10502
  });
10429
10503
  });
10430
10504
  SkeletonCircle.displayName = COMPONENT_NAME$m;
10431
- SkeletonCircle.defaultProps = DEFAULT_PROPS$n;
10505
+ SkeletonCircle.defaultProps = DEFAULT_PROPS$m;
10432
10506
  SkeletonCircle.className = CLASSNAME$l;
10433
10507
 
10434
10508
  const SkeletonRectangleVariant = {
@@ -10441,7 +10515,7 @@ const SkeletonRectangleVariant = {
10441
10515
  * Defines the props of the component.
10442
10516
  */
10443
10517
 
10444
- const DEFAULT_PROPS$m = {
10518
+ const DEFAULT_PROPS$l = {
10445
10519
  variant: SkeletonRectangleVariant.squared
10446
10520
  };
10447
10521
 
@@ -10463,13 +10537,13 @@ const CLASSNAME$k = 'lumx-skeleton-rectangle';
10463
10537
  * @return React element.
10464
10538
  */
10465
10539
  const SkeletonRectangle = forwardRef((props, ref) => {
10466
- const defaultTheme = useTheme() || Theme.light;
10540
+ const defaultTheme = useTheme() || Theme$1.light;
10467
10541
  const {
10468
10542
  aspectRatio,
10469
10543
  className,
10470
10544
  height,
10471
10545
  theme = defaultTheme,
10472
- variant = DEFAULT_PROPS$m.variant,
10546
+ variant = DEFAULT_PROPS$l.variant,
10473
10547
  width,
10474
10548
  color,
10475
10549
  ...forwardedProps
@@ -10477,7 +10551,7 @@ const SkeletonRectangle = forwardRef((props, ref) => {
10477
10551
  return /*#__PURE__*/jsx("div", {
10478
10552
  ref: ref,
10479
10553
  ...forwardedProps,
10480
- className: classNames$1.join(className, handleBasicClasses({
10554
+ className: classNames.join(className, handleBasicClasses({
10481
10555
  prefix: CLASSNAME$k,
10482
10556
  aspectRatio,
10483
10557
  height: aspectRatio ? undefined : height,
@@ -10493,9 +10567,9 @@ const SkeletonRectangle = forwardRef((props, ref) => {
10493
10567
  });
10494
10568
  SkeletonRectangle.displayName = COMPONENT_NAME$l;
10495
10569
  SkeletonRectangle.className = CLASSNAME$k;
10496
- SkeletonRectangle.defaultProps = DEFAULT_PROPS$m;
10570
+ SkeletonRectangle.defaultProps = DEFAULT_PROPS$l;
10497
10571
 
10498
- const DEFAULT_PROPS$l = {};
10572
+ const DEFAULT_PROPS$k = {};
10499
10573
 
10500
10574
  /**
10501
10575
  * Component display name.
@@ -10515,7 +10589,7 @@ const CLASSNAME$j = 'lumx-skeleton-typography';
10515
10589
  * @return React element.
10516
10590
  */
10517
10591
  const SkeletonTypography = forwardRef((props, ref) => {
10518
- const defaultTheme = useTheme() || Theme.light;
10592
+ const defaultTheme = useTheme() || Theme$1.light;
10519
10593
  const {
10520
10594
  className,
10521
10595
  theme = defaultTheme,
@@ -10527,7 +10601,7 @@ const SkeletonTypography = forwardRef((props, ref) => {
10527
10601
  return /*#__PURE__*/jsx("div", {
10528
10602
  ref: ref,
10529
10603
  ...forwardedProps,
10530
- className: classNames$1.join(className, handleBasicClasses({
10604
+ className: classNames.join(className, handleBasicClasses({
10531
10605
  prefix: CLASSNAME$j,
10532
10606
  theme,
10533
10607
  typography,
@@ -10543,7 +10617,7 @@ const SkeletonTypography = forwardRef((props, ref) => {
10543
10617
  });
10544
10618
  });
10545
10619
  SkeletonTypography.displayName = COMPONENT_NAME$k;
10546
- SkeletonTypography.defaultProps = DEFAULT_PROPS$l;
10620
+ SkeletonTypography.defaultProps = DEFAULT_PROPS$k;
10547
10621
  SkeletonTypography.className = CLASSNAME$j;
10548
10622
 
10549
10623
  const useEnhancedEffect = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
@@ -10594,7 +10668,7 @@ const CLASSNAME$i = 'lumx-slider';
10594
10668
  /**
10595
10669
  * Component default props.
10596
10670
  */
10597
- const DEFAULT_PROPS$k = {
10671
+ const DEFAULT_PROPS$j = {
10598
10672
  precision: 0,
10599
10673
  steps: 0
10600
10674
  };
@@ -10633,7 +10707,7 @@ const Slider = forwardRef((props, ref) => {
10633
10707
  disabledStateProps,
10634
10708
  otherProps
10635
10709
  } = useDisableStateProps(props);
10636
- const defaultTheme = useTheme() || Theme.light;
10710
+ const defaultTheme = useTheme() || Theme$1.light;
10637
10711
  const {
10638
10712
  className,
10639
10713
  helper,
@@ -10645,8 +10719,8 @@ const Slider = forwardRef((props, ref) => {
10645
10719
  name,
10646
10720
  onChange,
10647
10721
  onMouseDown,
10648
- precision = DEFAULT_PROPS$k.precision,
10649
- steps = DEFAULT_PROPS$k.steps,
10722
+ precision = DEFAULT_PROPS$j.precision,
10723
+ steps = DEFAULT_PROPS$j.steps,
10650
10724
  theme = defaultTheme,
10651
10725
  value,
10652
10726
  ...forwardedProps
@@ -10782,7 +10856,7 @@ const Slider = forwardRef((props, ref) => {
10782
10856
  return /*#__PURE__*/jsxs("div", {
10783
10857
  ref: ref,
10784
10858
  ...forwardedProps,
10785
- className: classNames$1.join(className, handleBasicClasses({
10859
+ className: classNames.join(className, handleBasicClasses({
10786
10860
  prefix: CLASSNAME$i,
10787
10861
  theme,
10788
10862
  hasLabel: Boolean(label)
@@ -10842,7 +10916,7 @@ const Slider = forwardRef((props, ref) => {
10842
10916
  });
10843
10917
  Slider.displayName = COMPONENT_NAME$j;
10844
10918
  Slider.className = CLASSNAME$i;
10845
- Slider.defaultProps = DEFAULT_PROPS$k;
10919
+ Slider.defaultProps = DEFAULT_PROPS$j;
10846
10920
 
10847
10921
  /**
10848
10922
  * Making setInterval Declarative with React Hooks.
@@ -11192,7 +11266,7 @@ const SlideshowItemGroup = forwardRef((props, ref) => {
11192
11266
  return /*#__PURE__*/jsx("div", {
11193
11267
  ref: mergeRefs(groupRef, ref),
11194
11268
  role: role,
11195
- className: classNames$1.join(className, CLASSNAME$h),
11269
+ className: classNames.join(className, CLASSNAME$h),
11196
11270
  "aria-roledescription": "slide",
11197
11271
  "aria-label": label,
11198
11272
  ...forwardedProps,
@@ -11205,10 +11279,7 @@ SlideshowItemGroup.className = CLASSNAME$h;
11205
11279
  /**
11206
11280
  * Component default props.
11207
11281
  */
11208
- const DEFAULT_PROPS$j = {
11209
- ...DEFAULT_OPTIONS,
11210
- mode: 'transform'
11211
- };
11282
+ const DEFAULT_PROPS$i = DEFAULT_OPTIONS;
11212
11283
 
11213
11284
  /**
11214
11285
  * Slideshow component.
@@ -11218,22 +11289,21 @@ const DEFAULT_PROPS$j = {
11218
11289
  * @return React element.
11219
11290
  */
11220
11291
  const Slideshow = forwardRef((props, ref) => {
11221
- const defaultTheme = useTheme() || Theme.light;
11292
+ const defaultTheme = useTheme() || Theme$1.light;
11222
11293
  const {
11223
11294
  activeIndex,
11224
- autoPlay = DEFAULT_PROPS$j.autoPlay,
11295
+ autoPlay = DEFAULT_PROPS$i.autoPlay,
11225
11296
  children,
11226
11297
  className,
11227
11298
  fillHeight,
11228
11299
  groupBy = DEFAULT_OPTIONS.groupBy,
11229
- interval = DEFAULT_PROPS$j.interval,
11300
+ interval = DEFAULT_PROPS$i.interval,
11230
11301
  onChange,
11231
11302
  slideshowControlsProps,
11232
11303
  theme = defaultTheme,
11233
11304
  id,
11234
11305
  slidesId,
11235
11306
  slideGroupLabel,
11236
- mode = DEFAULT_PROPS$j.mode,
11237
11307
  ...forwardedProps
11238
11308
  } = props;
11239
11309
  // Number of slideshow items.
@@ -11255,7 +11325,7 @@ const Slideshow = forwardRef((props, ref) => {
11255
11325
  toggleForcePause
11256
11326
  } = SlideshowControls.useSlideshowControls({
11257
11327
  activeIndex,
11258
- defaultActiveIndex: DEFAULT_PROPS$j.activeIndex,
11328
+ defaultActiveIndex: DEFAULT_PROPS$i.activeIndex,
11259
11329
  autoPlay: Boolean(autoPlay),
11260
11330
  itemsCount,
11261
11331
  groupBy,
@@ -11271,8 +11341,6 @@ const Slideshow = forwardRef((props, ref) => {
11271
11341
  });
11272
11342
  const showControls = slideshowControlsProps && slidesCount > 1;
11273
11343
  return /*#__PURE__*/jsx(Slides, {
11274
- mode: mode,
11275
- onChange: mode === 'scroll-snap' ? onPaginationClick : undefined,
11276
11344
  activeIndex: currentIndex,
11277
11345
  id: slideshowId,
11278
11346
  className: className,
@@ -11322,7 +11390,7 @@ const Slideshow = forwardRef((props, ref) => {
11322
11390
  });
11323
11391
  });
11324
11392
  Slideshow.displayName = 'Slideshow';
11325
- Slideshow.defaultProps = DEFAULT_PROPS$j;
11393
+ Slideshow.defaultProps = DEFAULT_PROPS$i;
11326
11394
 
11327
11395
  /**
11328
11396
  * Component display name.
@@ -11349,7 +11417,7 @@ const SlideshowItem = forwardRef((props, ref) => {
11349
11417
  } = props;
11350
11418
  return /*#__PURE__*/jsx("div", {
11351
11419
  ref: ref,
11352
- className: classNames$1.join(className, CLASSNAME$g),
11420
+ className: classNames.join(className, CLASSNAME$g),
11353
11421
  ...forwardedProps,
11354
11422
  children: children
11355
11423
  });
@@ -11427,7 +11495,7 @@ const CLASSNAME$f = 'lumx-slideshow-controls';
11427
11495
  /**
11428
11496
  * Component default props.
11429
11497
  */
11430
- const DEFAULT_PROPS$i = {
11498
+ const DEFAULT_PROPS$h = {
11431
11499
  activeIndex: 0
11432
11500
  };
11433
11501
 
@@ -11439,9 +11507,9 @@ const DEFAULT_PROPS$i = {
11439
11507
  * @return React element.
11440
11508
  */
11441
11509
  const InternalSlideshowControls = forwardRef((props, ref) => {
11442
- const defaultTheme = useTheme() || Theme.light;
11510
+ const defaultTheme = useTheme() || Theme$1.light;
11443
11511
  const {
11444
- activeIndex = DEFAULT_PROPS$i.activeIndex,
11512
+ activeIndex = DEFAULT_PROPS$h.activeIndex,
11445
11513
  className,
11446
11514
  nextButtonProps,
11447
11515
  onNextClick,
@@ -11493,7 +11561,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
11493
11561
  return /*#__PURE__*/jsxs("div", {
11494
11562
  ref: ref,
11495
11563
  ...forwardedProps,
11496
- className: classNames$1.join(className, handleBasicClasses({
11564
+ className: classNames.join(className, handleBasicClasses({
11497
11565
  prefix: CLASSNAME$f,
11498
11566
  theme
11499
11567
  }), {
@@ -11503,7 +11571,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
11503
11571
  ...previousButtonProps,
11504
11572
  icon: mdiChevronLeft,
11505
11573
  className: `${CLASSNAME$f}__navigation`,
11506
- color: theme === Theme.dark ? 'light' : 'dark',
11574
+ color: theme === Theme$1.dark ? 'light' : 'dark',
11507
11575
  emphasis: Emphasis.low,
11508
11576
  onClick: onPreviousClick
11509
11577
  }), /*#__PURE__*/jsx("div", {
@@ -11525,7 +11593,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
11525
11593
  } = paginationItemProps ? paginationItemProps(index) : {};
11526
11594
  const ariaLabel = label || paginationItemLabel?.(index) || `${index + 1} / ${slidesCount}`;
11527
11595
  return /*#__PURE__*/jsx("button", {
11528
- className: classNames$1.join(handleBasicClasses({
11596
+ className: classNames.join(handleBasicClasses({
11529
11597
  prefix: `${CLASSNAME$f}__pagination-item`,
11530
11598
  isActive,
11531
11599
  isOnEdge,
@@ -11545,13 +11613,13 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
11545
11613
  ...playButtonProps,
11546
11614
  icon: isAutoPlaying ? mdiPauseCircleOutline : mdiPlayCircleOutline,
11547
11615
  className: `${CLASSNAME$f}__play`,
11548
- color: theme === Theme.dark ? 'light' : 'dark',
11616
+ color: theme === Theme$1.dark ? 'light' : 'dark',
11549
11617
  emphasis: Emphasis.low
11550
11618
  }) : null, /*#__PURE__*/jsx(IconButton, {
11551
11619
  ...nextButtonProps,
11552
11620
  icon: mdiChevronRight,
11553
11621
  className: `${CLASSNAME$f}__navigation`,
11554
- color: theme === Theme.dark ? 'light' : 'dark',
11622
+ color: theme === Theme$1.dark ? 'light' : 'dark',
11555
11623
  emphasis: Emphasis.low,
11556
11624
  onClick: onNextClick
11557
11625
  })]
@@ -11559,62 +11627,12 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
11559
11627
  });
11560
11628
  InternalSlideshowControls.displayName = COMPONENT_NAME$g;
11561
11629
  InternalSlideshowControls.className = CLASSNAME$f;
11562
- InternalSlideshowControls.defaultProps = DEFAULT_PROPS$i;
11630
+ InternalSlideshowControls.defaultProps = DEFAULT_PROPS$h;
11563
11631
  const SlideshowControls = Object.assign(InternalSlideshowControls, {
11564
11632
  useSlideshowControls,
11565
11633
  useSlideshowControlsDefaultOptions: DEFAULT_OPTIONS
11566
11634
  });
11567
11635
 
11568
- /**
11569
- * Hook to handle scroll synchronization for the Slideshow component.
11570
- * It syncs the scroll position with the active index and vice-versa.
11571
- */
11572
- const useSlideScroll = ({
11573
- enabled,
11574
- activeIndex,
11575
- wrapperRef,
11576
- onChange
11577
- }) => {
11578
- const isAutoScrollRef = React__default.useRef(false);
11579
-
11580
- // Sync State -> DOM (Programmatic Navigation)
11581
- React__default.useEffect(() => {
11582
- if (!enabled || !wrapperRef.current) return;
11583
- const wrapper = wrapperRef.current;
11584
- const targetElement = wrapper.children[activeIndex];
11585
- if (!targetElement) return;
11586
- isAutoScrollRef.current = true;
11587
- wrapper.scrollTo({
11588
- left: targetElement.offsetLeft,
11589
- behavior: !isReducedMotion() ? 'smooth' : undefined
11590
- });
11591
- }, [activeIndex, enabled, wrapperRef]);
11592
-
11593
- // Sync DOM -> State (User Interaction)
11594
- React__default.useEffect(() => {
11595
- if (!enabled || !wrapperRef.current) return undefined;
11596
- const wrapper = wrapperRef.current;
11597
- const handleScroll = debounce$1(() => {
11598
- const {
11599
- scrollLeft,
11600
- clientWidth
11601
- } = wrapper;
11602
- const newIndex = Math.round(scrollLeft / clientWidth);
11603
-
11604
- // Skip onChange when scroll triggered in previous useEffect
11605
- if (!isAutoScrollRef.current) {
11606
- onChange?.(newIndex);
11607
- }
11608
- isAutoScrollRef.current = false;
11609
- }, 100);
11610
- wrapper.addEventListener('scroll', handleScroll);
11611
- return () => {
11612
- wrapper.removeEventListener('scroll', handleScroll);
11613
- handleScroll.cancel();
11614
- };
11615
- }, [enabled, onChange, wrapperRef, activeIndex]);
11616
- };
11617
-
11618
11636
  /**
11619
11637
  * Component display name.
11620
11638
  */
@@ -11625,13 +11643,6 @@ const COMPONENT_NAME$f = 'Slideshow';
11625
11643
  */
11626
11644
  const CLASSNAME$e = 'lumx-slideshow';
11627
11645
 
11628
- /**
11629
- * Component default props.
11630
- */
11631
- const DEFAULT_PROPS$h = {
11632
- mode: 'transform'
11633
- };
11634
-
11635
11646
  /**
11636
11647
  * Slides component.
11637
11648
  *
@@ -11655,24 +11666,16 @@ const Slides = forwardRef((props, ref) => {
11655
11666
  afterSlides,
11656
11667
  hasControls,
11657
11668
  slideGroupLabel,
11658
- mode = DEFAULT_PROPS$h.mode,
11659
- onChange,
11660
11669
  ...forwardedProps
11661
11670
  } = props;
11662
11671
  const wrapperRef = React__default.useRef(null);
11663
11672
  const startIndexVisible = activeIndex;
11664
11673
  const endIndexVisible = startIndexVisible + 1;
11665
- useSlideScroll({
11666
- activeIndex,
11667
- enabled: mode === 'scroll-snap',
11668
- wrapperRef,
11669
- onChange
11670
- });
11671
11674
 
11672
11675
  // Inline style of wrapper element.
11673
- const wrapperStyle = mode === 'transform' ? {
11676
+ const wrapperStyle = {
11674
11677
  transform: `translateX(-${FULL_WIDTH_PERCENT * activeIndex}%)`
11675
- } : undefined;
11678
+ };
11676
11679
  const groups = React__default.useMemo(() => {
11677
11680
  const childrenArray = Children.toArray(children);
11678
11681
  return groupBy && groupBy > 1 ? chunk(childrenArray, groupBy) : childrenArray;
@@ -11681,7 +11684,7 @@ const Slides = forwardRef((props, ref) => {
11681
11684
  id: id,
11682
11685
  ref: ref,
11683
11686
  ...forwardedProps,
11684
- className: classNames$1.join(className, handleBasicClasses({
11687
+ className: classNames.join(className, handleBasicClasses({
11685
11688
  prefix: CLASSNAME$e,
11686
11689
  theme
11687
11690
  }), {
@@ -11697,7 +11700,7 @@ const Slides = forwardRef((props, ref) => {
11697
11700
  "aria-live": isAutoPlaying ? 'off' : 'polite',
11698
11701
  children: /*#__PURE__*/jsx("div", {
11699
11702
  ref: wrapperRef,
11700
- className: `${CLASSNAME$e}__wrapper ${CLASSNAME$e}__wrapper--mode-${mode}`,
11703
+ className: `${CLASSNAME$e}__wrapper`,
11701
11704
  style: wrapperStyle,
11702
11705
  children: groups.map((group, index) => /*#__PURE__*/jsx(SlideshowItemGroup, {
11703
11706
  id: slidesId && buildSlideShowGroupId(slidesId, index),
@@ -11743,7 +11746,7 @@ const Switch = forwardRef((props, ref) => {
11743
11746
  disabledStateProps,
11744
11747
  otherProps
11745
11748
  } = useDisableStateProps(props);
11746
- const defaultTheme = useTheme() || Theme.light;
11749
+ const defaultTheme = useTheme() || Theme$1.light;
11747
11750
  const {
11748
11751
  checked,
11749
11752
  children,
@@ -11769,7 +11772,7 @@ const Switch = forwardRef((props, ref) => {
11769
11772
  return /*#__PURE__*/jsxs("div", {
11770
11773
  ref: ref,
11771
11774
  ...forwardedProps,
11772
- className: classNames$1.join(className, handleBasicClasses({
11775
+ className: classNames.join(className, handleBasicClasses({
11773
11776
  prefix: CLASSNAME$d,
11774
11777
  isChecked,
11775
11778
  isDisabled: isAnyDisabled,
@@ -11844,7 +11847,7 @@ const DEFAULT_PROPS$f = {};
11844
11847
  * @return React element.
11845
11848
  */
11846
11849
  const Table = forwardRef((props, ref) => {
11847
- const defaultTheme = useTheme() || Theme.light;
11850
+ const defaultTheme = useTheme() || Theme$1.light;
11848
11851
  const {
11849
11852
  children,
11850
11853
  className,
@@ -11856,7 +11859,7 @@ const Table = forwardRef((props, ref) => {
11856
11859
  return /*#__PURE__*/jsx("table", {
11857
11860
  ref: ref,
11858
11861
  ...forwardedProps,
11859
- className: classNames$1.join(className, handleBasicClasses({
11862
+ className: classNames.join(className, handleBasicClasses({
11860
11863
  prefix: CLASSNAME$c,
11861
11864
  hasBefore,
11862
11865
  hasDividers,
@@ -11895,7 +11898,7 @@ const TableBody = forwardRef((props, ref) => {
11895
11898
  return /*#__PURE__*/jsx("tbody", {
11896
11899
  ref: ref,
11897
11900
  ...forwardedProps,
11898
- className: classNames$1.join(className, CLASSNAME$b),
11901
+ className: classNames.join(className, CLASSNAME$b),
11899
11902
  children: children
11900
11903
  });
11901
11904
  });
@@ -11972,7 +11975,7 @@ const TableCell = forwardRef((props, ref) => {
11972
11975
  children: [variant === TableCellVariant.head && /*#__PURE__*/jsx("th", {
11973
11976
  ref: ref,
11974
11977
  ...forwardedProps,
11975
- className: classNames$1.join(handleBasicClasses({
11978
+ className: classNames.join(handleBasicClasses({
11976
11979
  prefix: CLASSNAME$a,
11977
11980
  isSortable,
11978
11981
  isSorted: isSortable && !!sortOrder
@@ -11984,15 +11987,15 @@ const TableCell = forwardRef((props, ref) => {
11984
11987
  children: [icon && !isSortable && /*#__PURE__*/jsx(Icon, {
11985
11988
  className: `${CLASSNAME$a}-icon`,
11986
11989
  icon: icon,
11987
- size: Size.xxs
11990
+ size: Size$1.xxs
11988
11991
  }), isSortable && sortOrder === ThOrder.asc && /*#__PURE__*/jsx(Icon, {
11989
11992
  className: `${CLASSNAME$a}-icon`,
11990
11993
  icon: mdiArrowUp,
11991
- size: Size.xxs
11994
+ size: Size$1.xxs
11992
11995
  }), isSortable && sortOrder === ThOrder.desc && /*#__PURE__*/jsx(Icon, {
11993
11996
  className: `${CLASSNAME$a}-icon`,
11994
11997
  icon: mdiArrowDown,
11995
- size: Size.xxs
11998
+ size: Size$1.xxs
11996
11999
  }), /*#__PURE__*/jsx("div", {
11997
12000
  className: `${CLASSNAME$a}-content`,
11998
12001
  children: children
@@ -12000,7 +12003,7 @@ const TableCell = forwardRef((props, ref) => {
12000
12003
  })
12001
12004
  }), variant === TableCellVariant.body && /*#__PURE__*/jsx("td", {
12002
12005
  ...forwardedProps,
12003
- className: classNames$1.join(className, CLASSNAME$a, `${CLASSNAME$a}--body`),
12006
+ className: classNames.join(className, CLASSNAME$a, `${CLASSNAME$a}--body`),
12004
12007
  children: /*#__PURE__*/jsx("div", {
12005
12008
  className: `${CLASSNAME$a}-content`,
12006
12009
  children: children
@@ -12043,7 +12046,7 @@ const TableHeader = forwardRef((props, ref) => {
12043
12046
  return /*#__PURE__*/jsx("thead", {
12044
12047
  ref: ref,
12045
12048
  ...forwardedProps,
12046
- className: classNames$1.join(className, CLASSNAME$9),
12049
+ className: classNames.join(className, CLASSNAME$9),
12047
12050
  children: children
12048
12051
  });
12049
12052
  });
@@ -12090,7 +12093,7 @@ const TableRow = forwardRef((props, ref) => {
12090
12093
  ref: ref,
12091
12094
  tabIndex: isClickable && !disabledStateProps.disabled ? 0 : -1,
12092
12095
  ...forwardedProps,
12093
- className: classNames$1.join(className, handleBasicClasses({
12096
+ className: classNames.join(className, handleBasicClasses({
12094
12097
  isClickable: isClickable && !isAnyDisabled,
12095
12098
  isDisabled: isAnyDisabled,
12096
12099
  isSelected: isSelected && !isAnyDisabled,
@@ -12200,7 +12203,7 @@ const DEFAULT_PROPS$a = {
12200
12203
  * @return React element.
12201
12204
  */
12202
12205
  const TabList = forwardRef((props, ref) => {
12203
- const defaultTheme = useTheme() || Theme.light;
12206
+ const defaultTheme = useTheme() || Theme$1.light;
12204
12207
  const {
12205
12208
  'aria-label': ariaLabel,
12206
12209
  children,
@@ -12220,7 +12223,7 @@ const TabList = forwardRef((props, ref) => {
12220
12223
  return /*#__PURE__*/jsx("div", {
12221
12224
  ref: mergeRefs(ref, tabListRef),
12222
12225
  ...forwardedProps,
12223
- className: classNames$1.join(className, handleBasicClasses({
12226
+ className: classNames.join(className, handleBasicClasses({
12224
12227
  prefix: TABS_CLASSNAME,
12225
12228
  layout,
12226
12229
  position,
@@ -12305,7 +12308,7 @@ const Tab = forwardRef((props, ref) => {
12305
12308
  ...forwardedProps,
12306
12309
  type: "button",
12307
12310
  id: state?.tabId,
12308
- className: classNames$1.join(className, handleBasicClasses({
12311
+ className: classNames.join(className, handleBasicClasses({
12309
12312
  prefix: CLASSNAME$7,
12310
12313
  isActive,
12311
12314
  isDisabled: isAnyDisabled
@@ -12320,7 +12323,7 @@ const Tab = forwardRef((props, ref) => {
12320
12323
  "aria-controls": state?.tabPanelId,
12321
12324
  children: [icon && /*#__PURE__*/jsx(Icon, {
12322
12325
  icon: icon,
12323
- size: Size.xs,
12326
+ size: Size$1.xs,
12324
12327
  ...iconProps
12325
12328
  }), label && /*#__PURE__*/jsx(Text, {
12326
12329
  as: "span",
@@ -12371,7 +12374,7 @@ const TabPanel = forwardRef((props, ref) => {
12371
12374
  ref: ref,
12372
12375
  ...forwardedProps,
12373
12376
  id: state?.tabPanelId,
12374
- className: classNames$1.join(className, handleBasicClasses({
12377
+ className: classNames.join(className, handleBasicClasses({
12375
12378
  prefix: CLASSNAME$6,
12376
12379
  isActive
12377
12380
  })),
@@ -12412,7 +12415,7 @@ const DEFAULT_PROPS$7 = {
12412
12415
  * (input element without any decoration)
12413
12416
  */
12414
12417
  const RawInputText = forwardRef((props, ref) => {
12415
- const defaultTheme = useTheme() || Theme.light;
12418
+ const defaultTheme = useTheme() || Theme$1.light;
12416
12419
  const {
12417
12420
  className,
12418
12421
  theme = defaultTheme,
@@ -12431,7 +12434,7 @@ const RawInputText = forwardRef((props, ref) => {
12431
12434
  name: name,
12432
12435
  type: type,
12433
12436
  ref: useMergeRefs(ref, textareaRef),
12434
- className: classNames$1.join(className, handleBasicClasses({
12437
+ className: classNames.join(className, handleBasicClasses({
12435
12438
  prefix: INPUT_NATIVE_CLASSNAME,
12436
12439
  theme
12437
12440
  }), `${INPUT_NATIVE_CLASSNAME}--text`),
@@ -12493,7 +12496,7 @@ const DEFAULT_PROPS$6 = {
12493
12496
  * (textarea element without any decoration)
12494
12497
  */
12495
12498
  const RawInputTextarea = forwardRef((props, ref) => {
12496
- const defaultTheme = useTheme() || Theme.light;
12499
+ const defaultTheme = useTheme() || Theme$1.light;
12497
12500
  const {
12498
12501
  className,
12499
12502
  theme = defaultTheme,
@@ -12511,7 +12514,7 @@ const RawInputTextarea = forwardRef((props, ref) => {
12511
12514
  return /*#__PURE__*/jsx("textarea", {
12512
12515
  ...forwardedProps,
12513
12516
  name: name,
12514
- className: classNames$1.join(className, handleBasicClasses({
12517
+ className: classNames.join(className, handleBasicClasses({
12515
12518
  prefix: INPUT_NATIVE_CLASSNAME,
12516
12519
  theme
12517
12520
  }), `${INPUT_NATIVE_CLASSNAME}--textarea`),
@@ -12542,7 +12545,7 @@ const TextField = forwardRef((props, ref) => {
12542
12545
  disabledStateProps,
12543
12546
  otherProps
12544
12547
  } = useDisableStateProps(props);
12545
- const defaultTheme = useTheme() || Theme.light;
12548
+ const defaultTheme = useTheme() || Theme$1.light;
12546
12549
  const {
12547
12550
  chips,
12548
12551
  className,
@@ -12648,7 +12651,7 @@ const TextField = forwardRef((props, ref) => {
12648
12651
  });
12649
12652
  return /*#__PURE__*/jsxs("div", {
12650
12653
  ref: ref,
12651
- className: classNames$1.join(className, handleBasicClasses({
12654
+ className: classNames.join(className, handleBasicClasses({
12652
12655
  hasChips: Boolean(chips),
12653
12656
  hasError: !isValid && hasError,
12654
12657
  hasIcon: Boolean(icon),
@@ -12679,7 +12682,7 @@ const TextField = forwardRef((props, ref) => {
12679
12682
  children: maxLength - valueLength
12680
12683
  }), maxLength - valueLength === 0 && /*#__PURE__*/jsx(Icon, {
12681
12684
  icon: mdiAlertCircle,
12682
- size: Size.xxs
12685
+ size: Size$1.xxs
12683
12686
  })]
12684
12687
  })]
12685
12688
  }), /*#__PURE__*/jsxs("div", {
@@ -12687,9 +12690,9 @@ const TextField = forwardRef((props, ref) => {
12687
12690
  ref: textFieldRef,
12688
12691
  children: [icon && /*#__PURE__*/jsx(Icon, {
12689
12692
  className: `${CLASSNAME$5}__input-icon`,
12690
- color: theme === Theme.dark ? 'light' : undefined,
12693
+ color: theme === Theme$1.dark ? 'light' : undefined,
12691
12694
  icon: icon,
12692
- size: Size.xs
12695
+ size: Size$1.xs
12693
12696
  }), chips ? /*#__PURE__*/jsxs("div", {
12694
12697
  className: `${CLASSNAME$5}__chips`,
12695
12698
  children: [chips, input]
@@ -12698,15 +12701,15 @@ const TextField = forwardRef((props, ref) => {
12698
12701
  children: input
12699
12702
  }), (isValid || hasError) && /*#__PURE__*/jsx(Icon, {
12700
12703
  className: `${CLASSNAME$5}__input-validity`,
12701
- color: theme === Theme.dark ? 'light' : undefined,
12704
+ color: theme === Theme$1.dark ? 'light' : undefined,
12702
12705
  icon: isValid ? mdiCheckCircle : mdiAlertCircle,
12703
- size: Size.xxs
12706
+ size: Size$1.xxs
12704
12707
  }), clearButtonProps && isNotEmpty && !isAnyDisabled && /*#__PURE__*/jsx(IconButton, {
12705
12708
  ...clearButtonProps,
12706
12709
  className: `${CLASSNAME$5}__input-clear`,
12707
12710
  icon: mdiCloseCircle,
12708
12711
  emphasis: Emphasis.low,
12709
- size: Size.s,
12712
+ size: Size$1.s,
12710
12713
  theme: theme,
12711
12714
  onClick: handleClear,
12712
12715
  type: "button"
@@ -12716,7 +12719,7 @@ const TextField = forwardRef((props, ref) => {
12716
12719
  })]
12717
12720
  }), hasError && error && /*#__PURE__*/jsx(InputHelper, {
12718
12721
  className: `${CLASSNAME$5}__helper`,
12719
- kind: Kind.error,
12722
+ kind: Kind$1.error,
12720
12723
  theme: theme,
12721
12724
  id: errorId,
12722
12725
  children: error
@@ -12900,7 +12903,7 @@ const Thumbnail = forwardRef((props, ref) => {
12900
12903
  otherProps,
12901
12904
  disabledStateProps
12902
12905
  } = useDisableStateProps(props);
12903
- const defaultTheme = useTheme() || Theme.light;
12906
+ const defaultTheme = useTheme() || Theme$1.light;
12904
12907
  const {
12905
12908
  align,
12906
12909
  alt,
@@ -12974,7 +12977,7 @@ const Thumbnail = forwardRef((props, ref) => {
12974
12977
  return /*#__PURE__*/jsxs(Wrapper, {
12975
12978
  ...wrapperProps,
12976
12979
  ref: ref,
12977
- className: classNames$1.join(linkProps?.className, className, handleBasicClasses({
12980
+ className: classNames.join(linkProps?.className, className, handleBasicClasses({
12978
12981
  align,
12979
12982
  aspectRatio,
12980
12983
  prefix: CLASSNAME$4,
@@ -13005,7 +13008,7 @@ const Thumbnail = forwardRef((props, ref) => {
13005
13008
  ...loadingStyle
13006
13009
  },
13007
13010
  ref: useMergeRefs(setImgElement, propImgRef),
13008
- className: classNames$1.join(handleBasicClasses({
13011
+ className: classNames.join(handleBasicClasses({
13009
13012
  prefix: `${CLASSNAME$4}__image`,
13010
13013
  isLoading,
13011
13014
  hasDefinedSize: Boolean(imgProps?.height && imgProps.width)
@@ -13018,12 +13021,12 @@ const Thumbnail = forwardRef((props, ref) => {
13018
13021
  className: `${CLASSNAME$4}__fallback`,
13019
13022
  children: hasIconErrorFallback ? /*#__PURE__*/jsx(Icon, {
13020
13023
  icon: fallback,
13021
- size: Size.xxs,
13024
+ size: Size$1.xxs,
13022
13025
  theme: theme
13023
13026
  }) : fallback
13024
13027
  })]
13025
13028
  }), badge && /*#__PURE__*/React__default.cloneElement(badge, {
13026
- className: classNames$1.join(`${CLASSNAME$4}__badge`, badge.props.className)
13029
+ className: classNames.join(`${CLASSNAME$4}__badge`, badge.props.className)
13027
13030
  })]
13028
13031
  });
13029
13032
  });
@@ -13101,7 +13104,7 @@ const Toolbar = forwardRef((props, ref) => {
13101
13104
  return /*#__PURE__*/jsxs("div", {
13102
13105
  ref: ref,
13103
13106
  ...forwardedProps,
13104
- className: classNames$1.join(className, handleBasicClasses({
13107
+ className: classNames.join(className, handleBasicClasses({
13105
13108
  hasAfter: Boolean(after),
13106
13109
  hasBefore: Boolean(before),
13107
13110
  hasLabel: Boolean(label),
@@ -13409,11 +13412,11 @@ const Tooltip = forwardRef((props, ref) => {
13409
13412
  ...forwardedProps,
13410
13413
  id: id,
13411
13414
  role: "tooltip",
13412
- className: classNames$1.join(className, handleBasicClasses({
13415
+ className: classNames.join(className, handleBasicClasses({
13413
13416
  prefix: CLASSNAME$2,
13414
13417
  position,
13415
13418
  isInitializing: !styles.popper?.transform
13416
- }), isHidden && classNames$1.visuallyHidden()),
13419
+ }), isHidden && classNames.visuallyHidden()),
13417
13420
  style: {
13418
13421
  ...(isHidden ? undefined : styles.popper),
13419
13422
  zIndex
@@ -13468,7 +13471,7 @@ const CLASSNAME$1 = 'lumx-uploader';
13468
13471
  */
13469
13472
  const DEFAULT_PROPS$1 = {
13470
13473
  aspectRatio: AspectRatio.horizontal,
13471
- size: Size.xl,
13474
+ size: Size$1.xl,
13472
13475
  variant: UploaderVariant.square
13473
13476
  };
13474
13477
 
@@ -13485,7 +13488,7 @@ const Uploader = forwardRef((props, ref) => {
13485
13488
  otherProps,
13486
13489
  isAnyDisabled
13487
13490
  } = useDisableStateProps(props);
13488
- const defaultTheme = useTheme() || Theme.light;
13491
+ const defaultTheme = useTheme() || Theme$1.light;
13489
13492
  const {
13490
13493
  aspectRatio = DEFAULT_PROPS$1.aspectRatio,
13491
13494
  className,
@@ -13535,7 +13538,7 @@ const Uploader = forwardRef((props, ref) => {
13535
13538
  ...wrapper.props,
13536
13539
  ...forwardedProps,
13537
13540
  onClick: handleClick,
13538
- className: classNames$1.join(className, handleBasicClasses({
13541
+ className: classNames.join(className, handleBasicClasses({
13539
13542
  aspectRatio: adjustedAspectRatio,
13540
13543
  prefix: CLASSNAME$1,
13541
13544
  size,
@@ -13551,7 +13554,7 @@ const Uploader = forwardRef((props, ref) => {
13551
13554
  children: [icon && /*#__PURE__*/jsx(Icon, {
13552
13555
  className: `${CLASSNAME$1}__icon`,
13553
13556
  icon: icon,
13554
- size: Size.s
13557
+ size: Size$1.s
13555
13558
  }), label && /*#__PURE__*/jsx("span", {
13556
13559
  className: `${CLASSNAME$1}__label`,
13557
13560
  children: label
@@ -13559,7 +13562,7 @@ const Uploader = forwardRef((props, ref) => {
13559
13562
  }), fileInputProps && /*#__PURE__*/jsx("input", {
13560
13563
  type: "file",
13561
13564
  id: inputId,
13562
- className: `${CLASSNAME$1}__input ${classNames$1.visuallyHidden()}`,
13565
+ className: `${CLASSNAME$1}__input ${classNames.visuallyHidden()}`,
13563
13566
  ...disabledStateProps,
13564
13567
  ...fileInputProps,
13565
13568
  readOnly: isAnyDisabled,
@@ -13589,7 +13592,7 @@ const CLASSNAME = 'lumx-user-block';
13589
13592
  */
13590
13593
  const DEFAULT_PROPS = {
13591
13594
  orientation: Orientation.horizontal,
13592
- size: Size.m
13595
+ size: Size$1.m
13593
13596
  };
13594
13597
 
13595
13598
  /**
@@ -13600,7 +13603,7 @@ const DEFAULT_PROPS = {
13600
13603
  * @return React element.
13601
13604
  */
13602
13605
  const UserBlock = forwardRef((props, ref) => {
13603
- const defaultTheme = useTheme() || Theme.light;
13606
+ const defaultTheme = useTheme() || Theme$1.light;
13604
13607
  const {
13605
13608
  avatarProps,
13606
13609
  className,
@@ -13626,7 +13629,7 @@ const UserBlock = forwardRef((props, ref) => {
13626
13629
 
13627
13630
  // Special case - When using vertical orientation force the size to be Sizes.l.
13628
13631
  if (orientation === Orientation.vertical) {
13629
- componentSize = Size.l;
13632
+ componentSize = Size$1.l;
13630
13633
  }
13631
13634
  const shouldDisplayActions = orientation === Orientation.vertical;
13632
13635
  const isLink = Boolean(linkProps?.href || linkAs);
@@ -13638,7 +13641,7 @@ const UserBlock = forwardRef((props, ref) => {
13638
13641
  let NameComponent = 'span';
13639
13642
  const nProps = {
13640
13643
  ...nameProps,
13641
- className: classNames$1.join(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className)
13644
+ className: classNames.join(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className)
13642
13645
  };
13643
13646
  if (isClickable) {
13644
13647
  NameComponent = Link;
@@ -13646,7 +13649,7 @@ const UserBlock = forwardRef((props, ref) => {
13646
13649
  ...linkProps,
13647
13650
  onClick,
13648
13651
  linkAs,
13649
- color: ColorPalette.dark
13652
+ color: ColorPalette$1.dark
13650
13653
  });
13651
13654
  }
13652
13655
  // Disable avatar focus since the name block is the same link / same button.
@@ -13658,7 +13661,7 @@ const UserBlock = forwardRef((props, ref) => {
13658
13661
  children: name
13659
13662
  });
13660
13663
  }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
13661
- const shouldDisplayFields = componentSize !== Size.s && componentSize !== Size.xs;
13664
+ const shouldDisplayFields = componentSize !== Size$1.s && componentSize !== Size$1.xs;
13662
13665
  const fieldsBlock = fields && shouldDisplayFields && /*#__PURE__*/jsx("div", {
13663
13666
  className: `${CLASSNAME}__fields`,
13664
13667
  children: fields.map((field, idx) => /*#__PURE__*/jsx("span", {
@@ -13669,7 +13672,7 @@ const UserBlock = forwardRef((props, ref) => {
13669
13672
  return /*#__PURE__*/jsxs("div", {
13670
13673
  ref: ref,
13671
13674
  ...forwardedProps,
13672
- className: classNames$1.join(className, handleBasicClasses({
13675
+ className: classNames.join(className, handleBasicClasses({
13673
13676
  prefix: CLASSNAME,
13674
13677
  orientation,
13675
13678
  size: componentSize,
@@ -13683,7 +13686,7 @@ const UserBlock = forwardRef((props, ref) => {
13683
13686
  linkProps: linkProps,
13684
13687
  alt: "",
13685
13688
  ...avatarProps,
13686
- className: classNames$1.join(`${CLASSNAME}__avatar`, avatarProps.className),
13689
+ className: classNames.join(`${CLASSNAME}__avatar`, avatarProps.className),
13687
13690
  size: componentSize,
13688
13691
  onClick: onClick,
13689
13692
  theme: theme