@itcase/ui 1.9.32 → 1.9.34

package/dist/{SelectContainer_cjs_CD-J8jSe.js → SelectContainer_cjs_DzjEQKXj.js}

@@ -33,12 +33,10 @@ const selectAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfaceSecondary',
         fillHover: 'surfaceTertiary',
-        optionFillDisabled: 'surfaceSecondary',
-        optionTextColorDisabled: 'surfaceTextQuaternary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderQuaternary',
         elevation: 8,
-        badgeAppearance: 'accent',
+        badgeAppearance: 'accentPrimary solid circular',
         clearIconFill: 'surfaceItemQuaternary',
         dropdownIconFill: 'surfaceItemQuaternary',
         groupFill: 'surfaceSecondary',
@@ -59,10 +57,12 @@ const selectAppearanceDefault = {
         optionFill: 'surfacePrimary',
         optionFillActive: 'accentPrimary',
         optionFillActiveHover: 'accentSecondary',
+        optionFillDisabled: 'surfaceSecondary',
         optionFillHover: 'surfaceSecondary',
         optionSelectedIconFillIcon: 'successItemPrimary',
         optionTextColor: 'surfaceTextPrimary',
         optionTextColorActive: 'accentTextPrimary',
+        optionTextColorDisabled: 'surfaceTextQuaternary',
         placeholderTextColor: 'surfaceTextQuaternary',
         requiredInputBorderColor: 'warningBorderPrimary',
     },
