@itcase/ui 1.9.31 → 1.9.34

package/dist/components/Logo.js

@@ -4,7 +4,7 @@ import { urlWithAssetPrefix } from '../hoc/urlWithAssetPrefix.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { a as LinkWrapper } from '../Link_es_P2b6ya7P.js';
+import { a as LinkWrapper } from '../Link_es_Bt-Bhy3t.js';
 import 'react';
 import '@itcase/common';
 import '../context/UrlAssetPrefix.js';
@@ -28,12 +28,12 @@ const logoConfig = {
     },
 };
 const Logo = urlWithAssetPrefix(function Logo(props) {
-    const { className, appearance, href, link } = props;
+    const { appearance, className, dataTestId, dataTour, href, link } = props;
     const appearanceConfig = useAppearanceConfig(appearance, logoConfig);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { alignClass, alignDirectionClass, alignItemsClass, src, title, alt, sizeClass, widthClass, } = propsGenerator;
     const { styles: logo } = useStyles(props);
-    return (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 ? (jsx(LinkWrapper, { className: "logo__link", href: link || href, children: jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title }) })) : (jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title })) }));
+    return (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 ? (jsx(LinkWrapper, { className: "logo__link", href: link || href, children: jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title }) })) : (jsx("img", { className: "logo__image", src: src, title: title || alt, alt: alt || title })) }));
 });
 
 export { Logo, logoConfig };

package/dist/components/MenuItem.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, T as Tooltip } from '../Icon_es_BstDGBF3.js';
-import { L as Link } from '../Link_es_P2b6ya7P.js';
+import { I as Icon, T as Tooltip } from '../Icon_es_Banbw98_.js';
+import { L as Link } from '../Link_es_Bt-Bhy3t.js';
 import { T as Text } from '../Text_es_DaYcLe4H.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';

package/dist/components/Modal.js

@@ -6,9 +6,9 @@ import { icons24, icons32, icons40 } from '@itcase/icons/default';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { b as Title, I as Icon } from '../Icon_es_BstDGBF3.js';
+import { b as Title, I as Icon } from '../Icon_es_Banbw98_.js';
 import { O as Overlay } from '../Overlay_es_dNz3djDB.js';
