@itcase/ui 1.9.30 → 1.9.32

package/dist/cjs/components/Select.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var SelectContainer = require('../../SelectContainer_cjs_CnhODaJP.js');
+var SelectContainer = require('../../SelectContainer_cjs_CD-J8jSe.js');
 require('react/jsx-runtime');
 require('react');
 require('clsx');
@@ -20,18 +20,18 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Group_cjs_C1YVff0N.js');
+require('../../Group_cjs_CcDdC0Ua.js');
 require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../../Text_cjs_Co2XdYF-.js');
 require('@itcase/icons/default');
-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('../../Loader_cjs_B3j9ATrq.js');
-require('../../Divider_cjs_BZn2epqW.js');
+require('../../Link_cjs_DqNtNI23.js');
+require('../../Loader_cjs_CP1xKwb-.js');
+require('../../Divider_cjs_1fwsCxEb.js');
 
 
 

package/dist/cjs/components/Swiper.js

@@ -4,11 +4,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var react = require('swiper/react');
-var Group = require('../../Group_cjs_C1YVff0N.js');
+var Group = require('../../Group_cjs_CcDdC0Ua.js');
 var Text = require('../../Text_cjs_Co2XdYF-.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Icon = require('../../Icon_cjs_D-jQrwjV.js');
+var Icon = require('../../Icon_cjs_CQxDPPGY.js');
 require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -26,10 +26,10 @@ require('lodash/maxBy');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_qKXVfU8e.js');
+require('../../Link_cjs_DqNtNI23.js');
 
 function Swiper(props) {
-    const { id, className, direction, minZoom = 1, maxZoom = 5, title, titleAfter, titleSize, titleTextColor, titleWeight, activeSlideIndex = 0, allowTouchMove, autoHeight, breakpoints, forwardedRef, // https://github.com/vercel/next.js/issues/4957
+    const { id, className, dataTestId, dataTour, direction, minZoom = 1, maxZoom = 5, title, titleAfter, titleSize, titleTextColor, titleWeight, activeSlideIndex = 0, allowTouchMove, autoHeight, breakpoints, forwardedRef, // https://github.com/vercel/next.js/issues/4957
     freeMode, items, keyboard, loop, modules, mousewheel, nextButton, normalizeSlideIndex, pagination, prevButton, preventClicks, preventClicksPropagation, simulateTouch, slidesPerView, spaceBetween, speed, swiperClass, swiperSlideClass, isChangeOnClickSlide, isInit, isNavigation = false, isScrollbar, isShowOriginalLink = false, isZoomEnabled = false, setNextBtnDisabled, setPrevBtnDisabled, onSlideNextTransitionEnd, onSlidePrevTransitionEnd, onSwiper, onUpdate, children, } = props;
     const swiperRef = React.useRef(null);
     const isMountedRef = React.useRef(false);
@@ -81,7 +81,7 @@ function Swiper(props) {
     const { alignClass, alignDirectionClass, fillClass, shapeClass } = propsGenerator;
     // @ts-expect-error
     const { styles: style } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs("div", { id: id, className: clsx('swiper-block', slidesPerView === 'auto' && 'swiper-block_type_auto', fillClass && `fill_${fillClass}`, shapeClass && `swiper_shape_${shapeClass}`, className), style: style, children: [title && (jsxRuntime.jsxs("div", { className: "swiper-block__wrapper", children: [title && (jsxRuntime.jsx(Icon.Title, { className: "swiper-block__title", size: titleSize, textColor: titleTextColor, textWeight: titleWeight, children: title })), titleAfter] })), prevButton && nextButton && (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("div", { className: "swiper-block__prev swiper-button", ref: prevRef, children: prevButton }), jsxRuntime.jsx("div", { className: "swiper-block__next swiper-button", ref: nextRef, children: nextButton })] })), jsxRuntime.jsx(react.Swiper, { className: clsx('swiper-block__swiper', swiperClass), ref: swiperRef, direction: direction, allowTouchMove: allowTouchMove, autoHeight: autoHeight ?? false, breakpoints: breakpoints, centeredSlides: true, freeMode: freeMode, init: isInit ?? true, keyboard: keyboard, loop: isLoop, modules: modules, mousewheel: mousewheel, navigation: isNavigation ? { nextEl, prevEl } : false, normalizeSlideIndex: normalizeSlideIndex, pagination: pagination, preventClicks: preventClicks, preventClicksPropagation: preventClicksPropagation, scrollbar: isScrollbar, simulateTouch: simulateTouch, slidesPerView: slidesPerView, spaceBetween: spaceBetween, speed: speed ?? 500, zoom: {
+    return (jsxRuntime.jsxs("div", { id: id, className: clsx('swiper-block', slidesPerView === 'auto' && 'swiper-block_type_auto', fillClass && `fill_${fillClass}`, shapeClass && `swiper_shape_${shapeClass}`, className), "data-testid": dataTestId, "data-tour": dataTour, style: style, children: [title && (jsxRuntime.jsxs("div", { className: "swiper-block__wrapper", children: [title && (jsxRuntime.jsx(Icon.Title, { className: "swiper-block__title", size: titleSize, textColor: titleTextColor, textWeight: titleWeight, children: title })), titleAfter] })), prevButton && nextButton && (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("div", { className: "swiper-block__prev swiper-button", ref: prevRef, children: prevButton }), jsxRuntime.jsx("div", { className: "swiper-block__next swiper-button", ref: nextRef, children: nextButton })] })), jsxRuntime.jsx(react.Swiper, { className: clsx('swiper-block__swiper', swiperClass), ref: swiperRef, direction: direction, allowTouchMove: allowTouchMove, autoHeight: autoHeight ?? false, breakpoints: breakpoints, centeredSlides: true, freeMode: freeMode, init: isInit ?? true, keyboard: keyboard, loop: isLoop, modules: modules, mousewheel: mousewheel, navigation: isNavigation ? { nextEl, prevEl } : false, normalizeSlideIndex: normalizeSlideIndex, pagination: pagination, preventClicks: preventClicks, preventClicksPropagation: preventClicksPropagation, scrollbar: isScrollbar, simulateTouch: simulateTouch, slidesPerView: slidesPerView, spaceBetween: spaceBetween, speed: speed ?? 500, zoom: {
                     minRatio: minZoom,
                     maxRatio: maxZoom,
                     enabled: isZoomEnabled,

package/dist/cjs/components/Switch.js

@@ -127,13 +127,13 @@ const switchConfig = {
     },
 };
 const Switch = React.forwardRef(function Switch(props, ref) {
-    const { id, className, appearance, align = 'left', title, desc, isDisabled, isActive, onChange, } = props;
+    const { id, appearance, className, dataTestId, dataTour, align = 'left', title, desc, isActive, isDisabled, onChange, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, switchConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    const { size, fillActiveClass, fillActiveHoverClass, fillClass, widthClass, fillHoverClass, fillToggleActiveClass, fillToggleActiveHoverClass, fillToggleClass, fillToggleHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, } = propsGenerator;
-    return (jsxRuntime.jsxs("div", { className: clsx('switch', className, widthClass && `width_${widthClass}`, align && `switch_align_${align}`, size && `switch_size_${size}`), children: [jsxRuntime.jsxs("div", { className: "switch__wrapper", children: [title && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc }))] }), jsxRuntime.jsxs("div", { className: 'switch__item', children: [jsxRuntime.jsx("input", { id: id, className: "switch__checkbox", type: "checkbox", 
+    const { size, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillToggleActiveClass, fillToggleActiveHoverClass, fillToggleClass, fillToggleHoverClass, titleTextColor, titleTextSize, descTextColor, descTextSize, widthClass, } = propsGenerator;
+    return (jsxRuntime.jsxs("div", { className: clsx('switch', className, widthClass && `width_${widthClass}`, align && `switch_align_${align}`, size && `switch_size_${size}`), "data-testid": dataTestId, "data-tour": dataTour, children: [jsxRuntime.jsxs("div", { className: "switch__wrapper", children: [title && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsxRuntime.jsx(Text.Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc }))] }), jsxRuntime.jsxs("div", { className: 'switch__item', children: [jsxRuntime.jsx("input", { id: id, className: "switch__checkbox", type: "checkbox", 
                         // @ts-expect-error
-                        ref: ref, disabled: isDisabled && 'disabled', checked: isActive && 'checked', onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('switch__bg', !isActive
+                        ref: ref, checked: isActive && 'checked', disabled: isDisabled && 'disabled', onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('switch__bg', !isActive
                             ? fillClass && `fill_${fillClass}`
                             : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
                             ? fillHoverClass && `fill_hover_${fillHoverClass}`

package/dist/cjs/components/Tab.js

@@ -7,9 +7,9 @@ var useActiveClasses = require('../hooks/useActiveClasses/useActiveClasses.js');
 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 Divider = require('../../Divider_cjs_BZn2epqW.js');
-var Link = require('../../Link_cjs_qKXVfU8e.js');
+var Icon = require('../../Icon_cjs_CQxDPPGY.js');
+var Divider = require('../../Divider_cjs_1fwsCxEb.js');
+var Link = require('../../Link_cjs_DqNtNI23.js');
 var Text = require('../../Text_cjs_Co2XdYF-.js');
 require('../hooks/useActiveClasses/useActiveClasses.helpers.js');
 require('lodash/camelCase');

package/dist/cjs/components/Textarea.js

@@ -214,11 +214,11 @@ const textareaConfig = {
     },
 };
 function Textarea(props) {
-    const { id, appearance, className, dataTestId, name, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
+    const { id, appearance, className, dataTestId, dataTour, name, placeholder, value, isDisabled, onBlur, onChange, onFocus, onKeyDown, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, textareaConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, fillHoverClass, borderColorClass, borderHoverClass, borderWidthClass, textColorClass, textSizeClass, textWeightClass, caretClass, placeholderTextColorClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
-    return (jsxRuntime.jsx("div", { className: clsx('textarea', className, sizeClass && `textarea_size_${sizeClass}`), children: jsxRuntime.jsx("textarea", { id: id, className: clsx('textarea__input', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && `caret-color_${caretClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderHoverClass && `border-color_hover_${borderHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, placeholderTextColorClass &&
+    return (jsxRuntime.jsx("div", { className: clsx('textarea', className, sizeClass && `textarea_size_${sizeClass}`), "data-tour": dataTour, children: jsxRuntime.jsx("textarea", { id: id, className: clsx('textarea__input', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && `caret-color_${caretClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderHoverClass && `border-color_hover_${borderHoverClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, placeholderTextColorClass &&
                 `placeholder-text-color_${placeholderTextColorClass}`, textSizeClass && `text_size_${textSizeClass}`, textColorClass && `text-color_${textColorClass}`, textWeightClass && `text-weight_${textWeightClass}`, widthClass && `width_${widthClass}`), "data-testid": dataTestId || (name ? `${name}-textarea` : 'textarea'), disabled: isDisabled, placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown }) }));
 }
 

package/dist/cjs/components/Tile.js

@@ -5,7 +5,7 @@ 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 Icon = require('../../Icon_cjs_CQxDPPGY.js');
 var Text = require('../../Text_cjs_Co2XdYF-.js');
 require('react');
 require('lodash/camelCase');
@@ -24,7 +24,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 tileAppearanceShape = {
     circular: {
@@ -165,13 +165,13 @@ const tileConfig = {
     },
 };
 function Tile(props) {
-    const { className, type, appearance, title, desc, badgeValue, before, after, isSkeleton, onClick, children, } = props;
+    const { appearance, className, dataTestId, dataTour, type, title, desc, badgeValue, before, after, isSkeleton, onClick, children, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, tileConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    const { dataTestId, dataTour, directionClass, alignClass, alignDirectionClass, fillClass, titleTextAlign, titleTextColor, titleTextSize, titleTextWeight, titleTextWrap, descTextColor, descTextSize, descTextWrap, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, icon, iconAppearance, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
+    const { directionClass, alignClass, alignDirectionClass, fillClass, titleTextAlign, titleTextColor, titleTextSize, titleTextWeight, titleTextWrap, descTextColor, descTextSize, descTextWrap, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, icon, iconAppearance, iconFill, iconFillIcon, iconFillSize, iconShape, iconSize, iconSrc, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: tileStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx("div", { className: clsx('tile', className, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, alignClass && `align_${alignClass}`, directionClass && `direction_${directionClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `tile_size_${sizeClass}`, type && `tile_type_${type}`, badgeValue && `tile_state_badge`, widthClass && `width_${widthClass}`, isSkeleton && `tile_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: tileStyles, onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, jsxRuntime.jsxs("div", { className: "tile__header", children: [jsxRuntime.jsxs("div", { className: "tile__header-inner", children: [title && (jsxRuntime.jsx(Icon.Title, { className: "tile__title", size: titleTextSize, textAlign: titleTextAlign, textColor: titleTextColor, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), desc && (jsxRuntime.jsx(Text.Text, { className: "tile__text", size: descTextSize, textColor: descTextColor, textWrap: descTextWrap, children: desc }))] }), jsxRuntime.jsxs("div", { className: "tile__header-actions", children: [badgeValue && (jsxRuntime.jsx(Icon.Badge, { className: "tile__badge", appearance: `${badgeAppearance} ${badgeAppearanceSize}`, size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "tile__icon", appearance: iconAppearance, fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] })] }), children, after] }) }));
+    return (jsxRuntime.jsx("div", { className: clsx('tile', className, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, alignClass && `align_${alignClass}`, directionClass && `direction_${directionClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, sizeClass && `tile_size_${sizeClass}`, type && `tile_type_${type}`, badgeValue && `tile_state_badge`, widthClass && `width_${widthClass}`, isSkeleton && `tile_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: tileStyles, onClick: onClick, children: jsxRuntime.jsxs("div", { className: clsx('tile__wrapper', alignClass, alignDirectionClass), children: [before, jsxRuntime.jsxs("div", { className: "tile__header", children: [jsxRuntime.jsxs("div", { className: "tile__header-inner", children: [title && (jsxRuntime.jsx(Icon.Title, { className: "tile__title", size: titleTextSize, textAlign: titleTextAlign, textColor: titleTextColor, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), desc && (jsxRuntime.jsx(Text.Text, { className: "tile__text", size: descTextSize, textColor: descTextColor, textWrap: descTextWrap, children: desc }))] }), jsxRuntime.jsxs("div", { className: "tile__header-actions", children: [badgeValue && (jsxRuntime.jsx(Icon.Badge, { appearance: `${badgeAppearance} ${badgeAppearanceSize}`, className: "tile__badge", size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), (icon || iconSrc) && (jsxRuntime.jsx(Icon.Icon, { appearance: iconAppearance, className: "tile__icon", fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] })] }), children, after] }) }));
 }
 
 exports.Tile = Tile;

package/dist/cjs/components/Title.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/Tooltip.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/Video.js

@@ -18,9 +18,9 @@ require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 
 function Video(props) {
-    const { id, className, position, mp4, ogv, poster, webm, children } = props;
+    const { id, className, dataTestId, dataTour, position, mp4, ogv, poster, webm, children, } = props;
     const { styles: videoStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs("div", { id: id, className: clsx('video', className, poster && `video_poster`, position && `video_position_${position}`), style: videoStyles, children: [jsxRuntime.jsxs("video", { className: "video__wrapper", autoPlay: true, loop: true, muted: true, playsInline: false, poster: poster, children: [webm && jsxRuntime.jsx("source", { type: 'video/webm; codecs="vp8, vorbis"', src: webm }), ogv && jsxRuntime.jsx("source", { type: 'video/ogg; codecs="theora, vorbi"', src: ogv }), mp4 && (jsxRuntime.jsx("source", { type: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"', src: mp4 }))] }), children] }));
+    return (jsxRuntime.jsxs("div", { id: id, className: clsx('video', className, poster && `video_poster`, position && `video_position_${position}`), "data-testid": dataTestId, "data-tour": dataTour, style: videoStyles, children: [jsxRuntime.jsxs("video", { className: "video__wrapper", autoPlay: true, loop: true, muted: true, playsInline: false, poster: poster, children: [webm && jsxRuntime.jsx("source", { type: 'video/webm; codecs="vp8, vorbis"', src: webm }), ogv && jsxRuntime.jsx("source", { type: 'video/ogg; codecs="theora, vorbi"', src: ogv }), mp4 && (jsxRuntime.jsx("source", { type: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"', src: mp4 }))] }), children] }));
 }
 
 exports.Video = Video;

package/dist/cjs/components/Warning.js

@@ -6,7 +6,7 @@ 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 Icon = require('../../Icon_cjs_CQxDPPGY.js');
 var Text = require('../../Text_cjs_Co2XdYF-.js');
 var _default = require('@itcase/icons/default');
 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 warningAppearanceAccent = {
     accentMutedPrimary: {
@@ -186,14 +186,14 @@ const warningConfig = {
     },
 };
 function Warning(props) {
-    const { appearance, className, label, description, isSkeleton, children } = props;
+    const { appearance, className, dataTestId, dataTour, label, description, isSkeleton, children, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, warningConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, labelTextColor, labelTextSize, labelTextWeight, descriptionTextColor, descriptionTextSize, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
     // @ts-ignore
     const { styles: warningStyles } = useStyles.useStyles(props);
     const [isVisible, setIsVisible] = React.useState(true);
-    return (jsxRuntime.jsx(React.Fragment, { children: isVisible && (jsxRuntime.jsxs("div", { className: clsx(className, 'warning', fillClass && `fill_${fillClass}`, sizeClass && `warning_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `warning_skeleton`), style: warningStyles, children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { fill: iconBeforeFill, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxRuntime.jsxs("div", { className: 'warning__content', children: [label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), description && (jsxRuntime.jsx(Text.Text, { size: descriptionTextSize, textColor: descriptionTextColor, children: description })), children] }), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { fill: iconAfterFill, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, SvgImage: iconAfter, onClick: () => setIsVisible(false) }))] })) }));
+    return (jsxRuntime.jsx(React.Fragment, { children: isVisible && (jsxRuntime.jsxs("div", { className: clsx(className, 'warning', fillClass && `fill_${fillClass}`, sizeClass && `warning_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `warning_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: warningStyles, children: [(iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { fill: iconBeforeFill, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxRuntime.jsxs("div", { className: 'warning__content', children: [label && (jsxRuntime.jsx(Text.Text, { size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), description && (jsxRuntime.jsx(Text.Text, { size: descriptionTextSize, textColor: descriptionTextColor, children: description })), children] }), (iconAfter || iconAfterSrc) && (jsxRuntime.jsx(Icon.Icon, { fill: iconAfterFill, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, SvgImage: iconAfter, onClick: () => setIsVisible(false) }))] })) }));
 }
 
 exports.Warning = Warning;

package/dist/components/Accordion.js

@@ -5,8 +5,8 @@ import castArray from 'lodash/castArray';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
-import { B as Badge, I as Icon } from '../Icon_es_BstDGBF3.js';
-import { D as Divider } from '../Divider_es_DNJg0mQR.js';
+import { B as Badge, I as Icon } from '../Icon_es_Banbw98_.js';
+import { D as Divider } from '../Divider_es_BlOJ77zx.js';
 import { T as Text } from '../Text_es_DaYcLe4H.js';
 import { icons16 } from '@itcase/icons/default';
 import 'lodash/camelCase';
@@ -24,7 +24,7 @@ import 'lodash/maxBy';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_P2b6ya7P.js';
+import '../Link_es_Bt-Bhy3t.js';
 
 const accordionAppearanceSize = {
     sizeXXL: {

package/dist/components/Avatar.js

@@ -1,4 +1,4 @@
-export { A as Avatar, b as avatarAppearance, a as avatarConfig } from '../Avatar_es_DBNS3IWw.js';
+export { A as Avatar, b as avatarAppearance, a as avatarConfig } from '../Avatar_es_uJ8vSNKC.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -16,12 +16,12 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Icon_es_BstDGBF3.js';
+import '../Icon_es_Banbw98_.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Link_es_P2b6ya7P.js';
+import '../Link_es_Bt-Bhy3t.js';
 import '../Text_es_DaYcLe4H.js';
-import '../Image_es_C-IjVkKX.js';
+import '../Image_es_D3YrkouM.js';

package/dist/components/AvatarStack.js

@@ -3,8 +3,8 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { A as Avatar } from '../Avatar_es_DBNS3IWw.js';
-import { G as Group } from '../Group_es_C69f2Dom.js';
+import { A as Avatar } from '../Avatar_es_uJ8vSNKC.js';
+import { G as Group } from '../Group_es_Dml1c8Cz.js';
 import { T as Text } from '../Text_es_DaYcLe4H.js';
 import 'react';
 import 'lodash/camelCase';
@@ -20,12 +20,12 @@ import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
-import '../Icon_es_BstDGBF3.js';
+import '../Icon_es_Banbw98_.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_P2b6ya7P.js';
-import '../Image_es_C-IjVkKX.js';
+import '../Link_es_Bt-Bhy3t.js';
+import '../Image_es_D3YrkouM.js';
 
 const avatarStackAppearanceSize = {
     size16: {

package/dist/components/Badge.js

@@ -1,4 +1,4 @@
-export { B as Badge, f as badgeAppearance, g as badgeConfig } from '../Icon_es_BstDGBF3.js';
+export { B as Badge, f as badgeAppearance, g as badgeConfig } from '../Icon_es_Banbw98_.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -21,5 +21,5 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Link_es_P2b6ya7P.js';
+import '../Link_es_Bt-Bhy3t.js';
 import '../Text_es_DaYcLe4H.js';

package/dist/components/Breadcrumbs.js

@@ -4,8 +4,8 @@ import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
-import { I as Icon } from '../Icon_es_BstDGBF3.js';
-import { a as LinkWrapper } from '../Link_es_P2b6ya7P.js';
+import { I as Icon } from '../Icon_es_Banbw98_.js';
+import { a as LinkWrapper } from '../Link_es_Bt-Bhy3t.js';
 import { T as Text } from '../Text_es_DaYcLe4H.js';
 import { icons12, icons14, icons16, icons20, icons24 } from '@itcase/icons/default';
 import 'lodash/camelCase';
@@ -123,17 +123,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(appearance, breadcrumbsConfig);
     const propsGenerator = 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(props);
-    return (jsxs(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: [jsx(Text, { className: "breadcrumbs__item-text", size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, children: text || children }), !isActive && (icon || iconSrc) && (jsx(Icon, { className: clsx('breadcrumbs__item-icon'), fill: iconFill, fillSize: iconFillSize, iconFill: iconFillIcon, iconSize: iconSize, imageSrc: iconSrc, shape: iconShape, SvgImage: icon }))] }));
+    return (jsxs(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: [jsx(Text, { className: "breadcrumbs__item-text", size: labelTextSize, textColor: labelTextColor, textColorHover: labelTextColorHover, children: text || children }), !isActive && (icon || iconSrc) && (jsx(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(props);
     const { directionClass = 'horizontal', widthClass } = propsGenerator;
     const breadcrumbsItemsList = useMemo(() => {
@@ -144,9 +144,9 @@ function Breadcrumbs(props) {
             return children;
         }
         return [];
-    }, [children, breadcrumbsList, appearance]);
+    }, [breadcrumbsList, children, appearance, isSkeleton]);
     const { styles: breadcrumbsStyles } = useStyles(props);
-    return (jsx("div", { className: clsx(className, 'breadcrumbs', widthClass && `width_${widthClass}`, directionClass && `direction_${directionClass}`), style: breadcrumbsStyles, children: breadcrumbsItemsList }));
+    return (jsx("div", { className: clsx(className, 'breadcrumbs', widthClass && `width_${widthClass}`, directionClass && `direction_${directionClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: breadcrumbsStyles, children: breadcrumbsItemsList }));
 }
 
 export { Breadcrumbs, BreadcrumbsItem, breadcrumbsAppearance };

package/dist/components/Button.js

@@ -1,4 +1,4 @@
-export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button_es_y6hlih24.js';
+export { B as Button, a as buttonAppearance, b as buttonConfig } from '../Button_es_DH8hqqdN.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -18,10 +18,10 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
-import '../Icon_es_BstDGBF3.js';
+import '../Icon_es_Banbw98_.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_P2b6ya7P.js';
+import '../Link_es_Bt-Bhy3t.js';
 import '../Text_es_DaYcLe4H.js';
-import '../Loader_es_wjTqawH6.js';
+import '../Loader_es_Csp5tr40.js';

package/dist/components/Cell.js

@@ -3,8 +3,8 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon } from '../Icon_es_BstDGBF3.js';
-import { L as Label } from '../Label_es_qnCgQX52.js';
+import { I as Icon } from '../Icon_es_Banbw98_.js';
+import { L as Label } from '../Label_es_DuDL0-3C.js';
 import { T as Text } from '../Text_es_DaYcLe4H.js';
 import 'react';
 import 'lodash/camelCase';
@@ -23,7 +23,7 @@ import 'lodash/maxBy';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_P2b6ya7P.js';
+import '../Link_es_Bt-Bhy3t.js';
 
 const cellAppearanceSize = {
     sizeXL: {
@@ -162,7 +162,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(appearance, cellConfig);
     const propsGenerator = 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;
@@ -179,7 +179,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 && jsx("div", { className: "cell__before", children: before }), jsxs("div", { className: clsx('cell__wrapper', directionClass && `cell__wrapper_direction_${directionClass}`, isEqual && 'cell__wrapper-equal', isSameWidth && 'cell__wrapper-same-width'), children: [title && (jsxs("div", { className: "cell__data", style: dataStyles, children: [jsx(Text, { className: "cell__title", size: titleTextSize, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (jsx(Icon, { className: "cell__title-icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), (showTitleLabel || titleLabel) && (jsx(Label, { appearance: `${titleLabelAppearance} ${titleLabelAppearanceSize}`, className: "cell__title-label", size: titleLabelSize, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape }))] })), value && (jsxs("div", { className: "cell__data", style: dataStyles, children: [jsx(Text, { className: "cell__value", size: valueTextSize, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (jsx(Icon, { className: "cell__value-icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), (showValueLabel || valueLabel) && (jsx(Label, { appearance: `${valueLabelAppearance} ${valueLabelAppearanceSize}`, className: "cell__value-label", size: valueLabelSize, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape }))] }))] }), after && 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 && jsx("div", { className: "cell__before", children: before }), jsxs("div", { className: clsx('cell__wrapper', directionClass && `cell__wrapper_direction_${directionClass}`, isEqual && 'cell__wrapper-equal', isSameWidth && 'cell__wrapper-same-width'), children: [title && (jsxs("div", { className: "cell__data", style: dataStyles, children: [jsx(Text, { className: "cell__title", size: titleTextSize, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (jsx(Icon, { className: "cell__title-icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), (showTitleLabel || titleLabel) && (jsx(Label, { appearance: `${titleLabelAppearance} ${titleLabelAppearanceSize}`, className: "cell__title-label", size: titleLabelSize, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape }))] })), value && (jsxs("div", { className: "cell__data", style: dataStyles, children: [jsx(Text, { className: "cell__value", size: valueTextSize, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (jsx(Icon, { className: "cell__value-icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), (showValueLabel || valueLabel) && (jsx(Label, { appearance: `${valueLabelAppearance} ${valueLabelAppearanceSize}`, className: "cell__value-label", size: valueLabelSize, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape }))] }))] }), after && jsx("div", { className: "cell__after", children: after })] }));
 }
 
 export { Cell, cellAppearance, cellConfig };

package/dist/components/Checkbox.js

@@ -190,7 +190,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(appearance, checkboxConfig, isDisabled);
     const propsGenerator = 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;
@@ -209,7 +209,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, jsxs("div", { className: "checkbox__item", children: [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 }), jsx("div", { className: clsx('checkbox__state', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: "\u00A0" }), 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, jsxs("div", { className: "checkbox__item", children: [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 }), jsx("div", { className: clsx('checkbox__state', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: "\u00A0" }), jsx("div", { className: clsx(!indeterminate
                             ? 'checkbox__state-checkmark'
                             : 'checkbox__state-indeterminate', (checked || indeterminate) &&
                             fillCheckmarkClass &&

package/dist/components/Checkmark.js

@@ -113,7 +113,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(appearance, checkmarkConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, borderWidthClass, checkmarkFillClass, sizeClass, } = propsGenerator;
@@ -130,7 +130,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) && (jsx("div", { className: clsx('checkmark__icon', `svg_path_fill_${checkmarkFillClass}`), children: jsx("svg", { width: "32", height: "24", fill: "none", viewBox: "0 0 32 24", xmlns: "http://www.w3.org/2000/svg", children: 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) && (jsx("div", { className: clsx('checkmark__icon', `svg_path_fill_${checkmarkFillClass}`), children: jsx("svg", { width: "32", height: "24", fill: "none", viewBox: "0 0 32 24", xmlns: "http://www.w3.org/2000/svg", children: 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" }) }) })) }));
 }
 
 export { Checkmark, checkmarkAppearance, checkmarkConfig };

package/dist/components/Chips.js

@@ -1,4 +1,4 @@
-export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_BgECuDPT.js';
+export { C as Chips, b as ChipsGroup, a as chipsAppearance, c as chipsConfig } from '../ChipsGroup_es_BOaDqAo8.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
@@ -18,9 +18,9 @@ import '../hooks/useStyles/styleAttributes.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
-import '../Icon_es_BstDGBF3.js';
+import '../Icon_es_Banbw98_.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_P2b6ya7P.js';
+import '../Link_es_Bt-Bhy3t.js';
 import '../Text_es_DaYcLe4H.js';

package/dist/components/Choice.js

@@ -4,8 +4,8 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { I as Icon } from '../Icon_es_BstDGBF3.js';
-import { L as Loader } from '../Loader_es_wjTqawH6.js';
+import { I as Icon } from '../Icon_es_Banbw98_.js';
+import { L as Loader } from '../Loader_es_Csp5tr40.js';
 import { T as Text } from '../Text_es_DaYcLe4H.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -23,7 +23,7 @@ import 'lodash/maxBy';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_P2b6ya7P.js';
+import '../Link_es_Bt-Bhy3t.js';
 
 const choiceAppearanceDefault = {
     defaultMutedPrimary: {

package/dist/components/Code.js

@@ -148,7 +148,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] = useState(initialValue);
     const appearanceConfig = useAppearanceConfig(appearance, codeConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
@@ -169,7 +169,7 @@ function Code(props) {
     useEffect(() => {
         onChange && onChange(otp);
     }, [otp]);
-    return (jsxs("div", { className: clsx(className, 'code', widthClass, sizeClass && `code_size_${sizeClass}`), children: [before, 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 (jsxs("div", { className: clsx(className, 'code', widthClass, sizeClass && `code_size_${sizeClass}`), "data-testid": dataTestId, "data-tour": dataTour, children: [before, 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] }));
 }
 
 export { Code, codeAppearance, codeConfig };