@itcase/ui 1.9.31 → 1.9.34

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

@@ -5,12 +5,12 @@ import Select, { components } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import { useAppearanceConfig } from './hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from './hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { G as Group } from './Group_es_C69f2Dom.js';
+import { G as Group } from './Group_es_Dml1c8Cz.js';
 import { T as Text } from './Text_es_DaYcLe4H.js';
 import { icons12, icons16, icons14, icons24 } from '@itcase/icons/default';
-import { I as Icon, B as Badge } from './Icon_es_BstDGBF3.js';
-import { L as Loader } from './Loader_es_wjTqawH6.js';
-import { D as Divider } from './Divider_es_DNJg0mQR.js';
+import { I as Icon, B as Badge } from './Icon_es_Banbw98_.js';
+import { L as Loader } from './Loader_es_Csp5tr40.js';
+import { D as Divider } from './Divider_es_BlOJ77zx.js';
 
 // interface ClearIndicatorProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>>
 //   extends DefaultClearIndicatorProps<Option, IsMulti, Group> {}
@@ -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, 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,
@@ -560,7 +588,7 @@ const SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
             Placeholder: SelectPlaceholder,
             SingleValue: SelectSingleValue,
             ValueContainer: SelectValueContainer,
-        }, 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 }));
+        }, "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 }));
 });
 
 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 };

package/dist/cjs/components/Accordion.js

@@ -7,8 +7,8 @@ var castArray = require('lodash/castArray');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
-var Icon = require('../../Icon_cjs_D-jQrwjV.js');
-var Divider = require('../../Divider_cjs_BZn2epqW.js');
+var Icon = require('../../Icon_cjs_CQxDPPGY.js');
+var Divider = require('../../Divider_cjs_1fwsCxEb.js');
 var Text = require('../../Text_cjs_Co2XdYF-.js');
 var _default = require('@itcase/icons/default');
 require('lodash/camelCase');
