@itcase/ui 1.9.32 → 1.9.35

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 (30) hide show
  1. package/dist/{SelectContainer_cjs_CD-J8jSe.js → SelectContainer_cjs_B2fgWgCE.js} +45 -17
  2. package/dist/{SelectContainer_es_Bxt5C3nI.js → SelectContainer_es_B5trQDlc.js} +45 -17
  3. package/dist/cjs/components/DatePeriod.js +1 -1
  4. package/dist/cjs/components/Select.js +1 -1
  5. package/dist/cjs/components/Tab.js +1 -1
  6. package/dist/components/DatePeriod.js +1 -1
  7. package/dist/components/Select.js +1 -1
  8. package/dist/components/Tab.js +1 -1
  9. package/dist/css/styles/bundles.css +87 -26
  10. package/dist/types/components/Avatar/Avatar.appearance.d.ts +1120 -0
  11. package/dist/types/components/Badge/Badge.appearance.d.ts +680 -0
  12. package/dist/types/components/Button/Button.appearance.d.ts +2000 -0
  13. package/dist/types/components/Divider/Divider.appearance.d.ts +560 -0
  14. package/dist/types/components/Label/Label.appearance.d.ts +1560 -0
  15. package/dist/types/components/Loader/Loader.appearance.d.ts +320 -0
  16. package/dist/types/components/MenuItem/MenuItem.appearance.d.ts +1680 -0
  17. package/dist/types/components/Modal/Modal.appearance.d.ts +1160 -0
  18. package/dist/types/components/Select/Select.interface.d.ts +1 -1
  19. package/dist/types/components/Select/SelectMultiValue.d.ts +4 -0
  20. package/dist/types/components/Select/SelectOverflowBadge.d.ts +7 -0
  21. package/dist/types/components/Select/appearance/selectDefault.d.ts +2 -2
  22. package/dist/types/components/Select/appearance/selectError.d.ts +2 -2
  23. package/dist/types/components/Select/appearance/selectRequire.d.ts +2 -2
  24. package/dist/types/components/Select/appearance/selectSize.d.ts +6 -0
  25. package/dist/types/components/Select/appearance/selectSuccess.d.ts +2 -2
  26. package/dist/types/components/Text/Text.appearance.d.ts +520 -0
  27. package/dist/types/components/Tile/Tile.appearance.d.ts +40 -0
  28. package/dist/types/components/Title/Title.appearance.d.ts +1600 -0
  29. package/dist/types/components/Warning/Warning.appearance.d.ts +880 -0
  30. package/package.json +10 -10