-import { L as Loader } from '../Loader_es_wjTqawH6.js';
+import { L as Loader } from '../Loader_es_Csp5tr40.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -25,7 +25,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';
 import '../Text_es_DaYcLe4H.js';
 
 const modalAppearanceShape = {
@@ -140,19 +140,12 @@ const Modal = React.forwardRef(function Modal(props, ref) {
     const [modalElement, setModalElement] = useState(null);
     const [isOpen, setIsOpen] = useState(initialIsOpen);
     const modalContentRef = useRef(null);
-    // const modalOverlayRef = useRef(null)
     const addModalProps = 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) {
@@ -162,46 +155,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 = useCallback(() => {
         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 = 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 = useCallback(() => {
@@ -222,6 +196,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);
@@ -247,18 +222,14 @@ const Modal = React.forwardRef(function Modal(props, ref) {
             window.removeEventListener('click', handleClickOutside);
         };
     }, [onCloseModal, isCloseOnBlur, isOpen, modalElement]);
-    // Save ref things
     useImperativeHandle(ref, () => ({ modalElement, openModal, closeModal, isOpen }), [isOpen, openModal, closeModal, modalElement]);
     const appearanceConfig = useAppearanceConfig(appearance, modalConfig, isDisabled);
     const propsGenerator = 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(props);
-    // Use a portal to render the children into the element
     return (modalElement &&
-        ReactDOM.createPortal(
-        // Any valid React child: JSX, strings, arrays, etc.
-        isOpen ? (jsxs(React.Fragment, { children: [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) && (jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsx(Title, { width: titleTextWidth, flex: "1", size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsx("div", { className: "modal__close", onClick: closeModal, children: jsx(Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? icons24.Action.Close }) }))] })), jsx("div", { className: "modal__content-wrapper", children: children })] }), jsx(Overlay, { className: "modal__overlay", 
+        ReactDOM.createPortal(isOpen ? (jsxs(React.Fragment, { children: [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) && (jsxs("div", { className: clsx('modal__header', fillClass && `fill_${fillClass}`), children: [title && (jsx(Title, { width: titleTextWidth, flex: "1", size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), closeIcon && (jsx("div", { className: "modal__close", onClick: closeModal, children: jsx(Icon, { appearance: `${closeIconAppearance} ${closeIconAppearanceSize}`, fillSize: closeIconFillSize, iconSize: closeIconSize, shape: closeIconShape, SvgImage: closeIconImage ?? icons24.Action.Close }) }))] })), jsx("div", { className: "modal__content-wrapper", children: children })] }), jsx(Overlay, { className: "modal__overlay", 
                     // ref={modalOverlayRef}
                     fill: overlayFill, opacity: overlayOpacity, isOverlay: isOverlay, onClick: handleClickOverlay })] })) : null, 
         // A DOM element

package/dist/components/ModalSheetBottom.js

@@ -5,7 +5,7 @@ import { Sheet } from 'react-modal-sheet';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { b as Title } from '../Icon_es_BstDGBF3.js';
+import { b as Title } from '../Icon_es_Banbw98_.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -22,7 +22,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';
 import '../Text_es_DaYcLe4H.js';
 
 const modalSheetBottomAppearanceSize = {
@@ -43,7 +43,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] = useState(initialIsOpen);
     const openModalSheetBottom = useCallback(() => {
         setIsOpen(true);
@@ -64,7 +64,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(props);
-    return (jsxs(Sheet, { className: "modal-sheet-bottom", isOpen: isOpen, onClose: closeModalSheetBottom, ...props, children: [jsxs(Sheet.Container, { className: "modal-sheet-bottom__container", style: styles, children: [jsx(Sheet.Header, { className: "modal-sheet-bottom__header", children: closeButton && (jsx("div", { className: "modal-sheet-bottom__close", onClick: closeModalSheetBottom, children: closeButton })) }), jsx(Sheet.Content, { className: "modal-sheet-bottom__content", children: jsxs("div", { className: clsx('modal-sheet-bottom__content-wrapper', zeroPadding && 'modal-sheet-bottom__content-reset-padding'), children: [title && (jsx(Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), children] }) })] }), jsx(Sheet.Backdrop, { className: "modal-sheet-bottom__backdrop", onClick: closeModalSheetBottom })] }));
+    return (jsxs(Sheet, { className: "modal-sheet-bottom", "data-testid": dataTestId, "data-tour": dataTour, isOpen: isOpen, onClose: closeModalSheetBottom, ...props, children: [jsxs(Sheet.Container, { className: "modal-sheet-bottom__container", style: styles, children: [jsx(Sheet.Header, { className: "modal-sheet-bottom__header", children: closeButton && (jsx("div", { className: "modal-sheet-bottom__close", onClick: closeModalSheetBottom, children: closeButton })) }), jsx(Sheet.Content, { className: "modal-sheet-bottom__content", children: jsxs("div", { className: clsx('modal-sheet-bottom__content-wrapper', zeroPadding && 'modal-sheet-bottom__content-reset-padding'), children: [title && (jsx(Title, { className: "modal__title", width: titleTextWidth, size: titleTextSize, textColor: titleTextColor, textColorHover: titleTextColorHover, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title })), children] }) })] }), jsx(Sheet.Backdrop, { className: "modal-sheet-bottom__backdrop", onClick: closeModalSheetBottom })] }));
 });
 
 export { ModalSheetBottom, modalSheetBottomAppearance };

package/dist/components/Notification.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { L as Loader } from '../Loader_es_wjTqawH6.js';
+import { L as Loader } from '../Loader_es_Csp5tr40.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Button } from '../Button_es_y6hlih24.js';
-import { I as Icon } from '../Icon_es_BstDGBF3.js';
+import { B as Button } from '../Button_es_DH8hqqdN.js';
+import { I as Icon } from '../Icon_es_Banbw98_.js';
 import { T as Text } from '../Text_es_DaYcLe4H.js';
 import { icons24 } from '@itcase/icons/default';
 import { useNotifications, useNotificationsAPI } from '../context/Notifications.js';
@@ -22,7 +22,7 @@ import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
-import '../Link_es_P2b6ya7P.js';
+import '../Link_es_Bt-Bhy3t.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
@@ -190,8 +190,8 @@ function Notification(props) {
 function NotificationWrapper(props) {
     const notifications = useNotifications();
     const { hideNotifications } = useNotificationsAPI();
-    const { className } = props;
-    return (jsx("div", { className: clsx('notification', className), children: jsx("div", { className: "notification__wrapper", children: notifications.map((notification) => (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 (jsx("div", { className: clsx('notification', className), "data-testid": dataTestId, "data-tour": dataTour, children: jsx("div", { className: "notification__wrapper", children: notifications.map((notification) => (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))) }) }));
 }
 
 export { Notification, NotificationWrapper, notificationAppearance, notificationConfig };

package/dist/components/Pagination.js

@@ -6,8 +6,8 @@ import ReactPaginate from 'react-paginate';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { D as Dropdown, a as DropdownItem } from '../DropdownItem_es_B36TJ2oI.js';
-import { I as Icon } from '../Icon_es_BstDGBF3.js';
+import { D as Dropdown, a as DropdownItem } from '../DropdownItem_es_DgaoM2SE.js';
+import { I as Icon } from '../Icon_es_Banbw98_.js';
 import { T as Text } from '../Text_es_DaYcLe4H.js';
 import { icons14, icons24, icons16 } from '@itcase/icons/default';
 import 'lodash/camelCase';
@@ -23,11 +23,11 @@ import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
-import '../Divider_es_DNJg0mQR.js';
+import '../Divider_es_BlOJ77zx.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_P2b6ya7P.js';
+import '../Link_es_Bt-Bhy3t.js';
 
 const paginationAppearanceAccent = {
     accent: {

package/dist/components/Radio.js

@@ -178,7 +178,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(appearance, radioConfig, isDisabled);
     const propsGenerator = 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;
@@ -195,7 +195,7 @@ function Radio(props) {
             ? borderRadioColorHoverClass &&
                 `radio_border-color_hover_${borderRadioColorHoverClass}`
             : borderRadioColorActiveHoverClass &&
-                `radio_border-color_active_hover_${borderRadioColorActiveHoverClass}`), htmlFor: id, children: [jsxs("div", { className: clsx('radio__item'), children: [jsx("input", { id: String(id), className: "radio__input", type: "radio", checked: checked, disabled: isDisabled && 'disabled', value: value, onChange: onChange }), jsx("div", { className: clsx('radio__state', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: "\u00A0" }), jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && `fill_${fillCheckmarkClass}`), children: "\u00A0" })] }), label && (jsx(Text, { className: "radio__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsx(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: [jsxs("div", { className: clsx('radio__item'), children: [jsx("input", { id: String(id), className: "radio__input", type: "radio", checked: checked, disabled: isDisabled && 'disabled', value: value, onChange: onChange }), jsx("div", { className: clsx('radio__state', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`), children: "\u00A0" }), jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && `fill_${fillCheckmarkClass}`), children: "\u00A0" })] }), label && (jsx(Text, { className: "radio__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsx(Text, { className: "radio__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] }));
 }
 
 export { Radio, radioAppearance, radioConfig };

package/dist/components/RangeSlider.js

@@ -19,7 +19,7 @@ import '../hooks/useStyles/styleAttributes.js';
 import '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(props);
     const { fillClass, fillHandleClass, fillHandleDraggingClass, fillHandleDraggingHoverClass, fillHandleHoverClass, fillRailClass, fillTrackClass, shapeClass, widthClass, } = propsGenerator;
     // @ts-expect-error
@@ -27,7 +27,7 @@ function RangeSlider(props) {
     return (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 && jsx("div", { className: "range-slider__before", children: before }), 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 && 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 && jsx("div", { className: "range-slider__before", children: before }), 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 && jsx("div", { className: "range-slider__after", children: after })] }));
 }
 
 export { RangeSlider };

package/dist/components/Response.js

@@ -6,8 +6,8 @@ import { urlWithAssetPrefix } from '../hoc/urlWithAssetPrefix.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Button } from '../Button_es_y6hlih24.js';
-import { G as Group } from '../Group_es_C69f2Dom.js';
+import { B as Button } from '../Button_es_DH8hqqdN.js';
+import { G as Group } from '../Group_es_Dml1c8Cz.js';
 import { T as Text } from '../Text_es_DaYcLe4H.js';
 import '@itcase/common';
 import '../context/UrlAssetPrefix.js';
@@ -23,10 +23,10 @@ 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 '../Link_es_P2b6ya7P.js';
-import '../Loader_es_wjTqawH6.js';
+import '../Link_es_Bt-Bhy3t.js';
+import '../Loader_es_Csp5tr40.js';
 
 const responseAppearanceConfirm = {
     confirm: {
@@ -213,10 +213,10 @@ const responseConfig = {
     },
 };
 const Response = 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(appearance, responseConfig);
     const propsGenerator = 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 = useMemo(() => {
         const src = imageSrc || svgSrc;
@@ -232,13 +232,6 @@ const Response = urlWithAssetPrefix(function Response(props) {
             return 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 jsx("img", { src: src });
         }
         return null;
@@ -249,7 +242,7 @@ const Response = urlWithAssetPrefix(function Response(props) {
                 primaryButton ||
                 secondaryButtonLabel ||
                 secondaryButton ||
-                appearanceConfig) && (jsxs(Group, { className: "response__button", width: "fill", children: [primaryButtonLabel ? (jsx(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 ? (jsx(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) && (jsxs(Group, { className: "response__button", width: "fill", children: [primaryButtonLabel ? (jsx(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 ? (jsx(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/components/SVGContent.js

@@ -21,12 +21,12 @@ import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
 
 const SVGContent = urlWithAssetPrefix(function SVGContent(props) {
-    const { className, src, SvgImage } = props;
+    const { className, dataTestId, dataTour, src, SvgImage } = props;
     const propsGenerator = useDevicePropsGenerator(props);
     const { svgFillClass, svgFillHoverClass } = propsGenerator;
     // @ts-expect-error
     const { styles: svgContentStyles } = useStyles(props);
-    return (jsxs("div", { className: clsx(className, 'svg-content', svgFillClass && `svg_fill_${svgFillClass}`, svgFillHoverClass && `svg_fill_hover_${svgFillHoverClass}`), style: svgContentStyles, children: [src && jsx(SVG, { src: src }), SvgImage && jsx(SvgImage, {})] }));
+    return (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 && jsx(SVG, { src: src }), SvgImage && jsx(SvgImage, {})] }));
 });
 
 export { SVGContent };

package/dist/components/ScrollOnDrag.js

@@ -20,7 +20,7 @@ import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
 
 function ScrollOnDrag(props) {
-    const { className, scrollContainerProps, isScrollbar, children } = props;
+    const { className, dataTestId, dataTour, scrollContainerProps, isScrollbar, children, } = props;
     const propsGenerator = useDevicePropsGenerator(props);
     const { ref } = useScrollContainer();
     const { fillClass, fillHoverClass, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, heightClass, widthClass = 'fill', } = propsGenerator;
@@ -29,7 +29,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 (jsx(ScrollOnDragWrapper, { ...fixedProps, children: 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: jsx(ScrollContainer, { className: clsx(!isScrollbar && 'scroll-on-drag__wrapper'), ref: ref, ...scrollContainerProps, style: scrollContainerStyles, children: children }) }) }));
+    return (jsx(ScrollOnDragWrapper, { ...fixedProps, children: 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: jsx(ScrollContainer, { className: clsx(!isScrollbar && 'scroll-on-drag__wrapper'), ref: ref, ...scrollContainerProps, style: scrollContainerStyles, children: children }) }) }));
 }
 
 export { ScrollOnDrag };

package/dist/components/ScrollToView.js

@@ -19,13 +19,13 @@ import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
 
 const ScrollToView = 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(props);
     const { directionClass, justifyContentClass, alignClass, alignDirectionClass, alignItemsClass, alignSelfClass, textColorActiveClass, textColorClass, textColorHoverClass, heightClass, widthClass, } = propsGenerator;
     const { styles: scrollToViewStyles } = useStyles(props);
     return (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 }));
 });
 
 export { ScrollToView };

package/dist/components/Scrollbar.js

@@ -1,4 +1,4 @@
-export { S as Scrollbar } from '../Scrollbar_es_CcMgNvGi.js';
+export { S as Scrollbar } from '../Scrollbar_es_CKTh3pew.js';
 import 'react/jsx-runtime';
 import 'clsx';
 import 'react-scrollbars-custom';

package/dist/components/Search.js

@@ -5,9 +5,9 @@ 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 { I as Icon } from '../Icon_es_Banbw98_.js';
 import { T as Text } from '../Text_es_DaYcLe4H.js';
-import { S as Scrollbar } from '../Scrollbar_es_CcMgNvGi.js';
+import { S as Scrollbar } from '../Scrollbar_es_CKTh3pew.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -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';
 import 'react-scrollbars-custom';
 
 const searchAppearanceDefault = {
@@ -207,7 +207,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 = useCallback((event) => {
         onChange && onChange(event.target.value);
     }, [onChange]);
@@ -222,7 +222,7 @@ const SearchInput = React.forwardRef(function SearchInput(props, ref) {
     const propsGenerator = 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(props);
-    return (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) && (jsx(Icon, { className: "search-input__icon-before", size: iconBeforeSize, iconFill: iconBeforeFill, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxs("div", { className: clsx('search-input__wrapper', inputFillClass && `fill_${inputFillClass}`), children: [jsx("input", { className: clsx('search-input__value', (inputTextSizeClass ||
+    return (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) && (jsx(Icon, { className: "search-input__icon-before", size: iconBeforeSize, iconFill: iconBeforeFill, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), jsxs("div", { className: clsx('search-input__wrapper', inputFillClass && `fill_${inputFillClass}`), children: [jsx("input", { className: clsx('search-input__value', (inputTextSizeClass ||
                             inputTextWeightClass ||
                             inputTextColorClass ||
                             inputTextStyleClass) &&
@@ -234,10 +234,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(props);
     const { fillClass, shapeClass, shapeStrengthClass } = propsGenerator;
-    return (jsx("div", { className: clsx(className, 'search-result', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`), children: jsxs("div", { className: "search-result__wrapper", children: [before, React.Children.toArray(children).filter(Boolean).length && (jsx(Scrollbar, { scrollHeight: scrollHeight ? `${scrollHeight}px` : '300px', children: children })), after] }) }));
+    return (jsx("div", { className: clsx(className, 'search-result', shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, fillClass && `fill_${fillClass}`), "data-testid": dataTestId, "data-tour": dataTour, children: jsxs("div", { className: "search-result__wrapper", children: [before, React.Children.toArray(children).filter(Boolean).length && (jsx(Scrollbar, { scrollHeight: scrollHeight ? `${scrollHeight}px` : '300px', children: children })), after] }) }));
 });
 
 export { SearchInput, SearchResult, searchAppearance, searchInputConfig };

package/dist/components/Segmented.js

@@ -1,28 +1,28 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useMemo, createRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
-import { I as Icon } from '../Icon_es_BstDGBF3.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
+import { I as Icon } from '../Icon_es_Banbw98_.js';
 import { T as Text } from '../Text_es_DaYcLe4H.js';
-import 'react-inlinesvg';
-import '../hoc/urlWithAssetPrefix.js';
-import '@itcase/common';
-import '../context/UrlAssetPrefix.js';
-import '../hooks/useStyles/useStyles.js';
 import 'lodash/camelCase';
-import 'lodash/maxBy';
+import 'lodash/castArray';
 import 'lodash/upperFirst';
 import '../context/Notifications.js';
 import 'uuid';
+import '@itcase/common';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Link_es_P2b6ya7P.js';
-import 'lodash/castArray';
+import 'react-inlinesvg';
+import '../hoc/urlWithAssetPrefix.js';
+import '../context/UrlAssetPrefix.js';
+import '../hooks/useStyles/useStyles.js';
+import 'lodash/maxBy';
+import '../Link_es_Bt-Bhy3t.js';
 
 const segmentedAppearanceDefault = {
     defaultPrimary: {
@@ -219,7 +219,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 = useRef(null);
     const segmentsRefs = useMemo(() => new Map(segments.map((item) => [item.value, createRef()])), [segments]);
     const onChangeValue = useCallback((item) => {
@@ -241,7 +241,7 @@ const Segmented = (props) => {
     const appearanceConfig = useAppearanceConfig(appearance, segmentedConfig, isDisabled);
     const propsGenerator = 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 (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: jsx("div", { className: "segmented__wrapper", children: jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments?.map((item) => {
+    return (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: jsx("div", { className: "segmented__wrapper", children: jsxs("div", { className: clsx('segmented__wrapper-inner'), children: [segments?.map((item) => {
                         const isActive = String(activeSegment?.value) === String(item.value);
                         return (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 &&

package/dist/components/Select.js

@@ -1,4 +1,4 @@
-export { a as Select, S as SelectClearIndicator, b as SelectControl, c as SelectDropdownIndicator, d as SelectGroupHeading, e as SelectIndicatorsContainer, f as SelectInput, g as SelectMenu, h as SelectMultiValueContainer, i as SelectMultiValueLabel, j as SelectMultiValueRemove, k as SelectOption, l as SelectPlaceholder, m as SelectSingleValue, n as SelectValueContainer, s as selectConfig } from '../SelectContainer_es_CcYDHcBP.js';
+export { a as Select, S as SelectClearIndicator, b as SelectControl, c as SelectDropdownIndicator, d as SelectGroupHeading, e as SelectIndicatorsContainer, f as SelectInput, g as SelectMenu, h as SelectMultiValueContainer, i as SelectMultiValueLabel, j as SelectMultiValueRemove, k as SelectOption, l as SelectPlaceholder, m as SelectSingleValue, n as SelectValueContainer, s as selectConfig } from '../SelectContainer_es_BlhjV0hm.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
@@ -18,15 +18,15 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Group_es_C69f2Dom.js';
+import '../Group_es_Dml1c8Cz.js';
 import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../Text_es_DaYcLe4H.js';
 import '@itcase/icons/default';
-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 '../Loader_es_wjTqawH6.js';
-import '../Divider_es_DNJg0mQR.js';
+import '../Link_es_Bt-Bhy3t.js';
+import '../Loader_es_Csp5tr40.js';
+import '../Divider_es_BlOJ77zx.js';