@@ -26,7 +26,7 @@ require('lodash/maxBy');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_qKXVfU8e.js');
+require('../../Link_cjs_DqNtNI23.js');
 
 const accordionAppearanceSize = {
     sizeXXL: {

package/dist/cjs/components/Avatar.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Avatar = require('../../Avatar_cjs_DsgsCeRd.js');
+var Avatar = require('../../Avatar_cjs_MeHu04tK.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -18,15 +18,15 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Icon_cjs_D-jQrwjV.js');
+require('../../Icon_cjs_CQxDPPGY.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('../../Link_cjs_qKXVfU8e.js');
+require('../../Link_cjs_DqNtNI23.js');
 require('../../Text_cjs_Co2XdYF-.js');
-require('../../Image_cjs_BUM81t4Y.js');
+require('../../Image_cjs_B3E9N9YO.js');
 
 
 

package/dist/cjs/components/AvatarStack.js

@@ -5,8 +5,8 @@ var clsx = require('clsx');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Avatar = require('../../Avatar_cjs_DsgsCeRd.js');
-var Group = require('../../Group_cjs_C1YVff0N.js');
+var Avatar = require('../../Avatar_cjs_MeHu04tK.js');
+var Group = require('../../Group_cjs_CcDdC0Ua.js');
 var Text = require('../../Text_cjs_Co2XdYF-.js');
 require('react');
 require('lodash/camelCase');
@@ -22,12 +22,12 @@ require('../utils/setViewportProperty.js');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
-require('../../Icon_cjs_D-jQrwjV.js');
+require('../../Icon_cjs_CQxDPPGY.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_qKXVfU8e.js');
-require('../../Image_cjs_BUM81t4Y.js');
+require('../../Link_cjs_DqNtNI23.js');
+require('../../Image_cjs_B3E9N9YO.js');
 
 const avatarStackAppearanceSize = {
     size16: {

package/dist/cjs/components/Badge.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Icon = require('../../Icon_cjs_D-jQrwjV.js');
+var Icon = require('../../Icon_cjs_CQxDPPGY.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -23,7 +23,7 @@ require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('../../Link_cjs_qKXVfU8e.js');
+require('../../Link_cjs_DqNtNI23.js');
 require('../../Text_cjs_Co2XdYF-.js');
 
 

package/dist/cjs/components/Breadcrumbs.js

@@ -6,8 +6,8 @@ var clsx = require('clsx');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
-var Icon = require('../../Icon_cjs_D-jQrwjV.js');
-var Link = require('../../Link_cjs_qKXVfU8e.js');
+var Icon = require('../../Icon_cjs_CQxDPPGY.js');
+var Link = require('../../Link_cjs_DqNtNI23.js');
 var Text = require('../../Text_cjs_Co2XdYF-.js');
 var _default = require('@itcase/icons/default');
 require('lodash/camelCase');
@@ -125,17 +125,17 @@ const breadcrumbsAppearance = {
 const breadcrumbsConfig = {
     appearance: breadcrumbsAppearance};
 function BreadcrumbsItem(props) {
-    const { className, appearance, href, isActive, isSkeleton, onClick, children, } = props;
+    const { appearance, className, dataTestId, dataTour, href, isActive, isSkeleton, onClick, children, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, breadcrumbsConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, labelTextColor, labelTextColorHover, labelTextSize, borderColorClass, text, cursor, icon, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, shapeClass, sizeClass, underlineClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: itemStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx(className, 'breadcrumbs__item', borderColorClass && `border-color_${borderColorClass}`, isActive && 'breadcrumbs__item_current', sizeClass && `breadcrumbs__item_size_${sizeClass}`, shapeClass && `breadcrumbs__item_shape_${shapeClass}`, fillClass && `fill_${fillClass}`, underlineClass && `text-decoration_${underlineClass}`, isSkeleton && `breadcrumbs__item_skeleton`, onClick && (cursor || 'cursor_type_pointer')), href: href, LinkComponent: "div", style: itemStyles, onClick: onClick, children: [jsxRuntime.jsx(Text.Text, { className: "breadcrumbs__item-text", size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, children: text || children }), !isActive && (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('breadcrumbs__item-icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] }));
+    return (jsxRuntime.jsxs(Link.LinkWrapper, { className: clsx(className, 'breadcrumbs__item', borderColorClass && `border-color_${borderColorClass}`, isActive && 'breadcrumbs__item_current', sizeClass && `breadcrumbs__item_size_${sizeClass}`, shapeClass && `breadcrumbs__item_shape_${shapeClass}`, fillClass && `fill_${fillClass}`, underlineClass && `text-decoration_${underlineClass}`, isSkeleton && `breadcrumbs__item_skeleton`, onClick && (cursor || 'cursor_type_pointer')), "data-testid": dataTestId, "data-tour": dataTour, href: href, LinkComponent: "div", style: itemStyles, onClick: onClick, children: [jsxRuntime.jsx(Text.Text, { className: "breadcrumbs__item-text", size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, children: text || children }), !isActive && (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: clsx('breadcrumbs__item-icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] }));
 }
 
 function Breadcrumbs(props) {
-    const { className, appearance, breadcrumbsList, isSkeleton, children } = props;
+    const { appearance, className, dataTestId, dataTour, breadcrumbsList, isSkeleton, children, } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { directionClass = 'horizontal', widthClass } = propsGenerator;
     const breadcrumbsItemsList = React.useMemo(() => {
@@ -146,9 +146,9 @@ function Breadcrumbs(props) {
             return children;
         }
         return [];
-    }, [children, breadcrumbsList, appearance]);
+    }, [breadcrumbsList, children, appearance, isSkeleton]);
     const { styles: breadcrumbsStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'breadcrumbs', widthClass && `width_${widthClass}`, directionClass && `direction_${directionClass}`), style: breadcrumbsStyles, children: breadcrumbsItemsList }));
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'breadcrumbs', widthClass && `width_${widthClass}`, directionClass && `direction_${directionClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: breadcrumbsStyles, children: breadcrumbsItemsList }));
 }
 
 exports.Breadcrumbs = Breadcrumbs;

package/dist/cjs/components/Button.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Button = require('../../Button_cjs_DiaYeIs8.js');
+var Button = require('../../Button_cjs_BLuRWxbc.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -20,13 +20,13 @@ require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
-require('../../Icon_cjs_D-jQrwjV.js');
+require('../../Icon_cjs_CQxDPPGY.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_qKXVfU8e.js');
+require('../../Link_cjs_DqNtNI23.js');
 require('../../Text_cjs_Co2XdYF-.js');
-require('../../Loader_cjs_B3j9ATrq.js');
+require('../../Loader_cjs_CP1xKwb-.js');
 
 
 

package/dist/cjs/components/Cell.js

@@ -5,8 +5,8 @@ var clsx = require('clsx');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Icon = require('../../Icon_cjs_D-jQrwjV.js');
-var Label = require('../../Label_cjs_CyPU9hqO.js');
+var Icon = require('../../Icon_cjs_CQxDPPGY.js');
+var Label = require('../../Label_cjs_eckLVQqh.js');
 var Text = require('../../Text_cjs_Co2XdYF-.js');
 require('react');
 require('lodash/camelCase');
@@ -25,7 +25,7 @@ require('lodash/maxBy');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_qKXVfU8e.js');
+require('../../Link_cjs_DqNtNI23.js');
 
 const cellAppearanceSize = {
     sizeXL: {
@@ -164,7 +164,7 @@ const cellConfig = {
     },
 };
 function Cell(props) {
-    const { appearance, className, title, titleIcon, titleLabel, titleTag, showTitleLabel, showValueLabel, value, valueIcon, valueTag, before, after, isActive, isEqual, isSameWidth, onClick, onMouseEnter, } = props;
+    const { appearance, className, dataTestId, dataTour, title, titleIcon, titleLabel, titleTag, showTitleLabel, showValueLabel, value, valueIcon, valueTag, before, after, isActive, isEqual, isSameWidth, onClick, onMouseEnter, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, cellConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, titleIconFill, titleIconFillHover, titleIconFillSize, titleIconItemFill, titleIconShape, titleIconSrc, titleLabelAppearance, titleLabelAppearanceSize, titleLabelShape, titleLabelSize, titleLabelTextSize, titleTextColor, titleTextSize, titleTextTruncate, titleTextWeight, titleTextWrap, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, reverseClass, shapeClass, sizeClass, valueIconFill, valueIconFillHover, valueIconFillSize, valueIconItemFill, valueIconShape, valueIconSrc, valueLabel, valueLabelAppearance, valueLabelAppearanceSize, valueLabelShape, valueLabelSize, valueLabelTextSize, valueTextAlign, valueTextColor, valueTextSize, valueTextTruncate, valueTextWeight, valueTextWrap, widthClass, zeroGap, zeroPadding, } = propsGenerator;
@@ -181,7 +181,7 @@ function Cell(props) {
             ? borderColorHoverClass &&
                 `border-color_hover_${borderColorHoverClass}`
             : borderColorActiveHoverClass &&
-                `border-color_active_hover_${borderColorActiveHoverClass}`, reverseClass && `cell_reverse_${reverseClass}`, shapeClass && `cell_shape_${shapeClass}`, widthClass && `width_${widthClass}`, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsxRuntime.jsx("div", { className: "cell__before", children: before }), jsxRuntime.jsxs("div", { className: clsx('cell__wrapper', directionClass && `cell__wrapper_direction_${directionClass}`, isEqual && 'cell__wrapper-equal', isSameWidth && 'cell__wrapper-same-width'), children: [title && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__title", size: titleTextSize, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__title-icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), (showTitleLabel || titleLabel) && (jsxRuntime.jsx(Label.Label, { appearance: `${titleLabelAppearance} ${titleLabelAppearanceSize}`, className: "cell__title-label", size: titleLabelSize, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape }))] })), value && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__value", size: valueTextSize, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__value-icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), (showValueLabel || valueLabel) && (jsxRuntime.jsx(Label.Label, { appearance: `${valueLabelAppearance} ${valueLabelAppearanceSize}`, className: "cell__value-label", size: valueLabelSize, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape }))] }))] }), after && jsxRuntime.jsx("div", { className: "cell__after", children: after })] }));
+                `border-color_active_hover_${borderColorActiveHoverClass}`, reverseClass && `cell_reverse_${reverseClass}`, shapeClass && `cell_shape_${shapeClass}`, widthClass && `width_${widthClass}`, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap'), "data-testid": dataTestId, "data-tour": dataTour, style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsxRuntime.jsx("div", { className: "cell__before", children: before }), jsxRuntime.jsxs("div", { className: clsx('cell__wrapper', directionClass && `cell__wrapper_direction_${directionClass}`, isEqual && 'cell__wrapper-equal', isSameWidth && 'cell__wrapper-same-width'), children: [title && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__title", size: titleTextSize, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__title-icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), (showTitleLabel || titleLabel) && (jsxRuntime.jsx(Label.Label, { appearance: `${titleLabelAppearance} ${titleLabelAppearanceSize}`, className: "cell__title-label", size: titleLabelSize, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape }))] })), value && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__value", size: valueTextSize, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__value-icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), (showValueLabel || valueLabel) && (jsxRuntime.jsx(Label.Label, { appearance: `${valueLabelAppearance} ${valueLabelAppearanceSize}`, className: "cell__value-label", size: valueLabelSize, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape }))] }))] }), after && jsxRuntime.jsx("div", { className: "cell__after", children: after })] }));
 }
 
 exports.Cell = Cell;

package/dist/cjs/components/Checkbox.js

@@ -192,7 +192,7 @@ const checkboxConfig = {
     },
 };
 function Checkbox(props) {
-    const { id, className, appearance, label, desc, disabled, isDisabled, checked, indeterminate, Tag = 'label', value, before, after, isActive, isChecked, isSkeleton, onBlur, onChange, onFocus, } = props;
+    const { id, appearance, className, dataTestId, dataTour, label, desc, checked, disabled, indeterminate, Tag = 'label', value, before, after, isActive, isChecked, isDisabled, isSkeleton, onBlur, onChange, onFocus, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, checkboxConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { fillCheckboxActiveClass, fillCheckboxActiveHoverClass, fillCheckboxClass, fillCheckboxHoverClass, fillCheckmarkClass, fillClass, fillHoverClass, labelTextColor, labelTextSize, labelTextWeight, descTextColor, descTextSize, descTextWeight, borderColorCheckboxActiveClass, borderColorCheckboxActiveHoverClass, borderColorCheckboxClass, borderColorCheckboxHoverClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
@@ -211,7 +211,7 @@ function Checkbox(props) {
             ? borderColorCheckboxHoverClass &&
                 `checkbox_border-color_hover_${borderColorCheckboxHoverClass}`
             : borderColorCheckboxActiveHoverClass &&
-                `checkbox_border-color_active_hover_${borderColorCheckboxActiveHoverClass}`, widthClass && `width_${widthClass}`, isSkeleton && `checkbox_skeleton`), htmlFor: Tag === 'label' && id, children: [before, jsxRuntime.jsxs("div", { className: "checkbox__item", children: [jsxRuntime.jsx("input", { id: id, className: "checkbox__input", type: "checkbox", disabled: (isDisabled || disabled) && 'disabled', checked: (isActive || isChecked || checked) && 'checked', value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsxRuntime.jsx("div", { className: clsx('checkbox__state', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx(!indeterminate
+                `checkbox_border-color_active_hover_${borderColorCheckboxActiveHoverClass}`, widthClass && `width_${widthClass}`, isSkeleton && `checkbox_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, htmlFor: Tag === 'label' && id, children: [before, jsxRuntime.jsxs("div", { className: "checkbox__item", children: [jsxRuntime.jsx("input", { id: id, className: "checkbox__input", type: "checkbox", checked: (isActive || isChecked || checked) && 'checked', disabled: (isDisabled || disabled) && 'disabled', value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus }), jsxRuntime.jsx("div", { className: clsx('checkbox__state', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx(!indeterminate
                             ? 'checkbox__state-checkmark'
                             : 'checkbox__state-indeterminate', (checked || indeterminate) &&
                             fillCheckmarkClass &&

package/dist/cjs/components/Checkmark.js

@@ -115,7 +115,7 @@ const checkmarkConfig = {
     },
 };
 function Checkmark(props) {
-    const { className, appearance, isDisabled = false, isActive, isChecked, onClick, } = props;
+    const { appearance, className, dataTestId, dataTour, isActive, isChecked, isDisabled = false, onClick, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, checkmarkConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, checkmarkFillClass, sizeClass, } = propsGenerator;
@@ -132,7 +132,7 @@ function Checkmark(props) {
             ? borderColorHoverClass &&
                 `border-color_hover_${borderColorHoverClass}`
             : borderColorActiveHoverClass &&
-                `border-color_active_hover_${borderColorActiveHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, isDisabled), style: checkmarkStyles, onClick: onClick, children: (isChecked || isActive) && (jsxRuntime.jsx("div", { className: clsx('checkmark__icon', `svg_path_fill_${checkmarkFillClass}`), children: jsxRuntime.jsx("svg", { width: "32", height: "24", fill: "none", viewBox: "0 0 32 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { fill: checkmarkFillClass, d: "M28.0896 0.706312L11.4967 18.1772L3.9104 10.1895C3.01576 9.24775 1.56549 9.24775 0.670845 10.1895C-0.223615 11.1315 -0.223615 12.6585 0.670845 13.6005L9.87695 23.2936C10.3243 23.7644 10.9105 24 11.4967 24C12.083 24 12.6692 23.7644 13.1165 23.2936L31.3292 4.11744C32.2236 3.17547 32.2236 1.64848 31.3292 0.706504C30.4345 -0.235469 28.9841 -0.235469 28.0896 0.706312Z" }) }) })) }));
+                `border-color_active_hover_${borderColorActiveHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, isDisabled), "data-testid": dataTestId, "data-tour": dataTour, style: checkmarkStyles, onClick: onClick, children: (isChecked || isActive) && (jsxRuntime.jsx("div", { className: clsx('checkmark__icon', `svg_path_fill_${checkmarkFillClass}`), children: jsxRuntime.jsx("svg", { width: "32", height: "24", fill: "none", viewBox: "0 0 32 24", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { fill: checkmarkFillClass, d: "M28.0896 0.706312L11.4967 18.1772L3.9104 10.1895C3.01576 9.24775 1.56549 9.24775 0.670845 10.1895C-0.223615 11.1315 -0.223615 12.6585 0.670845 13.6005L9.87695 23.2936C10.3243 23.7644 10.9105 24 11.4967 24C12.083 24 12.6692 23.7644 13.1165 23.2936L31.3292 4.11744C32.2236 3.17547 32.2236 1.64848 31.3292 0.706504C30.4345 -0.235469 28.9841 -0.235469 28.0896 0.706312Z" }) }) })) }));
 }
 
 exports.Checkmark = Checkmark;

package/dist/cjs/components/Chips.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var ChipsGroup = require('../../ChipsGroup_cjs_P0UlUnid.js');
+var ChipsGroup = require('../../ChipsGroup_cjs_C-oThNwF.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
@@ -20,11 +20,11 @@ require('../hooks/useStyles/styleAttributes.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
-require('../../Icon_cjs_D-jQrwjV.js');
+require('../../Icon_cjs_CQxDPPGY.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_qKXVfU8e.js');
+require('../../Link_cjs_DqNtNI23.js');
 require('../../Text_cjs_Co2XdYF-.js');
 
 

package/dist/cjs/components/Choice.js

@@ -6,8 +6,8 @@ var clsx = require('clsx');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Icon = require('../../Icon_cjs_D-jQrwjV.js');
-var Loader = require('../../Loader_cjs_B3j9ATrq.js');
+var Icon = require('../../Icon_cjs_CQxDPPGY.js');
+var Loader = require('../../Loader_cjs_CP1xKwb-.js');
 var Text = require('../../Text_cjs_Co2XdYF-.js');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -25,7 +25,7 @@ require('lodash/maxBy');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_qKXVfU8e.js');
+require('../../Link_cjs_DqNtNI23.js');
 
 const choiceAppearanceDefault = {
     defaultMutedPrimary: {

package/dist/cjs/components/Code.js

@@ -150,7 +150,7 @@ const codeConfig = {
     },
 };
 function Code(props) {
-    const { appearance, className, initialValue = '', inputAutoFocus, inputCount = 6, inputPlaceholder, inputType = 'number', separatorComponent, before, after, isDisabled, isSkeleton, onBlur, onChange, onFocus, } = props;
+    const { appearance, className, dataTestId, dataTour, initialValue = '', inputAutoFocus, inputCount = 6, inputPlaceholder, inputType = 'number', separatorComponent, before, after, isDisabled, isSkeleton, onBlur, onChange, onFocus, } = props;
     const [otp, setOtp] = React.useState(initialValue);
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, codeConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
@@ -171,7 +171,7 @@ function Code(props) {
     React.useEffect(() => {
         onChange && onChange(otp);
     }, [otp]);
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'code', widthClass, sizeClass && `code_size_${sizeClass}`), children: [before, jsxRuntime.jsx(OtpInput, { containerStyle: clsx(className, 'code__wrapper'), inputType: inputType, numInputs: inputCount, placeholder: inputPlaceholder, renderInput: renderInput, renderSeparator: separatorComponent || null, shouldAutoFocus: inputAutoFocus, value: otp, onChange: setOtp }), after] }));
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'code', widthClass, sizeClass && `code_size_${sizeClass}`), "data-testid": dataTestId, "data-tour": dataTour, children: [before, jsxRuntime.jsx(OtpInput, { containerStyle: clsx(className, 'code__wrapper'), inputType: inputType, numInputs: inputCount, placeholder: inputPlaceholder, renderInput: renderInput, renderSeparator: separatorComponent || null, shouldAutoFocus: inputAutoFocus, value: otp, onChange: setOtp }), after] }));
 }
 
 exports.Code = Code;