@@ -33,12 +33,10 @@ const selectAppearanceDefault = {
33
33
  defaultPrimary: {
34
34
  fill: 'surfaceSecondary',
35
35
  fillHover: 'surfaceTertiary',
36
- optionFillDisabled: 'surfaceSecondary',
37
- optionTextColorDisabled: 'surfaceTextQuaternary',
38
36
  borderColor: 'surfaceBorderTertiary',
39
37
  borderColorHover: 'surfaceBorderQuaternary',
40
38
  elevation: 8,
41
- badgeAppearance: 'accent',
39
+ badgeAppearance: 'accentPrimary solid circular',
42
40
  clearIconFill: 'surfaceItemQuaternary',
43
41
  dropdownIconFill: 'surfaceItemQuaternary',
44
42
  groupFill: 'surfaceSecondary',
@@ -59,10 +57,12 @@ const selectAppearanceDefault = {
59
57
  optionFill: 'surfacePrimary',
60
58
  optionFillActive: 'accentPrimary',
61
59
  optionFillActiveHover: 'accentSecondary',
60
+ optionFillDisabled: 'surfaceSecondary',
62
61
  optionFillHover: 'surfaceSecondary',
63
62
  optionSelectedIconFillIcon: 'successItemPrimary',
64
63
  optionTextColor: 'surfaceTextPrimary',
65
64
  optionTextColorActive: 'accentTextPrimary',
65
+ optionTextColorDisabled: 'surfaceTextQuaternary',
66
66
  placeholderTextColor: 'surfaceTextQuaternary',
67
67
  requiredInputBorderColor: 'warningBorderPrimary',
68
68
  },
@@ -71,7 +71,7 @@ const selectAppearanceDefault = {
71
71
  const selectAppearanceDisabled = {
72
72
  disabledPrimary: {
73
73
  elevation: 8,
74
- badgeAppearance: 'accent',
74
+ badgeAppearance: 'accentPrimary solid circular',
75
75
  clearIconFill: 'surfaceItemDisabled',
76
76
  dropdownIconFill: 'surfaceItemDisabled',
77
77
  headingFill: 'surfaceSecondary',
@@ -102,12 +102,10 @@ const selectAppearanceError = {
102
102
  errorPrimary: {
103
103
  fill: 'errorTertiary',
104
104
  fillHover: 'errorTertiary',
105
- optionFillDisabled: 'surfaceSecondary',
106
- optionTextColorDisabled: 'surfaceTextQuaternary',
107
105
  borderColor: 'surfaceBorderTertiary',
108
106
  borderColorHover: 'surfaceBorderQuaternary',
109
107
  elevation: 8,
110
- badgeAppearance: 'accent',
108
+ badgeAppearance: 'accentPrimary solid circular',
111
109
  clearIconFill: 'surfaceItemQuaternary',
112
110
  dropdownIconFill: 'surfaceItemQuaternary',
113
111
  groupFill: 'surfaceSecondary',
@@ -128,10 +126,12 @@ const selectAppearanceError = {
128
126
  optionFill: 'surfacePrimary',
129
127
  optionFillActive: 'accentPrimary',
130
128
  optionFillActiveHover: 'accentSecondary',
129
+ optionFillDisabled: 'surfaceSecondary',
131
130
  optionFillHover: 'surfaceSecondary',
132
131
  optionSelectedIconFillIcon: 'successItemPrimary',
133
132
  optionTextColor: 'surfaceTextPrimary',
134
133
  optionTextColorActive: 'accentTextPrimary',
134
+ optionTextColorDisabled: 'surfaceTextQuaternary',
135
135
  placeholderTextColor: 'surfaceTextQuaternary',
136
136
  requiredInputBorderColor: 'warningBorderPrimary',
137
137
  },
@@ -141,12 +141,10 @@ const selectAppearanceRequire = {
141
141
  requirePrimary: {
142
142
  fill: 'warningTertiary',
143
143
  fillHover: 'warningTertiary',
144
- optionFillDisabled: 'surfaceSecondary',
145
- optionTextColorDisabled: 'surfaceTextQuaternary',
146
144
  borderColor: 'surfaceBorderTertiary',
147
145
  borderColorHover: 'surfaceBorderQuaternary',
148
146
  elevation: 8,
149
- badgeAppearance: 'accent',
147
+ badgeAppearance: 'accentPrimary solid circular',
150
148
  clearIconFill: 'surfaceItemQuaternary',
151
149
  dropdownIconFill: 'surfaceItemQuaternary',
152
150
  groupFill: 'surfaceSecondary',
@@ -167,10 +165,12 @@ const selectAppearanceRequire = {
167
165
  optionFill: 'surfacePrimary',
168
166
  optionFillActive: 'accentPrimary',
169
167
  optionFillActiveHover: 'accentSecondary',
168
+ optionFillDisabled: 'surfaceSecondary',
170
169
  optionFillHover: 'surfaceSecondary',
171
170
  optionSelectedIconFillIcon: 'successItemPrimary',
172
171
  optionTextColor: 'surfaceTextPrimary',
173
172
  optionTextColorActive: 'accentTextPrimary',
173
+ optionTextColorDisabled: 'surfaceTextQuaternary',
174
174
  placeholderTextColor: 'surfaceTextQuaternary',
175
175
  requiredInputBorderColor: 'warningBorderPrimary',
176
176
  },
@@ -207,6 +207,7 @@ const selectAppearanceSize = {
207
207
  sizeXL: {
208
208
  size: 'xl',
209
209
  textLoadingMessageAppearance: 'sizeM',
210
+ badgeAppearanceSize: 'sizeM',
210
211
  badgeSize: 'm',
211
212
  badgeTextSize: 'm',
212
213
  clearIcon: _default.icons24.Action.Clear,
@@ -226,6 +227,7 @@ const selectAppearanceSize = {
226
227
  sizeL: {
227
228
  size: 'l',
228
229
  textLoadingMessageAppearance: 'sizeM',
230
+ badgeAppearanceSize: 'sizeM',
229
231
  badgeSize: 'm',
230
232
  badgeTextSize: 'm',
231
233
  clearIcon: _default.icons24.Action.Clear,
@@ -245,6 +247,7 @@ const selectAppearanceSize = {
245
247
  sizeM: {
246
248
  size: 'm',
247
249
  textLoadingMessageAppearance: 'sizeM',
250
+ badgeAppearanceSize: 'sizeM',
248
251
  badgeSize: 'm',
249
252
  badgeTextSize: 'm',
250
253
  clearIcon: _default.icons24.Action.Clear,
@@ -264,6 +267,7 @@ const selectAppearanceSize = {
264
267
  sizeS: {
265
268
  size: 's',
266
269
  textLoadingMessageAppearance: 'sizeS',
270
+ badgeAppearanceSize: 'sizeM',
267
271
  badgeSize: 'm',
268
272
  badgeTextSize: 'm',
269
273
  clearIcon: _default.icons24.Action.Clear,
@@ -283,6 +287,7 @@ const selectAppearanceSize = {
283
287
  sizeXS: {
284
288
  size: 'xs',
285
289
  textLoadingMessageAppearance: 'sizeXS',
290
+ badgeAppearanceSize: 'sizeM',
286
291
  badgeSize: 'm',
287
292
  badgeTextSize: 'm',
288
293
  clearIcon: _default.icons16.Action.Clear,
@@ -302,6 +307,7 @@ const selectAppearanceSize = {
302
307
  sizeXXS: {
303
308
  size: 'xxs',
304
309
  textLoadingMessageAppearance: 'sizeXS',
310
+ badgeAppearanceSize: 'sizeM',
305
311
  badgeSize: 'm',
306
312
  badgeTextSize: 'm',
307
313
  clearIcon: _default.icons16.Action.Clear,
@@ -341,12 +347,10 @@ const selectAppearanceSuccess = {
341
347
  successPrimary: {
342
348
  fill: 'successTertiary',
343
349
  fillHover: 'successTertiary',
344
- optionFillDisabled: 'surfaceSecondary',
345
- optionTextColorDisabled: 'surfaceTextQuaternary',
346
350
  borderColor: 'surfaceBorderTertiary',
347
351
  borderColorHover: 'surfaceBorderQuaternary',
348
352
  elevation: 8,
349
- badgeAppearance: 'accent',
353
+ badgeAppearance: 'accentPrimary solid circular',
350
354
  clearIconFill: 'surfaceItemQuaternary',
351
355
  dropdownIconFill: 'surfaceItemQuaternary',
352
356
  groupFill: 'surfaceSecondary',
@@ -367,10 +371,12 @@ const selectAppearanceSuccess = {
367
371
  optionFill: 'surfacePrimary',
368
372
  optionFillActive: 'accentPrimary',
369
373
  optionFillActiveHover: 'accentSecondary',
374
+ optionFillDisabled: 'surfaceSecondary',
370
375
  optionFillHover: 'surfaceSecondary',
371
376
  optionSelectedIconFillIcon: 'successItemPrimary',
372
377
  optionTextColor: 'surfaceTextPrimary',
373
378
  optionTextColorActive: 'accentTextPrimary',
379
+ optionTextColorDisabled: 'surfaceTextQuaternary',
374
380
  placeholderTextColor: 'surfaceTextQuaternary',
375
381
  requiredInputBorderColor: 'warningBorderPrimary',
376
382
  },
@@ -430,6 +436,27 @@ const SelectMenu = (props) => {
430
436
  return (jsxRuntime.jsxs(Select.components.Menu, { ...props, className: clsx(menuFill && `fill_${menuFill}`, menuShape && `shape_${menuShape}`, menuShapeStrength && `shape-strength_${menuShapeStrength}`, elevation && `elevation_${elevation}`), children: [menuBefore, props.selectProps.fetchingData ? (jsxRuntime.jsx("span", { className: "fetching", children: "Fetching data..." })) : (jsxRuntime.jsx(React.Fragment, { children: props.children })), menuAfter] }));
431
437
  };
432
438
 
439
+ const SelectOverflowBadge = (props) => {
440
+ const { badgeAppearance, badgeAppearanceSize, overflowItemsList } = props;
441
+ const label = `+${overflowItemsList.length}`;
442
+ return (jsxRuntime.jsx(Icon.Badge, { appearance: `${badgeAppearance} ${badgeAppearanceSize}`, className: "select__multi-value-badge", value: label }));
443
+ };
444
+
445
+ const SelectMultiValue = (props) => {
446
+ const { index, getValue, ...restProps } = props;
447
+ const multiValueMaxCount = restProps.selectProps.multiValueMaxCount || 100;
448
+ const overflowItemsList = getValue()
449
+ .slice(multiValueMaxCount)
450
+ .map((x) => x.label);
451
+ if (index < multiValueMaxCount) {
452
+ return jsxRuntime.jsx(Select.components.MultiValue, { ...restProps });
453
+ }
454
+ if (index === multiValueMaxCount) {
455
+ return (jsxRuntime.jsx(SelectOverflowBadge, { badgeAppearance: restProps.selectProps.badgeAppearance, badgeAppearanceSize: restProps.selectProps.badgeAppearanceSize, overflowItemsList: overflowItemsList }));
456
+ }
457
+ return null;
458
+ };
459
+
433
460
  const SelectMultiValueContainer = (props) => {
434
461
  const { multipleItemFill, multipleItemFillHover, multipleItemShapeRadius } = props.selectProps;
435
462
  return (jsxRuntime.jsx(Select.components.MultiValueContainer, { ...props, children: jsxRuntime.jsx(Group.Group, { className: clsx('select__multi-value-item'), direction: "horizontal", alignItems: "center", fill: multipleItemFill, fillHover: multipleItemFillHover, borderRadius: multipleItemShapeRadius, gap: "0.5m", children: props.children }) }));
@@ -495,7 +522,7 @@ const selectConfig = {
495
522
  },
496
523
  };
497
524
  const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
498
- const { appearance = '', className, dataTestId, dataTour, width, minWidth, initialValue, badgeAppearance, badgeSize, defaultValue, dividerDirection, filterOption, hideSelectedOptions, hideValueContainer, inputAfter, inputBefore, instanceId, loaderAppearance, loadingMessageText, menuAfter, menuBefore, menuIsOpen, menuItemSize, noOptionsSearchText, noOptionsText, optionAfter, optionBefore, options, placeholder, showBadge, showDivider, value, before, after, openMenuOnClick, closeMenuOnSelect, isDisabled, isClearable, isCreatable, isLoading, isMulti, isSearchable, set, onChange, onInputChange, } = props;
525
+ const { appearance = '', className, dataTestId, dataTour, width, minWidth, initialValue, badgeSize, defaultValue, dividerDirection, filterOption, hideSelectedOptions, hideValueContainer, inputAfter, inputBefore, instanceId, loadingMessageText, menuAfter, menuBefore, menuIsOpen, menuItemSize, multiValueMaxCount, noOptionsSearchText, noOptionsText, optionAfter, optionBefore, options, placeholder, showBadge, showDivider, value, before, after, openMenuOnClick, closeMenuOnSelect, isDisabled, isClearable, isCreatable, isLoading, isMulti, isSearchable, set, onChange, onInputChange, } = props;
499
526
  const defaultRef = React.useRef(null);
500
527
  const selectRef = ref || defaultRef;
501
528
  const SelectComponent = isCreatable
@@ -542,8 +569,8 @@ const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
542
569
  }), [minWidth, width]);
543
570
  const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, selectConfig, isDisabled);
544
571
  const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
545
- const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, elevation, badgeTextSize, clearIcon, clearIconFill, dividerFill, dividerSize, dropdownFillHover, dropdownIcon, dropdownIconFill, dropdownIconShape, groupFillClass, groupTextColorClass, groupTextSizeClass, groupTextWeightClass, inputCaretColorClass, inputTextColorClass, inputTextSizeClass, loadingMessageTextColor, loadingMessageTextSize, menuFillClass, multipleItemFill, multipleItemFillHover, multipleItemIcon, multipleItemIconFill, multipleItemShapeRadius, multipleItemTextColorClass, multipleItemTextSizeClass, noOptionsTextColorClass, noOptionsTextSizeClass, optionBorderClass, optionBorderTypeClass, optionFillActiveClass, optionFillActiveDisabledClass, optionFillActiveHoverClass, optionFillClass, optionFillDisabledClass, optionFillHoverClass, optionSelectedIcon, optionSelectedIconFillIcon, optionSelectedIconSize, optionSelectedIconSrc, optionTextColorActiveClass, optionTextColorClass, optionTextColorDisabled, optionTextSizeClass, placeholderTextColor, placeholderTextSize, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
546
- return (jsxRuntime.jsx(SelectComponent, { className: clsx(className, 'select', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, sizeClass && `select_size_${sizeClass}`, hideValueContainer && 'select_state_hide-value-container', set && `select_set_${set}`, widthClass && `select_width_${widthClass}`), ref: selectRef, elevation: elevation, badgeAppearance: badgeAppearance, badgeSize: badgeSize, badgeTextSize: badgeTextSize, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, components: {
572
+ const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, elevation, badgeAppearance, badgeAppearanceSize, badgeTextSize, clearIcon, clearIconFill, dividerFill, dividerSize, dropdownFillHover, dropdownIcon, dropdownIconFill, dropdownIconShape, groupFillClass, groupTextColorClass, groupTextSizeClass, groupTextWeightClass, inputCaretColorClass, inputTextColorClass, inputTextSizeClass, loaderAppearance, loadingMessageTextColor, loadingMessageTextSize, menuFillClass, multipleItemFill, multipleItemFillHover, multipleItemIcon, multipleItemIconFill, multipleItemShapeRadius, multipleItemTextColorClass, multipleItemTextSizeClass, noOptionsTextColorClass, noOptionsTextSizeClass, optionBorderClass, optionBorderTypeClass, optionFillActiveClass, optionFillActiveDisabledClass, optionFillActiveHoverClass, optionFillClass, optionFillDisabledClass, optionFillHoverClass, optionSelectedIcon, optionSelectedIconFillIcon, optionSelectedIconSize, optionSelectedIconSrc, optionTextColorActiveClass, optionTextColorClass, optionTextColorDisabled, optionTextSizeClass, placeholderTextColor, placeholderTextSize, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
573
+ return (jsxRuntime.jsx(SelectComponent, { className: clsx(className, 'select', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, sizeClass && `select_size_${sizeClass}`, hideValueContainer && 'select_state_hide-value-container', set && `select_set_${set}`, widthClass && `select_width_${widthClass}`), ref: selectRef, elevation: elevation, badgeAppearance: badgeAppearance, badgeAppearanceSize: badgeAppearanceSize, badgeSize: badgeSize, badgeTextSize: badgeTextSize, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, components: {
547
574
  IndicatorSeparator: () => null,
548
575
  ClearIndicator: SelectClearIndicator,
549
576
  Control: SelectControl,
@@ -554,6 +581,7 @@ const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
554
581
  LoadingIndicator: SelectLoadingIndicator,
555
582
  LoadingMessage: SelectLoadingMessage,
556
583
  Menu: SelectMenu,
584
+ MultiValue: SelectMultiValue,
557
585
  MultiValueContainer: SelectMultiValueContainer,
558
586
  MultiValueLabel: SelectMultiValueLabel,
559
587
  MultiValueRemove: SelectMultiValueRemove,
@@ -562,7 +590,7 @@ const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
562
590
  Placeholder: SelectPlaceholder,
563
591
  SingleValue: SelectSingleValue,
564
592
  ValueContainer: SelectValueContainer,
565
- }, "data-testid": dataTestId, "data-tour": dataTour, defaultValue: defaultValue || initialValue, dividerDirection: dividerDirection, dividerFill: dividerFill, dividerSize: dividerSize, dropdownFillHover: dropdownFillHover, dropdownIcon: dropdownIcon, dropdownIconFill: dropdownIconFill, dropdownIconShape: dropdownIconShape, filterOption: filterOption, groupFill: groupFillClass, groupTextColor: groupTextColorClass, groupTextSize: groupTextSizeClass, groupTextWeight: groupTextWeightClass, hideSelectedOptions: hideSelectedOptions ?? false, inputAfter: inputAfter, inputBefore: inputBefore, inputCaretColor: inputCaretColorClass, inputShape: shapeClass, inputShapeStrength: shapeStrengthClass, inputTextColor: inputTextColorClass, inputTextSize: inputTextSizeClass, instanceId: instanceId, loaderAppearance: loaderAppearance, loadingMessageText: loadingMessageText, loadingMessageTextColor: loadingMessageTextColor, loadingMessageTextSize: loadingMessageTextSize, menuAfter: menuAfter, menuBefore: menuBefore, menuFill: menuFillClass, menuIsOpen: menuIsOpen, menuItemSize: menuItemSize, menuShape: shapeClass, menuShapeStrength: shapeStrengthClass, multipleItemFill: multipleItemFill, multipleItemFillHover: multipleItemFillHover, multipleItemIcon: multipleItemIcon, multipleItemIconFill: multipleItemIconFill, multipleItemShapeRadius: multipleItemShapeRadius, multipleItemSize: sizeClass, multipleItemTextColor: multipleItemTextColorClass, multipleItemTextSize: multipleItemTextSizeClass, noOptionBorder: optionBorderClass && `border-color_${optionBorderClass}`, noOptionBorderType: optionBorderTypeClass && `border_type_${optionBorderTypeClass}`, noOptionsFill: optionFillClass && `fill_${optionFillClass}`, noOptionsSearchText: noOptionsSearchText, noOptionsText: noOptionsText, noOptionsTextColor: noOptionsTextColorClass, noOptionsTextSize: noOptionsTextSizeClass, optionAfter: optionAfter, optionBefore: optionBefore, optionBorder: optionBorderClass, optionBorderType: optionBorderTypeClass, optionFill: optionFillClass, optionFillActive: optionFillActiveClass, optionFillActiveDisabledClass: optionFillActiveDisabledClass, optionFillActiveHover: optionFillActiveHoverClass, optionFillDisabled: optionFillDisabledClass, optionFillHover: optionFillHoverClass, options: options, optionSelectedIcon: optionSelectedIcon, optionSelectedIconFillIcon: optionSelectedIconFillIcon, optionSelectedIconSize: optionSelectedIconSize, optionSelectedIconSrc: optionSelectedIconSrc, optionShape: shapeClass, optionShapeStrength: shapeStrengthClass, optionTextColor: optionTextColorClass, optionTextColorActive: optionTextColorActiveClass, optionTextColorDisabled: optionTextColorDisabled, optionTextSize: optionTextSizeClass, placeholder: placeholder, placeholderTextColor: placeholderTextColor, placeholderTextSize: placeholderTextSize, showBadge: showBadge, showDivider: showDivider, styles: clearStyle, value: value, before: before, after: after, openMenuOnClick: openMenuOnClick, closeMenuOnSelect: closeMenuOnSelect ?? true, isDisabled: isDisabled, isClearable: isClearable ?? false, isLoading: isLoading, isMulti: isMulti ?? false, isSearchable: isSearchable ?? false, set: set, onChange: onChange, onInputChange: onInputChange }));
593
+ }, "data-testid": dataTestId, "data-tour": dataTour, defaultValue: defaultValue || initialValue, dividerDirection: dividerDirection, dividerFill: dividerFill, dividerSize: dividerSize, dropdownFillHover: dropdownFillHover, dropdownIcon: dropdownIcon, dropdownIconFill: dropdownIconFill, dropdownIconShape: dropdownIconShape, filterOption: filterOption, groupFill: groupFillClass, groupTextColor: groupTextColorClass, groupTextSize: groupTextSizeClass, groupTextWeight: groupTextWeightClass, hideSelectedOptions: hideSelectedOptions ?? false, inputAfter: inputAfter, inputBefore: inputBefore, inputCaretColor: inputCaretColorClass, inputShape: shapeClass, inputShapeStrength: shapeStrengthClass, inputTextColor: inputTextColorClass, inputTextSize: inputTextSizeClass, instanceId: instanceId, loaderAppearance: loaderAppearance, loadingMessageText: loadingMessageText, loadingMessageTextColor: loadingMessageTextColor, loadingMessageTextSize: loadingMessageTextSize, menuAfter: menuAfter, menuBefore: menuBefore, menuFill: menuFillClass, menuIsOpen: menuIsOpen, menuItemSize: menuItemSize, menuShape: shapeClass, menuShapeStrength: shapeStrengthClass, multipleItemFill: multipleItemFill, multipleItemFillHover: multipleItemFillHover, multipleItemIcon: multipleItemIcon, multipleItemIconFill: multipleItemIconFill, multipleItemShapeRadius: multipleItemShapeRadius, multipleItemSize: sizeClass, multipleItemTextColor: multipleItemTextColorClass, multipleItemTextSize: multipleItemTextSizeClass, multiValueMaxCount: multiValueMaxCount, noOptionBorder: optionBorderClass && `border-color_${optionBorderClass}`, noOptionBorderType: optionBorderTypeClass && `border_type_${optionBorderTypeClass}`, noOptionsFill: optionFillClass && `fill_${optionFillClass}`, noOptionsSearchText: noOptionsSearchText, noOptionsText: noOptionsText, noOptionsTextColor: noOptionsTextColorClass, noOptionsTextSize: noOptionsTextSizeClass, optionAfter: optionAfter, optionBefore: optionBefore, optionBorder: optionBorderClass, optionBorderType: optionBorderTypeClass, optionFill: optionFillClass, optionFillActive: optionFillActiveClass, optionFillActiveDisabledClass: optionFillActiveDisabledClass, optionFillActiveHover: optionFillActiveHoverClass, optionFillDisabled: optionFillDisabledClass, optionFillHover: optionFillHoverClass, options: options, optionSelectedIcon: optionSelectedIcon, optionSelectedIconFillIcon: optionSelectedIconFillIcon, optionSelectedIconSize: optionSelectedIconSize, optionSelectedIconSrc: optionSelectedIconSrc, optionShape: shapeClass, optionShapeStrength: shapeStrengthClass, optionTextColor: optionTextColorClass, optionTextColorActive: optionTextColorActiveClass, optionTextColorDisabled: optionTextColorDisabled, optionTextSize: optionTextSizeClass, placeholder: placeholder, placeholderTextColor: placeholderTextColor, placeholderTextSize: placeholderTextSize, showBadge: showBadge, showDivider: showDivider, styles: clearStyle, value: value, before: before, after: after, openMenuOnClick: openMenuOnClick, closeMenuOnSelect: closeMenuOnSelect ?? true, isDisabled: isDisabled, isClearable: isClearable ?? false, isLoading: isLoading, isMulti: isMulti ?? false, isSearchable: isSearchable ?? false, set: set, onChange: onChange, onInputChange: onInputChange }));
566
594
  });
567
595
 
568
596
  exports.SelectClearIndicator = SelectClearIndicator;
@@ -31,12 +31,10 @@ const selectAppearanceDefault = {
31
31
  defaultPrimary: {
32
32
  fill: 'surfaceSecondary',
33
33
  fillHover: 'surfaceTertiary',
34
- optionFillDisabled: 'surfaceSecondary',
35
- optionTextColorDisabled: 'surfaceTextQuaternary',
36
34
  borderColor: 'surfaceBorderTertiary',
37
35
  borderColorHover: 'surfaceBorderQuaternary',
38
36
  elevation: 8,
39
- badgeAppearance: 'accent',
37
+ badgeAppearance: 'accentPrimary solid circular',
40
38
  clearIconFill: 'surfaceItemQuaternary',
41
39
  dropdownIconFill: 'surfaceItemQuaternary',
42
40
  groupFill: 'surfaceSecondary',
@@ -57,10 +55,12 @@ const selectAppearanceDefault = {
57
55
  optionFill: 'surfacePrimary',
58
56
  optionFillActive: 'accentPrimary',
59
57
  optionFillActiveHover: 'accentSecondary',
58
+ optionFillDisabled: 'surfaceSecondary',
60
59
  optionFillHover: 'surfaceSecondary',
61
60
  optionSelectedIconFillIcon: 'successItemPrimary',
62
61
  optionTextColor: 'surfaceTextPrimary',
63
62
  optionTextColorActive: 'accentTextPrimary',
63
+ optionTextColorDisabled: 'surfaceTextQuaternary',
64
64
  placeholderTextColor: 'surfaceTextQuaternary',
65
65
  requiredInputBorderColor: 'warningBorderPrimary',
66
66
  },
@@ -69,7 +69,7 @@ const selectAppearanceDefault = {
69
69
  const selectAppearanceDisabled = {
70
70
  disabledPrimary: {
71
71
  elevation: 8,
72
- badgeAppearance: 'accent',
72
+ badgeAppearance: 'accentPrimary solid circular',
73
73
  clearIconFill: 'surfaceItemDisabled',
74
74
  dropdownIconFill: 'surfaceItemDisabled',
75
75
  headingFill: 'surfaceSecondary',
@@ -100,12 +100,10 @@ const selectAppearanceError = {
100
100
  errorPrimary: {
101
101
  fill: 'errorTertiary',
102
102
  fillHover: 'errorTertiary',
103
- optionFillDisabled: 'surfaceSecondary',
104
- optionTextColorDisabled: 'surfaceTextQuaternary',
105
103
  borderColor: 'surfaceBorderTertiary',
106
104
  borderColorHover: 'surfaceBorderQuaternary',
107
105
  elevation: 8,
108
- badgeAppearance: 'accent',
106
+ badgeAppearance: 'accentPrimary solid circular',
109
107
  clearIconFill: 'surfaceItemQuaternary',
110
108
  dropdownIconFill: 'surfaceItemQuaternary',
111
109
  groupFill: 'surfaceSecondary',
@@ -126,10 +124,12 @@ const selectAppearanceError = {
126
124
  optionFill: 'surfacePrimary',
127
125
  optionFillActive: 'accentPrimary',
128
126
  optionFillActiveHover: 'accentSecondary',
127
+ optionFillDisabled: 'surfaceSecondary',
129
128
  optionFillHover: 'surfaceSecondary',
130
129
  optionSelectedIconFillIcon: 'successItemPrimary',
131
130
  optionTextColor: 'surfaceTextPrimary',
132
131
  optionTextColorActive: 'accentTextPrimary',
132
+ optionTextColorDisabled: 'surfaceTextQuaternary',
133
133
  placeholderTextColor: 'surfaceTextQuaternary',
134
134
  requiredInputBorderColor: 'warningBorderPrimary',
135
135
  },
@@ -139,12 +139,10 @@ const selectAppearanceRequire = {
139
139
  requirePrimary: {
140
140
  fill: 'warningTertiary',
141
141
  fillHover: 'warningTertiary',
142
- optionFillDisabled: 'surfaceSecondary',
143
- optionTextColorDisabled: 'surfaceTextQuaternary',
144
142
  borderColor: 'surfaceBorderTertiary',
145
143
  borderColorHover: 'surfaceBorderQuaternary',
146
144
  elevation: 8,
147
- badgeAppearance: 'accent',
145
+ badgeAppearance: 'accentPrimary solid circular',
148
146
  clearIconFill: 'surfaceItemQuaternary',
149
147
  dropdownIconFill: 'surfaceItemQuaternary',
150
148
  groupFill: 'surfaceSecondary',
@@ -165,10 +163,12 @@ const selectAppearanceRequire = {
165
163
  optionFill: 'surfacePrimary',
166
164
  optionFillActive: 'accentPrimary',
167
165
  optionFillActiveHover: 'accentSecondary',
166
+ optionFillDisabled: 'surfaceSecondary',
168
167
  optionFillHover: 'surfaceSecondary',
169
168
  optionSelectedIconFillIcon: 'successItemPrimary',
170
169
  optionTextColor: 'surfaceTextPrimary',
171
170
  optionTextColorActive: 'accentTextPrimary',
171
+ optionTextColorDisabled: 'surfaceTextQuaternary',
172
172
  placeholderTextColor: 'surfaceTextQuaternary',
173
173
  requiredInputBorderColor: 'warningBorderPrimary',
174
174
  },
@@ -205,6 +205,7 @@ const selectAppearanceSize = {
205
205
  sizeXL: {
206
206
  size: 'xl',
207
207
  textLoadingMessageAppearance: 'sizeM',
208
+ badgeAppearanceSize: 'sizeM',
208
209
  badgeSize: 'm',
209
210
  badgeTextSize: 'm',
210
211
  clearIcon: icons24.Action.Clear,
@@ -224,6 +225,7 @@ const selectAppearanceSize = {
224
225
  sizeL: {
225
226
  size: 'l',
226
227
  textLoadingMessageAppearance: 'sizeM',
228
+ badgeAppearanceSize: 'sizeM',
227
229
  badgeSize: 'm',
228
230
  badgeTextSize: 'm',
229
231
  clearIcon: icons24.Action.Clear,
@@ -243,6 +245,7 @@ const selectAppearanceSize = {
243
245
  sizeM: {
244
246
  size: 'm',
245
247
  textLoadingMessageAppearance: 'sizeM',
248
+ badgeAppearanceSize: 'sizeM',
246
249
  badgeSize: 'm',
247
250
  badgeTextSize: 'm',
248
251
  clearIcon: icons24.Action.Clear,
@@ -262,6 +265,7 @@ const selectAppearanceSize = {
262
265
  sizeS: {
263
266
  size: 's',
264
267
  textLoadingMessageAppearance: 'sizeS',
268
+ badgeAppearanceSize: 'sizeM',
265
269
  badgeSize: 'm',
266
270
  badgeTextSize: 'm',
267
271
  clearIcon: icons24.Action.Clear,
@@ -281,6 +285,7 @@ const selectAppearanceSize = {
281
285
  sizeXS: {
282
286
  size: 'xs',
283
287
  textLoadingMessageAppearance: 'sizeXS',
288
+ badgeAppearanceSize: 'sizeM',
284
289
  badgeSize: 'm',
285
290
  badgeTextSize: 'm',
286
291
  clearIcon: icons16.Action.Clear,
@@ -300,6 +305,7 @@ const selectAppearanceSize = {
300
305
  sizeXXS: {
301
306
  size: 'xxs',
302
307
  textLoadingMessageAppearance: 'sizeXS',
308
+ badgeAppearanceSize: 'sizeM',
303
309
  badgeSize: 'm',
304
310
  badgeTextSize: 'm',
305
311
  clearIcon: icons16.Action.Clear,
@@ -339,12 +345,10 @@ const selectAppearanceSuccess = {
339
345
  successPrimary: {
340
346
  fill: 'successTertiary',
341
347
  fillHover: 'successTertiary',
342
- optionFillDisabled: 'surfaceSecondary',
343
- optionTextColorDisabled: 'surfaceTextQuaternary',
344
348
  borderColor: 'surfaceBorderTertiary',
345
349
  borderColorHover: 'surfaceBorderQuaternary',
346
350
  elevation: 8,
347
- badgeAppearance: 'accent',
351
+ badgeAppearance: 'accentPrimary solid circular',
348
352
  clearIconFill: 'surfaceItemQuaternary',
349
353
  dropdownIconFill: 'surfaceItemQuaternary',
350
354
  groupFill: 'surfaceSecondary',
@@ -365,10 +369,12 @@ const selectAppearanceSuccess = {
365
369
  optionFill: 'surfacePrimary',
366
370
  optionFillActive: 'accentPrimary',
367
371
  optionFillActiveHover: 'accentSecondary',
372
+ optionFillDisabled: 'surfaceSecondary',
368
373
  optionFillHover: 'surfaceSecondary',
369
374
  optionSelectedIconFillIcon: 'successItemPrimary',
370
375
  optionTextColor: 'surfaceTextPrimary',
371
376
  optionTextColorActive: 'accentTextPrimary',
377
+ optionTextColorDisabled: 'surfaceTextQuaternary',
372
378
  placeholderTextColor: 'surfaceTextQuaternary',
373
379
  requiredInputBorderColor: 'warningBorderPrimary',
374
380
  },
@@ -428,6 +434,27 @@ const SelectMenu = (props) => {
428
434
  return (jsxs(components.Menu, { ...props, className: clsx(menuFill && `fill_${menuFill}`, menuShape && `shape_${menuShape}`, menuShapeStrength && `shape-strength_${menuShapeStrength}`, elevation && `elevation_${elevation}`), children: [menuBefore, props.selectProps.fetchingData ? (jsx("span", { className: "fetching", children: "Fetching data..." })) : (jsx(React.Fragment, { children: props.children })), menuAfter] }));
429
435
  };
430
436
 
437
+ const SelectOverflowBadge = (props) => {
438
+ const { badgeAppearance, badgeAppearanceSize, overflowItemsList } = props;
439
+ const label = `+${overflowItemsList.length}`;
440
+ return (jsx(Badge, { appearance: `${badgeAppearance} ${badgeAppearanceSize}`, className: "select__multi-value-badge", value: label }));
441
+ };
442
+
443
+ const SelectMultiValue = (props) => {
444
+ const { index, getValue, ...restProps } = props;
445
+ const multiValueMaxCount = restProps.selectProps.multiValueMaxCount || 100;
446
+ const overflowItemsList = getValue()
447
+ .slice(multiValueMaxCount)
448
+ .map((x) => x.label);
449
+ if (index < multiValueMaxCount) {
450
+ return jsx(components.MultiValue, { ...restProps });
451
+ }
452
+ if (index === multiValueMaxCount) {
453
+ return (jsx(SelectOverflowBadge, { badgeAppearance: restProps.selectProps.badgeAppearance, badgeAppearanceSize: restProps.selectProps.badgeAppearanceSize, overflowItemsList: overflowItemsList }));
454
+ }
455
+ return null;
456
+ };
457
+
431
458
  const SelectMultiValueContainer = (props) => {
432
459
  const { multipleItemFill, multipleItemFillHover, multipleItemShapeRadius } = props.selectProps;
433
460
  return (jsx(components.MultiValueContainer, { ...props, children: jsx(Group, { className: clsx('select__multi-value-item'), direction: "horizontal", alignItems: "center", fill: multipleItemFill, fillHover: multipleItemFillHover, borderRadius: multipleItemShapeRadius, gap: "0.5m", children: props.children }) }));
@@ -493,7 +520,7 @@ const selectConfig = {
493
520
  },
494
521
  };
495
522
  const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
496
- const { appearance = '', className, dataTestId, dataTour, width, minWidth, initialValue, badgeAppearance, badgeSize, defaultValue, dividerDirection, filterOption, hideSelectedOptions, hideValueContainer, inputAfter, inputBefore, instanceId, loaderAppearance, loadingMessageText, menuAfter, menuBefore, menuIsOpen, menuItemSize, noOptionsSearchText, noOptionsText, optionAfter, optionBefore, options, placeholder, showBadge, showDivider, value, before, after, openMenuOnClick, closeMenuOnSelect, isDisabled, isClearable, isCreatable, isLoading, isMulti, isSearchable, set, onChange, onInputChange, } = props;
523
+ const { appearance = '', className, dataTestId, dataTour, width, minWidth, initialValue, badgeSize, defaultValue, dividerDirection, filterOption, hideSelectedOptions, hideValueContainer, inputAfter, inputBefore, instanceId, loadingMessageText, menuAfter, menuBefore, menuIsOpen, menuItemSize, multiValueMaxCount, noOptionsSearchText, noOptionsText, optionAfter, optionBefore, options, placeholder, showBadge, showDivider, value, before, after, openMenuOnClick, closeMenuOnSelect, isDisabled, isClearable, isCreatable, isLoading, isMulti, isSearchable, set, onChange, onInputChange, } = props;
497
524
  const defaultRef = useRef(null);
498
525
  const selectRef = ref || defaultRef;
499
526
  const SelectComponent = isCreatable
@@ -540,8 +567,8 @@ const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
540
567
  }), [minWidth, width]);
541
568
  const appearanceConfig = useAppearanceConfig(appearance, selectConfig, isDisabled);
542
569
  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
543
- const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, elevation, badgeTextSize, clearIcon, clearIconFill, dividerFill, dividerSize, dropdownFillHover, dropdownIcon, dropdownIconFill, dropdownIconShape, groupFillClass, groupTextColorClass, groupTextSizeClass, groupTextWeightClass, inputCaretColorClass, inputTextColorClass, inputTextSizeClass, loadingMessageTextColor, loadingMessageTextSize, menuFillClass, multipleItemFill, multipleItemFillHover, multipleItemIcon, multipleItemIconFill, multipleItemShapeRadius, multipleItemTextColorClass, multipleItemTextSizeClass, noOptionsTextColorClass, noOptionsTextSizeClass, optionBorderClass, optionBorderTypeClass, optionFillActiveClass, optionFillActiveDisabledClass, optionFillActiveHoverClass, optionFillClass, optionFillDisabledClass, optionFillHoverClass, optionSelectedIcon, optionSelectedIconFillIcon, optionSelectedIconSize, optionSelectedIconSrc, optionTextColorActiveClass, optionTextColorClass, optionTextColorDisabled, optionTextSizeClass, placeholderTextColor, placeholderTextSize, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
544
- return (jsx(SelectComponent, { className: clsx(className, 'select', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, sizeClass && `select_size_${sizeClass}`, hideValueContainer && 'select_state_hide-value-container', set && `select_set_${set}`, widthClass && `select_width_${widthClass}`), ref: selectRef, elevation: elevation, badgeAppearance: badgeAppearance, badgeSize: badgeSize, badgeTextSize: badgeTextSize, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, components: {
570
+ const { fillClass, fillHoverClass, borderColorClass, borderColorHoverClass, elevation, badgeAppearance, badgeAppearanceSize, badgeTextSize, clearIcon, clearIconFill, dividerFill, dividerSize, dropdownFillHover, dropdownIcon, dropdownIconFill, dropdownIconShape, groupFillClass, groupTextColorClass, groupTextSizeClass, groupTextWeightClass, inputCaretColorClass, inputTextColorClass, inputTextSizeClass, loaderAppearance, loadingMessageTextColor, loadingMessageTextSize, menuFillClass, multipleItemFill, multipleItemFillHover, multipleItemIcon, multipleItemIconFill, multipleItemShapeRadius, multipleItemTextColorClass, multipleItemTextSizeClass, noOptionsTextColorClass, noOptionsTextSizeClass, optionBorderClass, optionBorderTypeClass, optionFillActiveClass, optionFillActiveDisabledClass, optionFillActiveHoverClass, optionFillClass, optionFillDisabledClass, optionFillHoverClass, optionSelectedIcon, optionSelectedIconFillIcon, optionSelectedIconSize, optionSelectedIconSrc, optionTextColorActiveClass, optionTextColorClass, optionTextColorDisabled, optionTextSizeClass, placeholderTextColor, placeholderTextSize, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
571
+ return (jsx(SelectComponent, { className: clsx(className, 'select', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, sizeClass && `select_size_${sizeClass}`, hideValueContainer && 'select_state_hide-value-container', set && `select_set_${set}`, widthClass && `select_width_${widthClass}`), ref: selectRef, elevation: elevation, badgeAppearance: badgeAppearance, badgeAppearanceSize: badgeAppearanceSize, badgeSize: badgeSize, badgeTextSize: badgeTextSize, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, components: {
545
572
  IndicatorSeparator: () => null,
546
573
  ClearIndicator: SelectClearIndicator,
547
574
  Control: SelectControl,
@@ -552,6 +579,7 @@ const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
552
579
  LoadingIndicator: SelectLoadingIndicator,
553
580
  LoadingMessage: SelectLoadingMessage,
554
581
  Menu: SelectMenu,
582
+ MultiValue: SelectMultiValue,
555
583
  MultiValueContainer: SelectMultiValueContainer,
556
584
  MultiValueLabel: SelectMultiValueLabel,
557
585
  MultiValueRemove: SelectMultiValueRemove,
@@ -560,7 +588,7 @@ const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
560
588
  Placeholder: SelectPlaceholder,
561
589
  SingleValue: SelectSingleValue,
562
590
  ValueContainer: SelectValueContainer,
563
- }, "data-testid": dataTestId, "data-tour": dataTour, defaultValue: defaultValue || initialValue, dividerDirection: dividerDirection, dividerFill: dividerFill, dividerSize: dividerSize, dropdownFillHover: dropdownFillHover, dropdownIcon: dropdownIcon, dropdownIconFill: dropdownIconFill, dropdownIconShape: dropdownIconShape, filterOption: filterOption, groupFill: groupFillClass, groupTextColor: groupTextColorClass, groupTextSize: groupTextSizeClass, groupTextWeight: groupTextWeightClass, hideSelectedOptions: hideSelectedOptions ?? false, inputAfter: inputAfter, inputBefore: inputBefore, inputCaretColor: inputCaretColorClass, inputShape: shapeClass, inputShapeStrength: shapeStrengthClass, inputTextColor: inputTextColorClass, inputTextSize: inputTextSizeClass, instanceId: instanceId, loaderAppearance: loaderAppearance, loadingMessageText: loadingMessageText, loadingMessageTextColor: loadingMessageTextColor, loadingMessageTextSize: loadingMessageTextSize, menuAfter: menuAfter, menuBefore: menuBefore, menuFill: menuFillClass, menuIsOpen: menuIsOpen, menuItemSize: menuItemSize, menuShape: shapeClass, menuShapeStrength: shapeStrengthClass, multipleItemFill: multipleItemFill, multipleItemFillHover: multipleItemFillHover, multipleItemIcon: multipleItemIcon, multipleItemIconFill: multipleItemIconFill, multipleItemShapeRadius: multipleItemShapeRadius, multipleItemSize: sizeClass, multipleItemTextColor: multipleItemTextColorClass, multipleItemTextSize: multipleItemTextSizeClass, noOptionBorder: optionBorderClass && `border-color_${optionBorderClass}`, noOptionBorderType: optionBorderTypeClass && `border_type_${optionBorderTypeClass}`, noOptionsFill: optionFillClass && `fill_${optionFillClass}`, noOptionsSearchText: noOptionsSearchText, noOptionsText: noOptionsText, noOptionsTextColor: noOptionsTextColorClass, noOptionsTextSize: noOptionsTextSizeClass, optionAfter: optionAfter, optionBefore: optionBefore, optionBorder: optionBorderClass, optionBorderType: optionBorderTypeClass, optionFill: optionFillClass, optionFillActive: optionFillActiveClass, optionFillActiveDisabledClass: optionFillActiveDisabledClass, optionFillActiveHover: optionFillActiveHoverClass, optionFillDisabled: optionFillDisabledClass, optionFillHover: optionFillHoverClass, options: options, optionSelectedIcon: optionSelectedIcon, optionSelectedIconFillIcon: optionSelectedIconFillIcon, optionSelectedIconSize: optionSelectedIconSize, optionSelectedIconSrc: optionSelectedIconSrc, optionShape: shapeClass, optionShapeStrength: shapeStrengthClass, optionTextColor: optionTextColorClass, optionTextColorActive: optionTextColorActiveClass, optionTextColorDisabled: optionTextColorDisabled, optionTextSize: optionTextSizeClass, placeholder: placeholder, placeholderTextColor: placeholderTextColor, placeholderTextSize: placeholderTextSize, showBadge: showBadge, showDivider: showDivider, styles: clearStyle, value: value, before: before, after: after, openMenuOnClick: openMenuOnClick, closeMenuOnSelect: closeMenuOnSelect ?? true, isDisabled: isDisabled, isClearable: isClearable ?? false, isLoading: isLoading, isMulti: isMulti ?? false, isSearchable: isSearchable ?? false, set: set, onChange: onChange, onInputChange: onInputChange }));
591
+ }, "data-testid": dataTestId, "data-tour": dataTour, defaultValue: defaultValue || initialValue, dividerDirection: dividerDirection, dividerFill: dividerFill, dividerSize: dividerSize, dropdownFillHover: dropdownFillHover, dropdownIcon: dropdownIcon, dropdownIconFill: dropdownIconFill, dropdownIconShape: dropdownIconShape, filterOption: filterOption, groupFill: groupFillClass, groupTextColor: groupTextColorClass, groupTextSize: groupTextSizeClass, groupTextWeight: groupTextWeightClass, hideSelectedOptions: hideSelectedOptions ?? false, inputAfter: inputAfter, inputBefore: inputBefore, inputCaretColor: inputCaretColorClass, inputShape: shapeClass, inputShapeStrength: shapeStrengthClass, inputTextColor: inputTextColorClass, inputTextSize: inputTextSizeClass, instanceId: instanceId, loaderAppearance: loaderAppearance, loadingMessageText: loadingMessageText, loadingMessageTextColor: loadingMessageTextColor, loadingMessageTextSize: loadingMessageTextSize, menuAfter: menuAfter, menuBefore: menuBefore, menuFill: menuFillClass, menuIsOpen: menuIsOpen, menuItemSize: menuItemSize, menuShape: shapeClass, menuShapeStrength: shapeStrengthClass, multipleItemFill: multipleItemFill, multipleItemFillHover: multipleItemFillHover, multipleItemIcon: multipleItemIcon, multipleItemIconFill: multipleItemIconFill, multipleItemShapeRadius: multipleItemShapeRadius, multipleItemSize: sizeClass, multipleItemTextColor: multipleItemTextColorClass, multipleItemTextSize: multipleItemTextSizeClass, multiValueMaxCount: multiValueMaxCount, noOptionBorder: optionBorderClass && `border-color_${optionBorderClass}`, noOptionBorderType: optionBorderTypeClass && `border_type_${optionBorderTypeClass}`, noOptionsFill: optionFillClass && `fill_${optionFillClass}`, noOptionsSearchText: noOptionsSearchText, noOptionsText: noOptionsText, noOptionsTextColor: noOptionsTextColorClass, noOptionsTextSize: noOptionsTextSizeClass, optionAfter: optionAfter, optionBefore: optionBefore, optionBorder: optionBorderClass, optionBorderType: optionBorderTypeClass, optionFill: optionFillClass, optionFillActive: optionFillActiveClass, optionFillActiveDisabledClass: optionFillActiveDisabledClass, optionFillActiveHover: optionFillActiveHoverClass, optionFillDisabled: optionFillDisabledClass, optionFillHover: optionFillHoverClass, options: options, optionSelectedIcon: optionSelectedIcon, optionSelectedIconFillIcon: optionSelectedIconFillIcon, optionSelectedIconSize: optionSelectedIconSize, optionSelectedIconSrc: optionSelectedIconSrc, optionShape: shapeClass, optionShapeStrength: shapeStrengthClass, optionTextColor: optionTextColorClass, optionTextColorActive: optionTextColorActiveClass, optionTextColorDisabled: optionTextColorDisabled, optionTextSize: optionTextSizeClass, placeholder: placeholder, placeholderTextColor: placeholderTextColor, placeholderTextSize: placeholderTextSize, showBadge: showBadge, showDivider: showDivider, styles: clearStyle, value: value, before: before, after: after, openMenuOnClick: openMenuOnClick, closeMenuOnSelect: closeMenuOnSelect ?? true, isDisabled: isDisabled, isClearable: isClearable ?? false, isLoading: isLoading, isMulti: isMulti ?? false, isSearchable: isSearchable ?? false, set: set, onChange: onChange, onInputChange: onInputChange }));
564
592
  });
565
593
 
566
594
  export { SelectClearIndicator as S, SelectContainer as a, SelectControl as b, SelectDropdownIndicator as c, SelectGroupHeading as d, SelectIndicatorsContainer as e, SelectInput as f, SelectMenu as g, SelectMultiValueContainer as h, SelectMultiValueLabel as i, SelectMultiValueRemove as j, SelectOption as k, SelectPlaceholder as l, SelectSingleValue as m, SelectValueContainer as n, selectConfig as s };
@@ -11,7 +11,7 @@ var ChipsGroup = require('../../ChipsGroup_cjs_C-oThNwF.js');
11
11
  var DatePicker = require('../../DatePicker_cjs_CHxK5Rw8.js');
12
12
  require('react-select');
13
13
  require('../../Icon_cjs_CQxDPPGY.js');
14
- var SelectContainer = require('../../SelectContainer_cjs_CD-J8jSe.js');
14
+ var SelectContainer = require('../../SelectContainer_cjs_B2fgWgCE.js');
15
15
  require('lodash/camelCase');
16
16
  require('lodash/maxBy');
17
17
  require('lodash/upperFirst');
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var SelectContainer = require('../../SelectContainer_cjs_CD-J8jSe.js');
3
+ var SelectContainer = require('../../SelectContainer_cjs_B2fgWgCE.js');
4
4
  require('react/jsx-runtime');
5
5
  require('react');
6
6
  require('clsx');
@@ -219,7 +219,7 @@ function Tab(props) {
219
219
  const { justifyContentClass, alignClass, labelTextAlign, labelTextColor, labelTextColorActive, labelTextColorActiveHover, labelTextColorHover, labelTextSize, labelTextStyle, labelTextWeight, labelTextWrap, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, dividerFill, dividerFillActive, dividerFillActiveHover, dividerFillDisabled, dividerFillHover, dividerSize, icon, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, linkFill, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
220
220
  // @ts-expect-error
221
221
  const { styles: tab } = useStyles.useStyles(props);
222
- return (jsxRuntime.jsx("div", { className: clsx('tab', className, rootClasses, isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', sizeClass && `tab_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `width_${widthClass}`, justifyContentClass && `tab_justify-content_${justifyContentClass}`, isSkeleton && `tab_skeleton`, onClick && 'cursor_type_pointer'), "data-testid": dataTestId && `${dataTestId}Tab`, "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsxs(Link.Link, { className: clsx('tab__link', !isDisabled && 'cursor_type_pointer'), fill: linkFill, href: link || href, rel: rel, target: target, children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { className: clsx('tab__wrapper', alignClass && `align_${alignClass}`), children: [label && (jsxRuntime.jsx(Text.Text, { className: "tab__label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorHover: labelTextColorHover, textColorHoverActive: labelTextColorActiveHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, isDisabled: isDisabled, children: label })), Boolean(badgeValue) && (jsxRuntime.jsx(Icon.Badge, { appearance: `${badgeAppearance} ${badgeAppearanceSize}`, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('tab__icon_after'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] }), jsxRuntime.jsx(Divider.Divider, { className: clsx('tab__divider'), width: "fill", direction: "horizontal", size: dividerSize, fill: dividerFill, fillActive: dividerFillActive, fillActiveHover: dividerFillActiveHover, fillDisabled: dividerFillDisabled, fillHover: dividerFillHover, zIndex: "1", isActive: isActive, isDisabled: isDisabled })] })), after] }) }));
222
+ return (jsxRuntime.jsx("div", { className: clsx('tab', className, rootClasses, isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', sizeClass && `tab_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `width_${widthClass}`, justifyContentClass && `tab_justify-content_${justifyContentClass}`, isSkeleton && `tab_skeleton`, onClick && 'cursor_type_pointer'), "data-testid": dataTestId && `${dataTestId}Tab`, "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxRuntime.jsxs(Link.Link, { className: clsx('tab__link', !isDisabled && 'cursor_type_pointer'), fill: linkFill, href: link || href, rel: rel, target: target, children: [before, children || (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { className: clsx('tab__wrapper', alignClass && `align_${alignClass}`), children: [label && (jsxRuntime.jsx(Text.Text, { className: "tab__label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorHover: labelTextColorHover, textColorHoverActive: labelTextColorActiveHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, isDisabled: isDisabled, children: label })), Boolean(badgeValue) && (jsxRuntime.jsx(Icon.Badge, { appearance: `${badgeAppearance} ${badgeAppearanceSize}`, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "tab__icon_after", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] }), jsxRuntime.jsx(Divider.Divider, { className: "tab__divider", width: "fill", direction: "horizontal", size: dividerSize, fill: dividerFill, fillActive: dividerFillActive, fillActiveHover: dividerFillActiveHover, fillDisabled: dividerFillDisabled, fillHover: dividerFillHover, zIndex: "1", isActive: isActive, isDisabled: isDisabled })] })), after] }) }));
223
223
  }
224
224
 
225
225
  function TabGroup(props) {
@@ -9,7 +9,7 @@ import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_BOaDqAo8.js';
9
9
  import { D as DatePickerInput } from '../DatePicker_es_DHGzUpHd.js';
10
10
  import 'react-select';
11
11
  import '../Icon_es_Banbw98_.js';
12
- import { a as SelectContainer } from '../SelectContainer_es_Bxt5C3nI.js';
12
+ import { a as SelectContainer } from '../SelectContainer_es_B5trQDlc.js';
13
13
  import 'lodash/camelCase';
14
14
  import 'lodash/maxBy';
15
15
  import 'lodash/upperFirst';
@@ -1,4 +1,4 @@
1
- export { a as Select, S as SelectClearIndicator, b as SelectControl, c as SelectDropdownIndicator, d as SelectGroupHeading, e as SelectIndicatorsContainer, f as SelectInput, g as SelectMenu, h as SelectMultiValueContainer, i as SelectMultiValueLabel, j as SelectMultiValueRemove, k as SelectOption, l as SelectPlaceholder, m as SelectSingleValue, n as SelectValueContainer, s as selectConfig } from '../SelectContainer_es_Bxt5C3nI.js';
1
+ export { a as Select, S as SelectClearIndicator, b as SelectControl, c as SelectDropdownIndicator, d as SelectGroupHeading, e as SelectIndicatorsContainer, f as SelectInput, g as SelectMenu, h as SelectMultiValueContainer, i as SelectMultiValueLabel, j as SelectMultiValueRemove, k as SelectOption, l as SelectPlaceholder, m as SelectSingleValue, n as SelectValueContainer, s as selectConfig } from '../SelectContainer_es_B5trQDlc.js';
2
2
  import 'react/jsx-runtime';
3
3
  import 'react';
4
4
  import 'clsx';
@@ -217,7 +217,7 @@ function Tab(props) {
217
217
  const { justifyContentClass, alignClass, labelTextAlign, labelTextColor, labelTextColorActive, labelTextColorActiveHover, labelTextColorHover, labelTextSize, labelTextStyle, labelTextWeight, labelTextWrap, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, dividerFill, dividerFillActive, dividerFillActiveHover, dividerFillDisabled, dividerFillHover, dividerSize, icon, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, linkFill, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
218
218
  // @ts-expect-error
219
219
  const { styles: tab } = useStyles(props);
220
- return (jsx("div", { className: clsx('tab', className, rootClasses, isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', sizeClass && `tab_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `width_${widthClass}`, justifyContentClass && `tab_justify-content_${justifyContentClass}`, isSkeleton && `tab_skeleton`, onClick && 'cursor_type_pointer'), "data-testid": dataTestId && `${dataTestId}Tab`, "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxs(Link, { className: clsx('tab__link', !isDisabled && 'cursor_type_pointer'), fill: linkFill, href: link || href, rel: rel, target: target, children: [before, children || (jsxs(React.Fragment, { children: [jsxs("div", { className: clsx('tab__wrapper', alignClass && `align_${alignClass}`), children: [label && (jsx(Text, { className: "tab__label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorHover: labelTextColorHover, textColorHoverActive: labelTextColorActiveHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, isDisabled: isDisabled, children: label })), Boolean(badgeValue) && (jsx(Badge, { appearance: `${badgeAppearance} ${badgeAppearanceSize}`, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsx(Icon, { className: clsx('tab__icon_after'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] }), jsx(Divider, { className: clsx('tab__divider'), width: "fill", direction: "horizontal", size: dividerSize, fill: dividerFill, fillActive: dividerFillActive, fillActiveHover: dividerFillActiveHover, fillDisabled: dividerFillDisabled, fillHover: dividerFillHover, zIndex: "1", isActive: isActive, isDisabled: isDisabled })] })), after] }) }));
220
+ return (jsx("div", { className: clsx('tab', className, rootClasses, isActive && 'tab_state_active', isDisabled && 'tab_state_disabled', sizeClass && `tab_size_${sizeClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `width_${widthClass}`, justifyContentClass && `tab_justify-content_${justifyContentClass}`, isSkeleton && `tab_skeleton`, onClick && 'cursor_type_pointer'), "data-testid": dataTestId && `${dataTestId}Tab`, "data-tour": dataTour, style: tab, onClick: onClick, onMouseEnter: onMouseEnter, children: jsxs(Link, { className: clsx('tab__link', !isDisabled && 'cursor_type_pointer'), fill: linkFill, href: link || href, rel: rel, target: target, children: [before, children || (jsxs(React.Fragment, { children: [jsxs("div", { className: clsx('tab__wrapper', alignClass && `align_${alignClass}`), children: [label && (jsx(Text, { className: "tab__label", size: labelTextSize, textAlign: labelTextAlign, textColor: labelTextColor, textColorActive: labelTextColorActive, textColorHover: labelTextColorHover, textColorHoverActive: labelTextColorActiveHover, textStyle: labelTextStyle, textWeight: labelTextWeight, textWrap: labelTextWrap, isActive: isActive, isDisabled: isDisabled, children: label })), Boolean(badgeValue) && (jsx(Badge, { appearance: `${badgeAppearance} ${badgeAppearanceSize}`, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsx(Icon, { className: "tab__icon_after", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] }), jsx(Divider, { className: "tab__divider", width: "fill", direction: "horizontal", size: dividerSize, fill: dividerFill, fillActive: dividerFillActive, fillActiveHover: dividerFillActiveHover, fillDisabled: dividerFillDisabled, fillHover: dividerFillHover, zIndex: "1", isActive: isActive, isDisabled: isDisabled })] })), after] }) }));
221
221
  }
222
222
 
223
223
  function TabGroup(props) {