@@ -71,7 +71,7 @@ const selectAppearanceDefault = {
 const selectAppearanceDisabled = {
     disabledPrimary: {
         elevation: 8,
-        badgeAppearance: 'accent',
+        badgeAppearance: 'accentPrimary solid circular',
         clearIconFill: 'surfaceItemDisabled',
         dropdownIconFill: 'surfaceItemDisabled',
         headingFill: 'surfaceSecondary',
@@ -102,12 +102,10 @@ const selectAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
         fillHover: 'errorTertiary',
-        optionFillDisabled: 'surfaceSecondary',
-        optionTextColorDisabled: 'surfaceTextQuaternary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderQuaternary',
         elevation: 8,
-        badgeAppearance: 'accent',
+        badgeAppearance: 'accentPrimary solid circular',
         clearIconFill: 'surfaceItemQuaternary',
         dropdownIconFill: 'surfaceItemQuaternary',
         groupFill: 'surfaceSecondary',
@@ -128,10 +126,12 @@ const selectAppearanceError = {
         optionFill: 'surfacePrimary',
         optionFillActive: 'accentPrimary',
         optionFillActiveHover: 'accentSecondary',
+        optionFillDisabled: 'surfaceSecondary',
         optionFillHover: 'surfaceSecondary',
         optionSelectedIconFillIcon: 'successItemPrimary',
         optionTextColor: 'surfaceTextPrimary',
         optionTextColorActive: 'accentTextPrimary',
+        optionTextColorDisabled: 'surfaceTextQuaternary',
         placeholderTextColor: 'surfaceTextQuaternary',
         requiredInputBorderColor: 'warningBorderPrimary',
     },
@@ -141,12 +141,10 @@ const selectAppearanceRequire = {
     requirePrimary: {
         fill: 'warningTertiary',
         fillHover: 'warningTertiary',
-        optionFillDisabled: 'surfaceSecondary',
-        optionTextColorDisabled: 'surfaceTextQuaternary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderQuaternary',
         elevation: 8,
-        badgeAppearance: 'accent',
+        badgeAppearance: 'accentPrimary solid circular',
         clearIconFill: 'surfaceItemQuaternary',
         dropdownIconFill: 'surfaceItemQuaternary',
         groupFill: 'surfaceSecondary',
@@ -167,10 +165,12 @@ const selectAppearanceRequire = {
         optionFill: 'surfacePrimary',
         optionFillActive: 'accentPrimary',
         optionFillActiveHover: 'accentSecondary',
+        optionFillDisabled: 'surfaceSecondary',
         optionFillHover: 'surfaceSecondary',
         optionSelectedIconFillIcon: 'successItemPrimary',
         optionTextColor: 'surfaceTextPrimary',
         optionTextColorActive: 'accentTextPrimary',
+        optionTextColorDisabled: 'surfaceTextQuaternary',
         placeholderTextColor: 'surfaceTextQuaternary',
         requiredInputBorderColor: 'warningBorderPrimary',
     },
@@ -207,6 +207,7 @@ const selectAppearanceSize = {
     sizeXL: {
         size: 'xl',
         textLoadingMessageAppearance: 'sizeM',
+        badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
         clearIcon: _default.icons24.Action.Clear,
@@ -226,6 +227,7 @@ const selectAppearanceSize = {
     sizeL: {
         size: 'l',
         textLoadingMessageAppearance: 'sizeM',
+        badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
         clearIcon: _default.icons24.Action.Clear,
@@ -245,6 +247,7 @@ const selectAppearanceSize = {
     sizeM: {
         size: 'm',
         textLoadingMessageAppearance: 'sizeM',
+        badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
         clearIcon: _default.icons24.Action.Clear,
@@ -264,6 +267,7 @@ const selectAppearanceSize = {
     sizeS: {
         size: 's',
         textLoadingMessageAppearance: 'sizeS',
+        badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
         clearIcon: _default.icons24.Action.Clear,
@@ -283,6 +287,7 @@ const selectAppearanceSize = {
     sizeXS: {
         size: 'xs',
         textLoadingMessageAppearance: 'sizeXS',
+        badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
         clearIcon: _default.icons16.Action.Clear,
@@ -302,6 +307,7 @@ const selectAppearanceSize = {
     sizeXXS: {
         size: 'xxs',
         textLoadingMessageAppearance: 'sizeXS',
+        badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
         clearIcon: _default.icons16.Action.Clear,
@@ -341,12 +347,10 @@ const selectAppearanceSuccess = {
     successPrimary: {
         fill: 'successTertiary',
         fillHover: 'successTertiary',
-        optionFillDisabled: 'surfaceSecondary',
-        optionTextColorDisabled: 'surfaceTextQuaternary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderQuaternary',
         elevation: 8,
-        badgeAppearance: 'accent',
+        badgeAppearance: 'accentPrimary solid circular',
         clearIconFill: 'surfaceItemQuaternary',
         dropdownIconFill: 'surfaceItemQuaternary',
         groupFill: 'surfaceSecondary',
@@ -367,10 +371,12 @@ const selectAppearanceSuccess = {
         optionFill: 'surfacePrimary',
         optionFillActive: 'accentPrimary',
         optionFillActiveHover: 'accentSecondary',
+        optionFillDisabled: 'surfaceSecondary',
         optionFillHover: 'surfaceSecondary',
         optionSelectedIconFillIcon: 'successItemPrimary',
         optionTextColor: 'surfaceTextPrimary',
         optionTextColorActive: 'accentTextPrimary',
+        optionTextColorDisabled: 'surfaceTextQuaternary',
         placeholderTextColor: 'surfaceTextQuaternary',
         requiredInputBorderColor: 'warningBorderPrimary',
     },
@@ -430,6 +436,27 @@ const SelectMenu = (props) => {
     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] }));
 };
 
+const SelectOverflowBadge = (props) => {
+    const { badgeAppearance, badgeAppearanceSize, overflowItemsList } = props;
+    const label = `+${overflowItemsList.length}`;
+    return (jsxRuntime.jsx(Icon.Badge, { appearance: `${badgeAppearance} ${badgeAppearanceSize}`, className: "select__multi-value-badge", value: label }));
+};
+
+const SelectMultiValue = (props) => {
+    const { index, getValue, ...restProps } = props;
+    const maxToShow = restProps.selectProps.maxToShow || 3;
+    const overflowItemsList = getValue()
+        .slice(maxToShow)
+        .map((x) => x.label);
+    if (index < maxToShow) {
+        return jsxRuntime.jsx(Select.components.MultiValue, { ...restProps });
+    }
+    if (index === maxToShow) {
+        return (jsxRuntime.jsx(SelectOverflowBadge, { badgeAppearance: restProps.selectProps.badgeAppearance, badgeAppearanceSize: restProps.selectProps.badgeAppearanceSize, overflowItemsList: overflowItemsList }));
+    }
+    return null;
+};
+
 const SelectMultiValueContainer = (props) => {
     const { multipleItemFill, multipleItemFillHover, multipleItemShapeRadius } = props.selectProps;
     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 = {
     },
 };
 const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
-    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;
+    const { appearance = '', className, dataTestId, dataTour, width, minWidth, maxToShow, initialValue, badgeSize, defaultValue, dividerDirection, filterOption, hideSelectedOptions, hideValueContainer, inputAfter, inputBefore, instanceId, 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;
     const defaultRef = React.useRef(null);
     const selectRef = ref || defaultRef;
     const SelectComponent = isCreatable
@@ -542,8 +569,8 @@ const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
     }), [minWidth, width]);
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, selectConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    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;
-    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: {
+    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;
+    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, maxToShow: maxToShow, elevation: elevation, badgeAppearance: badgeAppearance, badgeAppearanceSize: badgeAppearanceSize, badgeSize: badgeSize, badgeTextSize: badgeTextSize, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, components: {
             IndicatorSeparator: () => null,
             ClearIndicator: SelectClearIndicator,
             Control: SelectControl,
@@ -554,6 +581,7 @@ const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
             LoadingIndicator: SelectLoadingIndicator,
             LoadingMessage: SelectLoadingMessage,
             Menu: SelectMenu,
+            MultiValue: SelectMultiValue,
             MultiValueContainer: SelectMultiValueContainer,
             MultiValueLabel: SelectMultiValueLabel,
             MultiValueRemove: SelectMultiValueRemove,

package/dist/{SelectContainer_es_Bxt5C3nI.js → SelectContainer_es_BlhjV0hm.js}

@@ -31,12 +31,10 @@ const selectAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfaceSecondary',
         fillHover: 'surfaceTertiary',
-        optionFillDisabled: 'surfaceSecondary',
-        optionTextColorDisabled: 'surfaceTextQuaternary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderQuaternary',
         elevation: 8,
-        badgeAppearance: 'accent',
+        badgeAppearance: 'accentPrimary solid circular',
         clearIconFill: 'surfaceItemQuaternary',
         dropdownIconFill: 'surfaceItemQuaternary',
         groupFill: 'surfaceSecondary',
@@ -57,10 +55,12 @@ const selectAppearanceDefault = {
         optionFill: 'surfacePrimary',
         optionFillActive: 'accentPrimary',
         optionFillActiveHover: 'accentSecondary',
+        optionFillDisabled: 'surfaceSecondary',
         optionFillHover: 'surfaceSecondary',
         optionSelectedIconFillIcon: 'successItemPrimary',
         optionTextColor: 'surfaceTextPrimary',
         optionTextColorActive: 'accentTextPrimary',
+        optionTextColorDisabled: 'surfaceTextQuaternary',
         placeholderTextColor: 'surfaceTextQuaternary',
         requiredInputBorderColor: 'warningBorderPrimary',
     },
@@ -69,7 +69,7 @@ const selectAppearanceDefault = {
 const selectAppearanceDisabled = {
     disabledPrimary: {
         elevation: 8,
-        badgeAppearance: 'accent',
+        badgeAppearance: 'accentPrimary solid circular',
         clearIconFill: 'surfaceItemDisabled',
         dropdownIconFill: 'surfaceItemDisabled',
         headingFill: 'surfaceSecondary',
@@ -100,12 +100,10 @@ const selectAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
         fillHover: 'errorTertiary',
-        optionFillDisabled: 'surfaceSecondary',
-        optionTextColorDisabled: 'surfaceTextQuaternary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderQuaternary',
         elevation: 8,
-        badgeAppearance: 'accent',
+        badgeAppearance: 'accentPrimary solid circular',
         clearIconFill: 'surfaceItemQuaternary',
         dropdownIconFill: 'surfaceItemQuaternary',
         groupFill: 'surfaceSecondary',
@@ -126,10 +124,12 @@ const selectAppearanceError = {
         optionFill: 'surfacePrimary',
         optionFillActive: 'accentPrimary',
         optionFillActiveHover: 'accentSecondary',
+        optionFillDisabled: 'surfaceSecondary',
         optionFillHover: 'surfaceSecondary',
         optionSelectedIconFillIcon: 'successItemPrimary',
         optionTextColor: 'surfaceTextPrimary',
         optionTextColorActive: 'accentTextPrimary',
+        optionTextColorDisabled: 'surfaceTextQuaternary',
         placeholderTextColor: 'surfaceTextQuaternary',
         requiredInputBorderColor: 'warningBorderPrimary',
     },
@@ -139,12 +139,10 @@ const selectAppearanceRequire = {
     requirePrimary: {
         fill: 'warningTertiary',
         fillHover: 'warningTertiary',
-        optionFillDisabled: 'surfaceSecondary',
-        optionTextColorDisabled: 'surfaceTextQuaternary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderQuaternary',
         elevation: 8,
-        badgeAppearance: 'accent',
+        badgeAppearance: 'accentPrimary solid circular',
         clearIconFill: 'surfaceItemQuaternary',
         dropdownIconFill: 'surfaceItemQuaternary',
         groupFill: 'surfaceSecondary',
@@ -165,10 +163,12 @@ const selectAppearanceRequire = {
         optionFill: 'surfacePrimary',
         optionFillActive: 'accentPrimary',
         optionFillActiveHover: 'accentSecondary',
+        optionFillDisabled: 'surfaceSecondary',
         optionFillHover: 'surfaceSecondary',
         optionSelectedIconFillIcon: 'successItemPrimary',
         optionTextColor: 'surfaceTextPrimary',
         optionTextColorActive: 'accentTextPrimary',
+        optionTextColorDisabled: 'surfaceTextQuaternary',
         placeholderTextColor: 'surfaceTextQuaternary',
         requiredInputBorderColor: 'warningBorderPrimary',
     },
@@ -205,6 +205,7 @@ const selectAppearanceSize = {
     sizeXL: {
         size: 'xl',
         textLoadingMessageAppearance: 'sizeM',
+        badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
         clearIcon: icons24.Action.Clear,
@@ -224,6 +225,7 @@ const selectAppearanceSize = {
     sizeL: {
         size: 'l',
         textLoadingMessageAppearance: 'sizeM',
+        badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
         clearIcon: icons24.Action.Clear,
@@ -243,6 +245,7 @@ const selectAppearanceSize = {
     sizeM: {
         size: 'm',
         textLoadingMessageAppearance: 'sizeM',
+        badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
         clearIcon: icons24.Action.Clear,
@@ -262,6 +265,7 @@ const selectAppearanceSize = {
     sizeS: {
         size: 's',
         textLoadingMessageAppearance: 'sizeS',
+        badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
         clearIcon: icons24.Action.Clear,
@@ -281,6 +285,7 @@ const selectAppearanceSize = {
     sizeXS: {
         size: 'xs',
         textLoadingMessageAppearance: 'sizeXS',
+        badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
         clearIcon: icons16.Action.Clear,
@@ -300,6 +305,7 @@ const selectAppearanceSize = {
     sizeXXS: {
         size: 'xxs',
         textLoadingMessageAppearance: 'sizeXS',
+        badgeAppearanceSize: 'sizeM',
         badgeSize: 'm',
         badgeTextSize: 'm',
         clearIcon: icons16.Action.Clear,
@@ -339,12 +345,10 @@ const selectAppearanceSuccess = {
     successPrimary: {
         fill: 'successTertiary',
         fillHover: 'successTertiary',
-        optionFillDisabled: 'surfaceSecondary',
-        optionTextColorDisabled: 'surfaceTextQuaternary',
         borderColor: 'surfaceBorderTertiary',
         borderColorHover: 'surfaceBorderQuaternary',
         elevation: 8,
-        badgeAppearance: 'accent',
+        badgeAppearance: 'accentPrimary solid circular',
         clearIconFill: 'surfaceItemQuaternary',
         dropdownIconFill: 'surfaceItemQuaternary',
         groupFill: 'surfaceSecondary',
@@ -365,10 +369,12 @@ const selectAppearanceSuccess = {
         optionFill: 'surfacePrimary',
         optionFillActive: 'accentPrimary',
         optionFillActiveHover: 'accentSecondary',
+        optionFillDisabled: 'surfaceSecondary',
         optionFillHover: 'surfaceSecondary',
         optionSelectedIconFillIcon: 'successItemPrimary',
         optionTextColor: 'surfaceTextPrimary',
         optionTextColorActive: 'accentTextPrimary',
+        optionTextColorDisabled: 'surfaceTextQuaternary',
         placeholderTextColor: 'surfaceTextQuaternary',
         requiredInputBorderColor: 'warningBorderPrimary',
     },
@@ -428,6 +434,27 @@ const SelectMenu = (props) => {
     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] }));
 };
 
+const SelectOverflowBadge = (props) => {
+    const { badgeAppearance, badgeAppearanceSize, overflowItemsList } = props;
+    const label = `+${overflowItemsList.length}`;
+    return (jsx(Badge, { appearance: `${badgeAppearance} ${badgeAppearanceSize}`, className: "select__multi-value-badge", value: label }));
+};
+
+const SelectMultiValue = (props) => {
+    const { index, getValue, ...restProps } = props;
+    const maxToShow = restProps.selectProps.maxToShow || 3;
+    const overflowItemsList = getValue()
+        .slice(maxToShow)
+        .map((x) => x.label);
+    if (index < maxToShow) {
+        return jsx(components.MultiValue, { ...restProps });
+    }
+    if (index === maxToShow) {
+        return (jsx(SelectOverflowBadge, { badgeAppearance: restProps.selectProps.badgeAppearance, badgeAppearanceSize: restProps.selectProps.badgeAppearanceSize, overflowItemsList: overflowItemsList }));
+    }
+    return null;
+};
+
 const SelectMultiValueContainer = (props) => {
     const { multipleItemFill, multipleItemFillHover, multipleItemShapeRadius } = props.selectProps;
     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 = {
     },
 };
 const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
-    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;
+    const { appearance = '', className, dataTestId, dataTour, width, minWidth, maxToShow, initialValue, badgeSize, defaultValue, dividerDirection, filterOption, hideSelectedOptions, hideValueContainer, inputAfter, inputBefore, instanceId, 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;
     const defaultRef = useRef(null);
     const selectRef = ref || defaultRef;
     const SelectComponent = isCreatable
@@ -540,8 +567,8 @@ const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
     }), [minWidth, width]);
     const appearanceConfig = useAppearanceConfig(appearance, selectConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    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;
-    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: {
+    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;
+    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, maxToShow: maxToShow, elevation: elevation, badgeAppearance: badgeAppearance, badgeAppearanceSize: badgeAppearanceSize, badgeSize: badgeSize, badgeTextSize: badgeTextSize, classNamePrefix: "select", clearIcon: clearIcon, clearIconFill: clearIconFill, components: {
             IndicatorSeparator: () => null,
             ClearIndicator: SelectClearIndicator,
             Control: SelectControl,
@@ -552,6 +579,7 @@ const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
             LoadingIndicator: SelectLoadingIndicator,
             LoadingMessage: SelectLoadingMessage,
             Menu: SelectMenu,
+            MultiValue: SelectMultiValue,
             MultiValueContainer: SelectMultiValueContainer,
             MultiValueLabel: SelectMultiValueLabel,
             MultiValueRemove: SelectMultiValueRemove,

package/dist/cjs/components/DatePeriod.js

@@ -11,7 +11,7 @@ var ChipsGroup = require('../../ChipsGroup_cjs_C-oThNwF.js');
 var DatePicker = require('../../DatePicker_cjs_CHxK5Rw8.js');
 require('react-select');
 require('../../Icon_cjs_CQxDPPGY.js');
-var SelectContainer = require('../../SelectContainer_cjs_CD-J8jSe.js');
+var SelectContainer = require('../../SelectContainer_cjs_DzjEQKXj.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');

package/dist/cjs/components/Select.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var SelectContainer = require('../../SelectContainer_cjs_CD-J8jSe.js');
+var SelectContainer = require('../../SelectContainer_cjs_DzjEQKXj.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');

package/dist/cjs/components/Tab.js

@@ -219,7 +219,7 @@ function Tab(props) {
     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;
     // @ts-expect-error
     const { styles: tab } = useStyles.useStyles(props);
-    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] }) }));
+    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] }) }));
 }
 
 function TabGroup(props) {

package/dist/components/DatePeriod.js

@@ -9,7 +9,7 @@ import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_BOaDqAo8.js';
 import { D as DatePickerInput } from '../DatePicker_es_DHGzUpHd.js';
 import 'react-select';
 import '../Icon_es_Banbw98_.js';
-import { a as SelectContainer } from '../SelectContainer_es_Bxt5C3nI.js';
+import { a as SelectContainer } from '../SelectContainer_es_BlhjV0hm.js';
 import 'lodash/camelCase';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';

package/dist/components/Select.js

@@ -1,4 +1,4 @@
-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';
+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_BlhjV0hm.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/Tab.js

@@ -217,7 +217,7 @@ function Tab(props) {
     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;
     // @ts-expect-error
     const { styles: tab } = useStyles(props);
-    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] }) }));
+    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] }) }));
 }
 
 function TabGroup(props) {