@itcase/ui 1.9.31 → 1.9.32

package/dist/cjs/components/List.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 Link = require('../../Link_cjs_qKXVfU8e.js');
+var Link = require('../../Link_cjs_DqNtNI23.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -236,18 +236,18 @@ const listAppearance = {
 const listConfig = {
     appearance: listAppearance};
 function List(props) {
-    const { className, type, appearance, style, children } = props;
+    const { appearance, className, dataTestId, dataTour, type, style, children } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, listConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, bulletFillClass, bulletSizeClass, bulletTextColorClass, sizeClass, } = propsGenerator;
     // @ts-expect-error
     const { styles: ulStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsx("ul", { className: clsx(className, 'list', bulletSizeClass && `list_bullet-size_${bulletSizeClass}`, bulletFillClass && `list_bullet-fill_${bulletFillClass}`, bulletTextColorClass &&
-            `list_bullet-text-color_${bulletTextColorClass}`, directionClass && `list_direction_${directionClass}`, sizeClass && `list_size_${sizeClass}`, style && `list_style_${style}`, type && `list_type_${type}`), style: ulStyles, children: children }));
+            `list_bullet-text-color_${bulletTextColorClass}`, directionClass && `list_direction_${directionClass}`, sizeClass && `list_size_${sizeClass}`, style && `list_style_${style}`, type && `list_type_${type}`), "data-testid": dataTestId, "data-tour": dataTour, style: ulStyles, children: children }));
 }
 
 function ListItem(props) {
-    const { className, text, href, link, before, after, children } = props;
+    const { className, dataTestId, dataTour, text, href, link, before, after, children, } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { fillClass, textColorClass, textStyleClass, textWeightClass } = propsGenerator;
     // @ts-expect-error
@@ -255,7 +255,7 @@ function ListItem(props) {
     if (link) {
         return (jsxRuntime.jsx("li", { className: clsx(className, 'list__item', 'list__item_type_link', textStyleClass && `text text-style_${textStyleClass}`, textWeightClass && `text text-weight_${textWeightClass}`, textColorClass && `text-color_${textColorClass}`, fillClass && `fill_${fillClass}`), style: liStyles, children: jsxRuntime.jsx(Link.Link, { className: clsx('list__item-link'), href: link || href, style: linkStyles, children: children || text }) }));
     }
-    return (jsxRuntime.jsxs("li", { className: clsx(className, 'list__item', textStyleClass && `text text-style_${textStyleClass}`, textWeightClass && `text text-weight_${textWeightClass}`, textColorClass && `text-color_${textColorClass}`, fillClass && `fill_${fillClass}`), style: liStyles, children: [before, children || text, after] }));
+    return (jsxRuntime.jsxs("li", { className: clsx(className, 'list__item', textStyleClass && `text text-style_${textStyleClass}`, textWeightClass && `text text-weight_${textWeightClass}`, textColorClass && `text-color_${textColorClass}`, fillClass && `fill_${fillClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: liStyles, children: [before, children || text, after] }));
 }
 
 exports.List = List;

package/dist/cjs/components/Loader.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Loader = require('../../Loader_cjs_B3j9ATrq.js');
+var Loader = require('../../Loader_cjs_CP1xKwb-.js');
 require('react/jsx-runtime');
 require('clsx');
 require('../hooks/useAppearanceConfig/useAppearanceConfig.js');

package/dist/cjs/components/Logo.js

@@ -6,7 +6,7 @@ var urlWithAssetPrefix = require('../hoc/urlWithAssetPrefix.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Link = require('../../Link_cjs_qKXVfU8e.js');
+var Link = require('../../Link_cjs_DqNtNI23.js');
 require('react');
 require('@itcase/common');
 require('../context/UrlAssetPrefix.js');
@@ -30,12 +30,12 @@ const logoConfig = {
     },
 };
 const Logo = urlWithAssetPrefix.urlWithAssetPrefix(function Logo(props) {
-    const { className, appearance, href, link } = props;
+    const { appearance, className, dataTestId, dataTour, href, link } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, logoConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { alignClass, alignDirectionClass, alignItemsClass, src, title, alt, sizeClass, widthClass, } = propsGenerator;
     const { styles: logo } = useStyles.useStyles(props);
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'logo', alignClass && `align_${alignClass}`, alignDirectionClass && `align_${alignDirectionClass}`, alignItemsClass && `logo_align-items_${alignItemsClass}`, sizeClass && `logo_size_${sizeClass}`, widthClass && `width_${widthClass}`), style: logo, children: link || href ? (jsxRuntime.jsx(Link.LinkWrapper, { className: "logo__link", href: link || href, children: jsxRuntime.jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title }) })) : (jsxRuntime.jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title })) }));
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'logo', alignClass && `align_${alignClass}`, alignDirectionClass && `align_${alignDirectionClass}`, alignItemsClass && `logo_align-items_${alignItemsClass}`, sizeClass && `logo_size_${sizeClass}`, widthClass && `width_${widthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: logo, children: link || href ? (jsxRuntime.jsx(Link.LinkWrapper, { className: "logo__link", href: link || href, children: jsxRuntime.jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title }) })) : (jsxRuntime.jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title })) }));
 });
 
 exports.Logo = Logo;

package/dist/cjs/components/MenuItem.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 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');
 require('lodash/camelCase');
 require('lodash/castArray');

package/dist/cjs/components/Modal.js

@@ -8,9 +8,9 @@ var _default = require('@itcase/icons/default');
 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 Overlay = require('../../Overlay_cjs_-hY4qbRG.js');
-var Loader = require('../../Loader_cjs_B3j9ATrq.js');
+var Loader = require('../../Loader_cjs_CP1xKwb-.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -27,7 +27,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');
 require('../../Text_cjs_Co2XdYF-.js');
 
 const modalAppearanceShape = {
@@ -142,19 +142,12 @@ const Modal = React.forwardRef(function Modal(props, ref) {
     const [modalElement, setModalElement] = React.useState(null);
     const [isOpen, setIsOpen] = React.useState(initialIsOpen);
     const modalContentRef = React.useRef(null);
-    // const modalOverlayRef = useRef(null)
     const addModalProps = React.useCallback((element) => {
-        // Change class need in "useEffect"
         if (isOpen) {
-            // Show modal
             element.classList.add('modal_state_visible');
-            // Scroll to opened modal
             if (isScrollOnOpen) {
-                // modalContentRef.current.style.top = `${window.visualViewport.pageTop}px`
                 element.scrollIntoView({ behavior: 'smooth', block: 'center' });
             }
-            // "setTimeout" in this implementation is needs for set focus on modal
-            // after "onMouseDown" event on button
             if (isSetFocusOnOpen) {
                 setTimeout(() => {
                     if (modalContentRef.current) {
@@ -164,46 +157,27 @@ const Modal = React.forwardRef(function Modal(props, ref) {
             }
         }
         else if (!element.children.length) {
-            // Hide modal if has no children
             element.classList.remove('modal_state_visible');
         }
     }, [isOpen, isScrollOnOpen, isSetFocusOnOpen]);
-    // Show modal with children content
     const openModal = React.useCallback(() => {
         React.startTransition(() => {
             setIsOpen(true);
         });
-        // Callback
         if (typeof onOpenModal === 'function') {
             onOpenModal();
         }
-        /* SHOW TARGET POPUP ABOVE OTHERS POPUPS F TARGET ALREADY OPENED
-        // If current modal is already opened
-        // Move content to end of modal root container. For order in DOM.
-        const modalContentElement = modalContentRef.current
-        if (modalContentElement) {
-          modalContentElement.parentNode.appendChild(modalContentElement)
-        }
-        // Also move overlay to end of modal root container after container
-        const modalOverlayElement = modalOverlayRef.current
-        if (modalOverlayElement) {
-          modalOverlayElement.parentNode.appendChild(modalOverlayElement)
-        }
-      */
     }, [onOpenModal]);
-    // Hide modal and unmount children content
     const closeModal = React.useCallback((event) => {
         if (event) {
-            // prettier-ignore
-            const hasRelatedTarget = (event.relatedTarget &&
+            const hasRelatedTarget = event.relatedTarget &&
                 modalElement &&
-                modalElement.contains(event.relatedTarget));
+                modalElement.contains(event.relatedTarget);
             if (hasRelatedTarget) {
                 return event;
             }
         }
         setIsOpen(false);
-        // Callback
         onCloseModal && onCloseModal();
     }, [modalElement, onCloseModal]);
     const handleClickOverlay = React.useCallback(() => {
@@ -224,6 +198,7 @@ const Modal = React.forwardRef(function Modal(props, ref) {
             classNameModal = clsx(className, 'no-print');
         }
         const element = getOrCreateModalElement(modalIdQuerySelector, classNameModal);
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         setModalElement(element);
         if (element) {
             addModalProps(element);
@@ -249,18 +224,14 @@ const Modal = React.forwardRef(function Modal(props, ref) {
             window.removeEventListener('click', handleClickOutside);
         };
     }, [onCloseModal, isCloseOnBlur, isOpen, modalElement]);
-    // Save ref things
     React.useImperativeHandle(ref, () => ({ modalElement, openModal, closeModal, isOpen }), [isOpen, openModal, closeModal, modalElement]);
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, modalConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { fillClass, titleTextColor, titleTextColorHover, titleTextSize, titleTextTruncate, titleTextWeight, titleTextWidth, titleTextWrap, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, overlayFill, overlayOpacity, shapeClass, shapeStrengthClass, sizeClass, closeIconAppearance, closeIconAppearanceSize, closeIconFillSize, closeIconImage, closeIconShape, closeIconSize, } = propsGenerator;
     // @ts-expect-error
     const { styles: modalStyles } = useStyles.useStyles(props);
-    // Use a portal to render the children into the element
     return (modalElement &&
-        ReactDOM.createPortal(
-        // Any valid React child: JSX, strings, arrays, etc.
-        isOpen ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { id: id, className: clsx('modal__content', absoluteHeader && 'modal__content-absolute-header', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-testid": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, children: [(title || closeIcon) && (jsxRuntime.jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsxRuntime.jsx(Icon.Title, { width: titleTextWidth, flex: "1", size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsxRuntime.jsx("div", { className: "modal__close", onClick: closeModal, children: jsxRuntime.jsx(Icon.Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? _default.icons24.Action.Close }) }))] })), jsxRuntime.jsx("div", { className: "modal__content-wrapper", children: children })] }), jsxRuntime.jsx(Overlay.Overlay, { className: "modal__overlay", 
+        ReactDOM.createPortal(isOpen ? (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("div", { id: id, className: clsx('modal__content', absoluteHeader && 'modal__content-absolute-header', !title && !closeIcon && 'modal__content-no-header', fillClass && `fill_${fillClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`, sizeClass && `modal_size_${sizeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, elevationClass && `elevation_${elevationClass}`, scroll && `modal-scroll_${scroll}`, stickyHeader && 'modal-scroll_header_sticky', isSkeleton && 'modal_skeleton'), ref: modalContentRef, "data-testid": dataTestId, "data-tour": dataTour, style: modalStyles, tabIndex: 0, children: [(title || closeIcon) && (jsxRuntime.jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsxRuntime.jsx(Icon.Title, { width: titleTextWidth, flex: "1", size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsxRuntime.jsx("div", { className: "modal__close", onClick: closeModal, children: jsxRuntime.jsx(Icon.Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? _default.icons24.Action.Close }) }))] })), jsxRuntime.jsx("div", { className: "modal__content-wrapper", children: children })] }), jsxRuntime.jsx(Overlay.Overlay, { className: "modal__overlay", 
                     // ref={modalOverlayRef}
                     fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: handleClickOverlay })] })) : null, 
         // A DOM element

package/dist/cjs/components/ModalSheetBottom.js

@@ -7,7 +7,7 @@ var reactModalSheet = require('react-modal-sheet');
 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');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -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');
 require('../../Text_cjs_Co2XdYF-.js');
 
 const modalSheetBottomAppearanceSize = {
@@ -45,7 +45,7 @@ const modalSheetBottomAppearance = {
 const modalSheetBottomConfig = {
     appearance: modalSheetBottomAppearance};
 const ModalSheetBottom = React.forwardRef(function Modal(props, ref) {
-    const { appearance, initialIsOpen, title, closeButton, isDisabled, onCloseModalSheetBottom, onOpenModalSheetBottom, children, } = props;
+    const { appearance, dataTestId, dataTour, initialIsOpen, title, closeButton, isDisabled, onCloseModalSheetBottom, onOpenModalSheetBottom, children, } = props;
     const [isOpen, setIsOpen] = React.useState(initialIsOpen);
     const openModalSheetBottom = React.useCallback(() => {
         setIsOpen(true);
@@ -66,7 +66,7 @@ const ModalSheetBottom = React.forwardRef(function Modal(props, ref) {
     const { titleTextColor, titleTextColorHover, titleTextSize, titleTextTruncate, titleTextWeight, titleTextWidth, titleTextWrap, zeroPadding, } = propsGenerator;
     // @ts-expect-error
     const { styles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs(reactModalSheet.Sheet, { className: "modal-sheet-bottom", isOpen: isOpen, onClose: closeModalSheetBottom, ...props, children: [jsxRuntime.jsxs(reactModalSheet.Sheet.Container, { className: "modal-sheet-bottom__container", style: styles, children: [jsxRuntime.jsx(reactModalSheet.Sheet.Header, { className: "modal-sheet-bottom__header", children: closeButton && (jsxRuntime.jsx("div", { className: "modal-sheet-bottom__close", onClick: closeModalSheetBottom, children: closeButton })) }), jsxRuntime.jsx(reactModalSheet.Sheet.Content, { className: "modal-sheet-bottom__content", children: jsxRuntime.jsxs("div", { className: clsx('modal-sheet-bottom__content-wrapper', zeroPadding && 'modal-sheet-bottom__content-reset-padding'), children: [title && (jsxRuntime.jsx(Icon.Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), children] }) })] }), jsxRuntime.jsx(reactModalSheet.Sheet.Backdrop, { className: "modal-sheet-bottom__backdrop", onClick: closeModalSheetBottom })] }));
+    return (jsxRuntime.jsxs(reactModalSheet.Sheet, { className: "modal-sheet-bottom", "data-testid": dataTestId, "data-tour": dataTour, isOpen: isOpen, onClose: closeModalSheetBottom, ...props, children: [jsxRuntime.jsxs(reactModalSheet.Sheet.Container, { className: "modal-sheet-bottom__container", style: styles, children: [jsxRuntime.jsx(reactModalSheet.Sheet.Header, { className: "modal-sheet-bottom__header", children: closeButton && (jsxRuntime.jsx("div", { className: "modal-sheet-bottom__close", onClick: closeModalSheetBottom, children: closeButton })) }), jsxRuntime.jsx(reactModalSheet.Sheet.Content, { className: "modal-sheet-bottom__content", children: jsxRuntime.jsxs("div", { className: clsx('modal-sheet-bottom__content-wrapper', zeroPadding && 'modal-sheet-bottom__content-reset-padding'), children: [title && (jsxRuntime.jsx(Icon.Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), children] }) })] }), jsxRuntime.jsx(reactModalSheet.Sheet.Backdrop, { className: "modal-sheet-bottom__backdrop", onClick: closeModalSheetBottom })] }));
 });
 
 exports.ModalSheetBottom = ModalSheetBottom;

package/dist/cjs/components/Notification.js

@@ -2,12 +2,12 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
-var Loader = require('../../Loader_cjs_B3j9ATrq.js');
+var Loader = require('../../Loader_cjs_CP1xKwb-.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Button = require('../../Button_cjs_DiaYeIs8.js');
-var Icon = require('../../Icon_cjs_D-jQrwjV.js');
+var Button = require('../../Button_cjs_BLuRWxbc.js');
+var Icon = require('../../Icon_cjs_CQxDPPGY.js');
 var Text = require('../../Text_cjs_Co2XdYF-.js');
 var _default = require('@itcase/icons/default');
 var Notifications = require('../context/Notifications.js');
@@ -24,7 +24,7 @@ require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
-require('../../Link_cjs_qKXVfU8e.js');
+require('../../Link_cjs_DqNtNI23.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
@@ -192,8 +192,8 @@ function Notification(props) {
 function NotificationWrapper(props) {
     const notifications = Notifications.useNotifications();
     const { hideNotifications } = Notifications.useNotificationsAPI();
-    const { className } = props;
-    return (jsxRuntime.jsx("div", { className: clsx('notification', className), children: jsxRuntime.jsx("div", { className: "notification__wrapper", children: notifications.map((notification) => (jsxRuntime.jsx(Notification, { id: notification.id, appearance: notification.appearance, type: notification.type, title: notification.title, status: notification.status, text: notification.text, buttonLabel: notification.buttonLabel, after: notification.after, closeIcon: notification.closeIcon, closeIconSrc: notification.closeIconSrc, isLoading: notification.isLoading, onClickButton: notification.onClickButton, onClickClose: hideNotifications }, notification.id))) }) }));
+    const { className, dataTestId, dataTour } = props;
+    return (jsxRuntime.jsx("div", { className: clsx('notification', className), "data-testid": dataTestId, "data-tour": dataTour, children: jsxRuntime.jsx("div", { className: "notification__wrapper", children: notifications.map((notification) => (jsxRuntime.jsx(Notification, { id: notification.id, appearance: notification.appearance, type: notification.type, title: notification.title, status: notification.status, text: notification.text, buttonLabel: notification.buttonLabel, after: notification.after, closeIcon: notification.closeIcon, closeIconSrc: notification.closeIconSrc, isLoading: notification.isLoading, onClickButton: notification.onClickButton, onClickClose: hideNotifications }, notification.id))) }) }));
 }
 
 exports.Notification = Notification;

package/dist/cjs/components/Pagination.js

@@ -8,8 +8,8 @@ var ReactPaginate = require('react-paginate');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var DropdownItem = require('../../DropdownItem_cjs_l_fnynBJ.js');
-var Icon = require('../../Icon_cjs_D-jQrwjV.js');
+var DropdownItem = require('../../DropdownItem_cjs_DUtEvTHI.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,11 +25,11 @@ require('../utils/setViewportProperty.js');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
-require('../../Divider_cjs_BZn2epqW.js');
+require('../../Divider_cjs_1fwsCxEb.js');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_qKXVfU8e.js');
+require('../../Link_cjs_DqNtNI23.js');
 
 const paginationAppearanceAccent = {
     accent: {

package/dist/cjs/components/Radio.js

@@ -180,7 +180,7 @@ const radioConfig = {
     },
 };
 function Radio(props) {
-    const { id, appearance, className, label, desc, checked, tag: Tag = 'label', value, isActive, isDisabled, isSkeleton, onChange, } = props;
+    const { id, appearance, className, dataTestId, dataTour, label, desc, checked, tag: Tag = 'label', value, isActive, isDisabled, isSkeleton, onChange, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, radioConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { fillCheckmarkClass, fillClass, fillHoverClass, fillRadioActiveClass, fillRadioActiveHoverClass, fillRadioClass, fillRadioHoverClass, labelTextColor, labelTextSize, labelTextWeight, descTextColor, descTextSize, descTextWeight, borderRadioColorActiveClass, borderRadioColorActiveHoverClass, borderRadioColorClass, borderRadioColorHoverClass, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
@@ -197,7 +197,7 @@ function Radio(props) {
             ? borderRadioColorHoverClass &&
                 `radio_border-color_hover_${borderRadioColorHoverClass}`
             : borderRadioColorActiveHoverClass &&
-                `radio_border-color_active_hover_${borderRadioColorActiveHoverClass}`), htmlFor: id, children: [jsxRuntime.jsxs("div", { className: clsx('radio__item'), children: [jsxRuntime.jsx("input", { id: String(id), className: "radio__input", type: "radio", checked: checked, disabled: isDisabled && 'disabled', value: value, onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('radio__state', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && `fill_${fillCheckmarkClass}`), children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "radio__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "radio__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] }));
+                `radio_border-color_active_hover_${borderRadioColorActiveHoverClass}`), "data-testid": dataTestId, "data-tour": dataTour, htmlFor: id, children: [jsxRuntime.jsxs("div", { className: clsx('radio__item'), children: [jsxRuntime.jsx("input", { id: String(id), className: "radio__input", type: "radio", checked: checked, disabled: isDisabled && 'disabled', value: value, onChange: onChange }), jsxRuntime.jsx("div", { className: clsx('radio__state', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: "\u00A0" }), jsxRuntime.jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && `fill_${fillCheckmarkClass}`), children: "\u00A0" })] }), label && (jsxRuntime.jsx(Text.Text, { className: "radio__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsxRuntime.jsx(Text.Text, { className: "radio__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] }));
 }
 
 exports.Radio = Radio;

package/dist/cjs/components/RangeSlider.js

@@ -21,7 +21,7 @@ require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
 
 function RangeSlider(props) {
-    const { className, min, max, disabled, pushable, range, step, value, vertical, before, after, set, onChangeSlider, children, } = props;
+    const { className, dataTestId, dataTour, min, max, disabled, pushable, range, step, value, vertical, before, after, set, onChangeSlider, children, } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { fillClass, fillHandleClass, fillHandleDraggingClass, fillHandleDraggingHoverClass, fillHandleHoverClass, fillRailClass, fillTrackClass, shapeClass, widthClass, } = propsGenerator;
     // @ts-expect-error
@@ -29,7 +29,7 @@ function RangeSlider(props) {
     return (jsxRuntime.jsxs("div", { className: clsx(className, 'range-slider', set && `range-slider_set_${set}`, fillClass && `fill_${fillClass}`, fillTrackClass && `range-slider-track-fill_${fillTrackClass}`, fillRailClass && `range-slider-rail-fill_${fillRailClass}`, fillHandleClass && `range-slider-handle-fill_${fillHandleClass}`, fillHandleHoverClass &&
             `range-slider-handle-fill-hover_${fillHandleHoverClass}`, fillHandleDraggingClass &&
             `range-slider-handle-dragging-fill_${fillHandleDraggingClass}`, fillHandleDraggingHoverClass &&
-            `range-slider-handle-dragging-fill-hover_${fillHandleDraggingHoverClass}`, shapeClass && `range-slider_shape_${shapeClass}`, widthClass && `width_${widthClass}`), style: rangeSliderStyles, children: [before && jsxRuntime.jsx("div", { className: "range-slider__before", children: before }), jsxRuntime.jsx(Slider, { className: "range-slider__wrapper", min: min, max: max, disabled: disabled, pushable: pushable, range: range, step: step, value: value, vertical: vertical, onChange: onChangeSlider }), children, after && jsxRuntime.jsx("div", { className: "range-slider__after", children: after })] }));
+            `range-slider-handle-dragging-fill-hover_${fillHandleDraggingHoverClass}`, shapeClass && `range-slider_shape_${shapeClass}`, widthClass && `width_${widthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: rangeSliderStyles, children: [before && jsxRuntime.jsx("div", { className: "range-slider__before", children: before }), jsxRuntime.jsx(Slider, { className: "range-slider__wrapper", min: min, max: max, disabled: disabled, pushable: pushable, range: range, step: step, value: value, vertical: vertical, onChange: onChangeSlider }), children, after && jsxRuntime.jsx("div", { className: "range-slider__after", children: after })] }));
 }
 
 exports.RangeSlider = RangeSlider;

package/dist/cjs/components/Response.js

@@ -8,8 +8,8 @@ var urlWithAssetPrefix = require('../hoc/urlWithAssetPrefix.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Button = require('../../Button_cjs_DiaYeIs8.js');
-var Group = require('../../Group_cjs_C1YVff0N.js');
+var Button = require('../../Button_cjs_BLuRWxbc.js');
+var Group = require('../../Group_cjs_CcDdC0Ua.js');
 var Text = require('../../Text_cjs_Co2XdYF-.js');
 require('@itcase/common');
 require('../context/UrlAssetPrefix.js');
@@ -25,10 +25,10 @@ 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('../../Link_cjs_qKXVfU8e.js');
-require('../../Loader_cjs_B3j9ATrq.js');
+require('../../Link_cjs_DqNtNI23.js');
+require('../../Loader_cjs_CP1xKwb-.js');
 
 const responseAppearanceConfirm = {
     confirm: {
@@ -215,10 +215,10 @@ const responseConfig = {
     },
 };
 const Response = urlWithAssetPrefix.urlWithAssetPrefix(function Response(props) {
-    const { appearance, className, width, height, title, desc, bottomButton, primaryButton, secondaryButton, before, after, isSkeleton, onClickSecondaryButton, } = props;
+    const { appearance, className, dataTestId, dataTour, width, height, title, desc, bottomButton, primaryButton, secondaryButton, before, after, isSkeleton, onClickSecondaryButton, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, responseConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    const { dataTestId, dataTour, fillClass, fillHoverClass, titleTextColor, titleTextSize, titleTextWeight, descTextColor, descTextSize, descTextWeight, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, heightClass, imageSrc, primaryButtonAfter, primaryButtonAppearance, primaryButtonBefore, primaryButtonFill, primaryButtonFillHover, primaryButtonLabel, primaryButtonLabelTextColor, primaryButtonLabelTextSize, primaryButtonShape, primaryButtonSize, primaryButtonWidth, secondaryButtonAfter, secondaryButtonAppearance, secondaryButtonBefore, secondaryButtonFill, secondaryButtonFillHover, secondaryButtonLabel, secondaryButtonLabelTextColor, secondaryButtonLabelTextSize, secondaryButtonShape, secondaryButtonSize, secondaryButtonWidth, shapeClass, shapeStrengthClass, svgFillClass, SvgImage, svgPathFillClass, svgSrc, widthClass, onClickPrimaryButton, } = propsGenerator;
+    const { fillClass, fillHoverClass, titleTextColor, titleTextSize, titleTextWeight, descTextColor, descTextSize, descTextWeight, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, heightClass, imageSrc, primaryButtonAfter, primaryButtonAppearance, primaryButtonBefore, primaryButtonFill, primaryButtonFillHover, primaryButtonLabel, primaryButtonLabelTextColor, primaryButtonLabelTextSize, primaryButtonShape, primaryButtonSize, primaryButtonWidth, secondaryButtonAfter, secondaryButtonAppearance, secondaryButtonBefore, secondaryButtonFill, secondaryButtonFillHover, secondaryButtonLabel, secondaryButtonLabelTextColor, secondaryButtonLabelTextSize, secondaryButtonShape, secondaryButtonSize, secondaryButtonWidth, shapeClass, shapeStrengthClass, svgFillClass, SvgImage, svgPathFillClass, svgSrc, widthClass, onClickPrimaryButton, } = propsGenerator;
     // TODO: use Icon instead?
     const ImageComponent = React.useMemo(() => {
         const src = imageSrc || svgSrc;
@@ -234,13 +234,6 @@ const Response = urlWithAssetPrefix.urlWithAssetPrefix(function Response(props)
             return jsxRuntime.jsx(Image, { ...sizes });
         }
         if (src) {
-            // if (src.endsWith('.svg') || src.startsWith('data:image/svg')) {
-            //   if (svgFillClass) {
-            //     return <SVG src={src} preProcessor={removeFillStroke} />
-            //   } else {
-            //     return <SVG src={src} />
-            //   }
-            // }
             return jsxRuntime.jsx("img", { src: src });
         }
         return null;
@@ -251,7 +244,7 @@ const Response = urlWithAssetPrefix.urlWithAssetPrefix(function Response(props)
                 primaryButton ||
                 secondaryButtonLabel ||
                 secondaryButton ||
-                appearanceConfig) && (jsxRuntime.jsxs(Group.Group, { className: "response__button", width: "fill", children: [primaryButtonLabel ? (jsxRuntime.jsx(Button.Button, { className: "response__button-item", appearance: primaryButtonAppearance, width: primaryButtonWidth || 'fill', size: primaryButtonSize, fill: primaryButtonFill, fillHover: primaryButtonFillHover, label: primaryButtonLabel, labelTextColor: primaryButtonLabelTextColor, labelTextSize: primaryButtonLabelTextSize, shape: primaryButtonShape, before: primaryButtonBefore, after: primaryButtonAfter, onClick: onClickPrimaryButton })) : (primaryButton), secondaryButtonLabel ? (jsxRuntime.jsx(Button.Button, { className: "response__button-item", appearance: secondaryButtonAppearance, width: secondaryButtonWidth || 'fill', size: secondaryButtonSize, fill: secondaryButtonFill, fillHover: secondaryButtonFillHover, label: secondaryButtonLabel, labelTextColor: secondaryButtonLabelTextColor, labelTextSize: secondaryButtonLabelTextSize, shape: secondaryButtonShape, before: secondaryButtonBefore, after: secondaryButtonAfter, onClick: onClickSecondaryButton })) : (secondaryButton)] })), after] }));
+                appearanceConfig) && (jsxRuntime.jsxs(Group.Group, { className: "response__button", width: "fill", children: [primaryButtonLabel ? (jsxRuntime.jsx(Button.Button, { appearance: primaryButtonAppearance, className: "response__button-item", width: primaryButtonWidth || 'fill', size: primaryButtonSize, fill: primaryButtonFill, fillHover: primaryButtonFillHover, label: primaryButtonLabel, labelTextColor: primaryButtonLabelTextColor, labelTextSize: primaryButtonLabelTextSize, shape: primaryButtonShape, before: primaryButtonBefore, after: primaryButtonAfter, onClick: onClickPrimaryButton })) : (primaryButton), secondaryButtonLabel ? (jsxRuntime.jsx(Button.Button, { appearance: secondaryButtonAppearance, className: "response__button-item", width: secondaryButtonWidth || 'fill', size: secondaryButtonSize, fill: secondaryButtonFill, fillHover: secondaryButtonFillHover, label: secondaryButtonLabel, labelTextColor: secondaryButtonLabelTextColor, labelTextSize: secondaryButtonLabelTextSize, shape: secondaryButtonShape, before: secondaryButtonBefore, after: secondaryButtonAfter, onClick: onClickSecondaryButton })) : (secondaryButton)] })), after] }));
 });
 
 const RESPONSE_MESSAGES = {

package/dist/cjs/components/SVGContent.js

@@ -23,12 +23,12 @@ require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
 
 const SVGContent = urlWithAssetPrefix.urlWithAssetPrefix(function SVGContent(props) {
-    const { className, src, SvgImage } = props;
+    const { className, dataTestId, dataTour, src, SvgImage } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { svgFillClass, svgFillHoverClass } = propsGenerator;
     // @ts-expect-error
     const { styles: svgContentStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'svg-content', svgFillClass && `svg_fill_${svgFillClass}`, svgFillHoverClass && `svg_fill_hover_${svgFillHoverClass}`), style: svgContentStyles, children: [src && jsxRuntime.jsx(SVG, { src: src }), SvgImage && jsxRuntime.jsx(SvgImage, {})] }));
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'svg-content', svgFillClass && `svg_fill_${svgFillClass}`, svgFillHoverClass && `svg_fill_hover_${svgFillHoverClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: svgContentStyles, children: [src && jsxRuntime.jsx(SVG, { src: src }), SvgImage && jsxRuntime.jsx(SvgImage, {})] }));
 });
 
 exports.SVGContent = SVGContent;

package/dist/cjs/components/ScrollOnDrag.js

@@ -22,7 +22,7 @@ require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
 
 function ScrollOnDrag(props) {
-    const { className, scrollContainerProps, isScrollbar, children } = props;
+    const { className, dataTestId, dataTour, scrollContainerProps, isScrollbar, children, } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { ref } = ScrollContainer.useScrollContainer();
     const { fillClass, fillHoverClass, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, heightClass, widthClass = 'fill', } = propsGenerator;
@@ -31,7 +31,7 @@ function ScrollOnDrag(props) {
     const ScrollOnDragWrapper = isScrollbar ? SimpleBar : React.Fragment;
     // fix to error 'Invalid prop `scrollableNodeProps` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.'
     const fixedProps = isScrollbar ? { scrollableNodeProps: { ref } } : {};
-    return (jsxRuntime.jsx(ScrollOnDragWrapper, { ...fixedProps, children: jsxRuntime.jsx("div", { className: clsx('scroll-on-drag', className, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, borderWidthClass && `border-width_${borderWidthClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, heightClass && `height_${heightClass}`, widthClass && `width_${widthClass}`), style: styles, children: jsxRuntime.jsx(ScrollContainer, { className: clsx(!isScrollbar && 'scroll-on-drag__wrapper'), ref: ref, ...scrollContainerProps, style: scrollContainerStyles, children: children }) }) }));
+    return (jsxRuntime.jsx(ScrollOnDragWrapper, { ...fixedProps, children: jsxRuntime.jsx("div", { className: clsx('scroll-on-drag', className, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, borderWidthClass && `border-width_${borderWidthClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, heightClass && `height_${heightClass}`, widthClass && `width_${widthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: styles, children: jsxRuntime.jsx(ScrollContainer, { className: clsx(!isScrollbar && 'scroll-on-drag__wrapper'), ref: ref, ...scrollContainerProps, style: scrollContainerStyles, children: children }) }) }));
 }
 
 exports.ScrollOnDrag = ScrollOnDrag;

package/dist/cjs/components/ScrollToView.js

@@ -21,13 +21,13 @@ require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
 
 const ScrollToView = reactScroll.ScrollLink(function ScrollToView(props) {
-    const { id, className, tag: Tag = 'div', children } = props;
+    const { id, className, dataTestId, dataTour, tag: Tag = 'div', children, } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { directionClass, justifyContentClass, alignClass, alignDirectionClass, alignItemsClass, alignSelfClass, textColorActiveClass, textColorClass, textColorHoverClass, heightClass, widthClass, } = propsGenerator;
     const { styles: scrollToViewStyles } = useStyles.useStyles(props);
     return (jsxRuntime.jsx(Tag, { id: id, className: clsx(className, 'scroll-to-view', alignItemsClass && `align-items_${alignItemsClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, alignDirectionClass && `align_${alignDirectionClass}`, alignClass && `align_${alignClass}`, textColorClass && `scroll-to-view_text-color_${textColorClass}`, textColorActiveClass &&
             `scroll-to-view_text-color_active_${textColorActiveClass}`, textColorHoverClass &&
-            `scroll-to-view_text-color_hover_${textColorHoverClass}`, justifyContentClass && `justify-content_${justifyContentClass}`, directionClass && `direction_${directionClass}`, alignSelfClass && `align-self_${alignSelfClass}`), style: Object.assign({}, scrollToViewStyles, props.style), onClick: props.onClick, children: children }));
+            `scroll-to-view_text-color_hover_${textColorHoverClass}`, justifyContentClass && `justify-content_${justifyContentClass}`, directionClass && `direction_${directionClass}`, alignSelfClass && `align-self_${alignSelfClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, scrollToViewStyles, props.style), onClick: props.onClick, children: children }));
 });
 
 exports.ScrollToView = ScrollToView;

package/dist/cjs/components/Scrollbar.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Scrollbar = require('../../Scrollbar_cjs_Cp-7v2Mt.js');
+var Scrollbar = require('../../Scrollbar_cjs_DHe1EK_B.js');
 require('react/jsx-runtime');
 require('clsx');
 require('react-scrollbars-custom');

package/dist/cjs/components/Search.js

@@ -7,9 +7,9 @@ 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 Scrollbar = require('../../Scrollbar_cjs_Cp-7v2Mt.js');
+var Scrollbar = require('../../Scrollbar_cjs_DHe1EK_B.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -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');
 require('react-scrollbars-custom');
 
 const searchAppearanceDefault = {
@@ -209,7 +209,7 @@ const searchInputConfig = {
     },
 };
 const SearchInput = React.forwardRef(function SearchInput(props, ref) {
-    const { dataTour, className, appearance, placeholder, value, before, after, isActive, isSkeleton, isDisabled, onChange, onClickClean, onFocus, onKeyDown, } = props;
+    const { appearance, className, dataTestId, dataTour, placeholder, value, before, after, isActive, isDisabled, isSkeleton, onClickClean, onChange, onFocus, onKeyDown, } = props;
     const onChangeSearchInput = React.useCallback((event) => {
         onChange && onChange(event.target.value);
     }, [onChange]);
@@ -224,7 +224,7 @@ const SearchInput = React.forwardRef(function SearchInput(props, ref) {
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { size, fillClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, iconAfter, iconAfterFill, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeSize, iconBeforeSrc, iconClear, iconClearFill, iconClearSize, iconClearSrc, inputFillClass, inputTextColorClass, inputTextSizeClass, inputTextStyleClass, inputTextWeightClass, placeholderTextColor, placeholderTextSize, placeholderTextStyle, placeholderTextWeight, shapeClass, shapeStrengthClass, widthClass, } = propsGenerator;
     const { styles: searchInputStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs("label", { dataTour: dataTour, className: clsx(className, 'search-input', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, widthClass && `width_${widthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, size && `search-input_size_${size}`, isSkeleton && `search-input_skeleton`), style: searchInputStyles, children: [before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "search-input__icon-before", size: iconBeforeSize, iconFill: iconBeforeFill, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxRuntime.jsxs("div", { className: clsx('search-input__wrapper', inputFillClass && `fill_${inputFillClass}`), children: [jsxRuntime.jsx("input", { className: clsx('search-input__value', (inputTextSizeClass ||
+    return (jsxRuntime.jsxs("label", { className: clsx(className, 'search-input', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, widthClass && `width_${widthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, size && `search-input_size_${size}`, isSkeleton && `search-input_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: searchInputStyles, children: [before, (iconBefore || iconBeforeSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "search-input__icon-before", size: iconBeforeSize, iconFill: iconBeforeFill, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxRuntime.jsxs("div", { className: clsx('search-input__wrapper', inputFillClass && `fill_${inputFillClass}`), children: [jsxRuntime.jsx("input", { className: clsx('search-input__value', (inputTextSizeClass ||
                             inputTextWeightClass ||
                             inputTextColorClass ||
                             inputTextStyleClass) &&
@@ -236,10 +236,10 @@ SearchInput.DEFAULT_REF_STATE = {
 };
 
 const SearchResult = React.forwardRef(function SearchResult(props) {
-    const { className, scrollHeight, before, after, children } = props;
+    const { className, dataTestId, dataTour, scrollHeight, before, after, children, } = props;
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { fillClass, shapeClass, shapeStrengthClass } = propsGenerator;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'search-result', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`), children: jsxRuntime.jsxs("div", { className: "search-result__wrapper", children: [before, React.Children.toArray(children).filter(Boolean).length && (jsxRuntime.jsx(Scrollbar.Scrollbar, { scrollHeight: scrollHeight ? `${scrollHeight}px` : '300px', children: children })), after] }) }));
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'search-result', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`), "data-testid": dataTestId, "data-tour": dataTour, children: jsxRuntime.jsxs("div", { className: "search-result__wrapper", children: [before, React.Children.toArray(children).filter(Boolean).length && (jsxRuntime.jsx(Scrollbar.Scrollbar, { scrollHeight: scrollHeight ? `${scrollHeight}px` : '300px', children: children })), after] }) }));
 });
 
 exports.SearchInput = SearchInput;

package/dist/cjs/components/Segmented.js

@@ -3,28 +3,28 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
-var Icon = require('../../Icon_cjs_D-jQrwjV.js');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
+var Icon = require('../../Icon_cjs_CQxDPPGY.js');
 var Text = require('../../Text_cjs_Co2XdYF-.js');
-require('react-inlinesvg');
-require('../hoc/urlWithAssetPrefix.js');
-require('@itcase/common');
-require('../context/UrlAssetPrefix.js');
-require('../hooks/useStyles/useStyles.js');
 require('lodash/camelCase');
-require('lodash/maxBy');
+require('lodash/castArray');
 require('lodash/upperFirst');
 require('../context/Notifications.js');
 require('uuid');
+require('@itcase/common');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries/useMediaQueries.js');
 require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Link_cjs_qKXVfU8e.js');
-require('lodash/castArray');
+require('react-inlinesvg');
+require('../hoc/urlWithAssetPrefix.js');
+require('../context/UrlAssetPrefix.js');
+require('../hooks/useStyles/useStyles.js');
+require('lodash/maxBy');
+require('../../Link_cjs_DqNtNI23.js');
 
 const segmentedAppearanceDefault = {
     defaultPrimary: {
@@ -221,7 +221,7 @@ const segmentedConfig = {
     },
 };
 const Segmented = (props) => {
-    const { appearance, className, name, activeSegment = {}, segments, isDisabled, isSkeleton, setActiveSegment, onChange, } = props;
+    const { appearance, className, dataTestId, dataTour, name, activeSegment = {}, segments, isDisabled, isSkeleton, setActiveSegment, onChange, } = props;
     const controlRef = React.useRef(null);
     const segmentsRefs = React.useMemo(() => new Map(segments.map((item) => [item.value, React.createRef()])), [segments]);
     const onChangeValue = React.useCallback((item) => {
@@ -243,7 +243,7 @@ const Segmented = (props) => {
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, segmentedConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
     const { fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, labelTextActiveColor, labelTextActiveColorHover, labelTextColor, labelTextColorHover, labelTextSize, labelTextWrap, borderColorClass, borderTypeClass, borderWidthClass, iconFill, iconFillActive, iconFillDisabled, iconSize, indicatorFillClass, shapeClass, shapeStrengthClass, sizeClass, widthClass, } = propsGenerator;
-    return (jsxRuntime.jsx("div", { className: clsx(className, 'segmented', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, widthClass && `segmented_width_${widthClass}`, sizeClass && `segmented_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, isSkeleton && `segmented_skeleton`), ref: controlRef, children: jsxRuntime.jsx("div", { className: "segmented__wrapper", children: jsxRuntime.jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments?.map((item) => {
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'segmented', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`, widthClass && `segmented_width_${widthClass}`, sizeClass && `segmented_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, isSkeleton && `segmented_skeleton`), ref: controlRef, "data-testid": dataTestId, "data-tour": dataTour, children: jsxRuntime.jsx("div", { className: "segmented__wrapper", children: jsxRuntime.jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments?.map((item) => {
                         const isActive = String(activeSegment?.value) === String(item.value);
                         return (jsxRuntime.jsx("div", { className: clsx('segmented__item', !item.label && 'segmented__item_icon', sizeClass && `segmented__item_size_${sizeClass}`, isActive && 'segmented__item_active', !isActive && isDisabled && 'segmented__item_state_disabled', isActive &&
                                 isDisabled &&