@itcase/ui 1.9.36 → 1.9.38

package/dist/cjs/components/Response.js

@@ -8,9 +8,9 @@ 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_BLuRWxbc.js');
-var Group = require('../../Group_cjs_CcDdC0Ua.js');
-var Text = require('../../Text_cjs_Co2XdYF-.js');
+var Button = require('../../Button_cjs_Ivarkwy6.js');
+var Group = require('../../Group_cjs_xCUYKUcc.js');
+var Text = require('../../Text_cjs_erTy2pUN.js');
 require('@itcase/common');
 require('../context/UrlAssetPrefix.js');
 require('lodash/camelCase');
@@ -25,23 +25,23 @@ require('../utils/setViewportProperty.js');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
-require('../../Icon_cjs_CQxDPPGY.js');
+require('../utils/mergeAppearanceKeys.js');
+require('../../Icon_cjs_D20B2YBo.js');
 require('react-inlinesvg');
-require('../../Link_cjs_DqNtNI23.js');
-require('../../Loader_cjs_CP1xKwb-.js');
+require('../../Link_cjs_DXBqPjwm.js');
+require('../../Loader_cjs_DMIUN6_q.js');
 
 const responseAppearanceConfirm = {
     confirm: {
         fill: 'surfacePrimary',
         titleTextColor: 'surfaceTextPrimary',
         titleTextSize: 'xxl',
-        labelTextColor: 'surfaceTextPrimary',
         descTextSize: 'm',
-        imageSrc: index.responseIcon.Confirm,
+        imageSrc: String(index.responseIcon.Confirm),
         primaryButtonAppearance: 'accentPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'surfaceTertiary',
-        svgPathFill: 'surfaceItemQuaternary',
+        svgPathFill: 'surfaceQuaternary',
     },
 };
 
@@ -50,9 +50,8 @@ const responseAppearanceDanger = {
         fill: 'surfacePrimary',
         titleTextColor: 'surfaceTextPrimary',
         titleTextSize: 'xxl',
-        labelTextColor: 'surfaceTextPrimary',
         descTextSize: 'm',
-        imageSrc: index.responseIcon.Danger,
+        imageSrc: String(index.responseIcon.Danger),
         primaryButtonAppearance: 'dangerPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'dangerPrimary',
@@ -65,9 +64,8 @@ const responseAppearanceEmpty = {
         fill: 'surfacePrimary',
         titleTextColor: 'surfaceTextPrimary',
         titleTextSize: 'xxl',
-        labelTextColor: 'surfaceTextPrimary',
         descTextSize: 'm',
-        imageSrc: index.responseIcon.Empty,
+        imageSrc: String(index.responseIcon.Empty),
         primaryButtonAppearance: 'accentPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'surfaceTertiary',
@@ -80,13 +78,12 @@ const responseAppearanceError = {
         fill: 'surfacePrimary',
         titleTextColor: 'surfaceTextPrimary',
         titleTextSize: 'xxl',
-        labelTextColor: 'surfaceTextPrimary',
         descTextSize: 'm',
-        imageSrc: index.responseIcon.Error,
+        imageSrc: String(index.responseIcon.Error),
         primaryButtonAppearance: 'errorPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'errorPrimary',
-        svgPathFill: 'errorItemPrimary',
+        svgPathFill: 'errorPrimary',
     },
 };
 
@@ -95,13 +92,12 @@ const responseAppearanceFail = {
         fill: 'surfacePrimary',
         titleTextColor: 'surfaceTextPrimary',
         titleTextSize: 'xxl',
-        labelTextColor: 'surfaceTextPrimary',
         descTextSize: 'm',
-        imageSrc: index.responseIcon.Fail,
+        imageSrc: String(index.responseIcon.Fail),
         primaryButtonAppearance: 'accentPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'surfaceTertiary',
-        svgPathFill: 'surfaceItemQuaternary',
+        svgPathFill: 'surfaceQuaternary',
     },
 };
 
@@ -110,13 +106,12 @@ const responseAppearanceNothingFound = {
         fill: 'surfacePrimary',
         titleTextColor: 'surfaceTextPrimary',
         titleTextSize: 'xxl',
-        labelTextColor: 'surfaceTextPrimary',
         descTextSize: 'm',
-        imageSrc: index.responseIcon.NothingFound,
+        imageSrc: String(index.responseIcon.NothingFound),
         primaryButtonAppearance: 'accentPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'surfaceTertiary',
-        svgPathFill: 'surfaceItemQuaternary',
+        svgPathFill: 'surfaceQuaternary',
     },
 };
 
@@ -125,13 +120,12 @@ const responseAppearanceRefresh = {
         fill: 'surfacePrimary',
         titleTextColor: 'surfaceTextPrimary',
         titleTextSize: 'xxl',
-        labelTextColor: 'surfaceTextPrimary',
         descTextSize: 'm',
-        imageSrc: index.responseIcon.Refresh,
+        imageSrc: String(index.responseIcon.Refresh),
         primaryButtonAppearance: 'accentPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'surfaceTertiary',
-        svgPathFill: 'surfaceItemQuaternary',
+        svgPathFill: 'surfaceQuaternary',
     },
 };
 
@@ -154,13 +148,12 @@ const responseAppearanceSuccess = {
         fill: 'surfacePrimary',
         titleTextColor: 'surfaceTextPrimary',
         titleTextSize: 'xxl',
-        labelTextColor: 'surfaceTextPrimary',
         descTextSize: 'm',
-        imageSrc: index.responseIcon.Success,
+        imageSrc: String(index.responseIcon.Success),
         primaryButtonAppearance: 'accentPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'accentPrimary',
-        svgPathFill: 'accentItemPrimary',
+        svgPathFill: 'accentPrimary',
     },
 };
 
@@ -169,13 +162,12 @@ const responseAppearanceUnableLoadData = {
         fill: 'surfacePrimary',
         titleTextColor: 'surfaceTextPrimary',
         titleTextSize: 'xxl',
-        labelTextColor: 'surfaceTextPrimary',
         descTextSize: 'm',
-        imageSrc: index.responseIcon.UnableLoadData,
+        imageSrc: String(index.responseIcon.UnableLoadData),
         primaryButtonAppearance: 'accentPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'surfaceTertiary',
-        svgPathFill: 'surfaceItemQuaternary',
+        svgPathFill: 'surfaceQuaternary',
     },
 };
 
@@ -184,13 +176,12 @@ const responseAppearanceWarning = {
         fill: 'surfacePrimary',
         titleTextColor: 'surfaceTextPrimary',
         titleTextSize: 'xxl',
-        labelTextColor: 'surfaceTextPrimary',
         descTextSize: 'm',
-        imageSrc: index.responseIcon.Warning,
-        primaryButtonAppearance: 'warningPrimary sizeXXL solid',
-        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
+        imageSrc: String(index.responseIcon.Warning),
+        primaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
+        secondaryButtonAppearance: 'warningPrimary sizeXXL solid',
         svgFill: 'warningPrimary',
-        svgPathFill: 'warningItemPrimary',
+        svgPathFill: 'warningPrimary',
     },
 };
 
@@ -214,12 +205,11 @@ const responseConfig = {
         responseConfig.appearance = appearanceConfig;
     },
 };
-const Response = urlWithAssetPrefix.urlWithAssetPrefix(function Response(props) {
-    const { appearance, className, dataTestId, dataTour, width, height, title, desc, bottomButton, primaryButton, secondaryButton, before, after, isSkeleton, onClickSecondaryButton, } = props;
+const Response = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function Response(props, ref) {
+    const { appearance, className, dataTestId, dataTour, width, height, title, desc, primaryButton, secondaryButton, showPrimaryButton = true, showSecondaryButton = true, before, after, isSkeleton, isBottomButton, onClickPrimaryButton, onClickSecondaryButton, } = props;
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, responseConfig);
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    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 { 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, } = propsGenerator;
     const ImageComponent = React.useMemo(() => {
         const src = imageSrc || svgSrc;
         const Image = SvgImage;
@@ -237,15 +227,15 @@ const Response = urlWithAssetPrefix.urlWithAssetPrefix(function Response(props)
             return jsxRuntime.jsx("img", { src: src });
         }
         return null;
-    }, [imageSrc, svgSrc, SvgImage, width, height, svgFillClass]);
-    // @ts-expect-error
+    }, [imageSrc, svgSrc, SvgImage, width, height]);
     const { styles: responseStyles, wrapper: wrapperStyles } = useStyles.useStyles(props);
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'response', bottomButton && `response_bottom-button`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderTypeClass && `border_type_${borderTypeClass}`, borderWidthClass && `border-width_${borderWidthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, heightClass && `height_${heightClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `width_${widthClass}`, isSkeleton && `response_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: responseStyles, children: [before, jsxRuntime.jsxs("div", { className: "response__wrapper", style: wrapperStyles, children: [ImageComponent && (jsxRuntime.jsx("div", { className: clsx('response__image', svgFillClass && `svg_fill_${svgFillClass}`, svgPathFillClass && `svg_path_fill_${svgPathFillClass}`), children: ImageComponent })), jsxRuntime.jsxs("div", { className: "response__wrapper-inner", children: [title && (jsxRuntime.jsx(Text.Text, { className: "response__title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title })), desc && (jsxRuntime.jsx(Text.Text, { className: "response__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] })] }), (primaryButtonLabel ||
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'response', isBottomButton && `response_bottom-button`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass &&
+            `border-color_hover_${borderColorHoverClass}`, borderTypeClass && `border_type_${borderTypeClass}`, borderWidthClass && `border-width_${borderWidthClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, heightClass && `height_${heightClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `width_${widthClass}`, isSkeleton && `response_skeleton`), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: responseStyles, children: [before, jsxRuntime.jsxs("div", { className: "response__wrapper", style: wrapperStyles, children: [ImageComponent && (jsxRuntime.jsx("div", { className: clsx('response__image', svgFillClass && `svg_fill_${svgFillClass}`, svgPathFillClass && `svg_path_fill_${svgPathFillClass}`), children: ImageComponent })), jsxRuntime.jsxs("div", { className: "response__wrapper-inner", children: [title && (jsxRuntime.jsx(Text.Text, { className: "response__title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title })), desc && (jsxRuntime.jsx(Text.Text, { className: "response__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] })] }), (primaryButtonLabel ||
                 primaryButton ||
                 secondaryButtonLabel ||
                 secondaryButton ||
-                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] }));
-});
+                appearanceConfig) && (jsxRuntime.jsxs(Group.Group, { className: "response__button", width: "fill", children: [primaryButtonLabel && showPrimaryButton ? (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 && showSecondaryButton ? (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 = {
     error: {

package/dist/cjs/components/SVGContent.js

@@ -1,12 +1,12 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var clsx = require('clsx');
 var SVG = require('react-inlinesvg');
 var urlWithAssetPrefix = require('../hoc/urlWithAssetPrefix.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-require('react');
 require('@itcase/common');
 require('../context/UrlAssetPrefix.js');
 require('lodash/camelCase');
@@ -22,13 +22,12 @@ require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
 
-const SVGContent = urlWithAssetPrefix.urlWithAssetPrefix(function SVGContent(props) {
+const SVGContent = urlWithAssetPrefix.urlWithAssetPrefix(React.forwardRef(function SVGContent(props, ref) {
     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}`), "data-testid": dataTestId, "data-tour": dataTour, 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}`), ref: ref, "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

@@ -26,10 +26,8 @@ function ScrollOnDrag(props) {
     const propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props);
     const { ref } = ScrollContainer.useScrollContainer();
     const { fillClass, fillHoverClass, borderColorClass, borderTypeClass, borderWidthClass, elevationClass, heightClass, widthClass = 'fill', } = propsGenerator;
-    // @ts-expect-error
     const { scrollContainer: scrollContainerStyles, styles: styles } = useStyles.useStyles(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}`), "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 }) }) }));
 }

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, dataTestId, dataTour, tag: Tag = 'div', children, } = props;
+    const { id, className, dataTestId, dataTour, styles, tag: Tag = 'div', onClick, 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}`), "data-testid": dataTestId, "data-tour": dataTour, 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, styles), onClick: onClick, children: children }));
 });
 
 exports.ScrollToView = ScrollToView;

package/dist/cjs/components/Search.js

@@ -7,8 +7,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_CQxDPPGY.js');
-var Text = require('../../Text_cjs_Co2XdYF-.js');
+var Icon = require('../../Icon_cjs_D20B2YBo.js');
+var Text = require('../../Text_cjs_erTy2pUN.js');
 var Scrollbar = require('../../Scrollbar_cjs_DHe1EK_B.js');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -26,14 +26,14 @@ require('lodash/maxBy');
 require('react-inlinesvg');
 require('../hoc/urlWithAssetPrefix.js');
 require('../context/UrlAssetPrefix.js');
-require('../../Link_cjs_DqNtNI23.js');
+require('../../Link_cjs_DXBqPjwm.js');
 require('react-scrollbars-custom');
 
 const searchAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfaceSecondary',
         borderColor: 'surfaceBorderQuaternary',
-        borderColorHover: 'surfaceBorderQuaternaryHover',
+        borderColorHover: 'surfaceBorderHoverQuaternary',
         iconAfterFill: 'surfaceItemQuaternary',
         iconBeforeFill: 'surfaceItemQuaternary',
         iconClearFill: 'surfaceItemQuaternary',
@@ -43,7 +43,7 @@ const searchAppearanceDefault = {
     defaultSecondary: {
         fill: 'surfaceSecondary',
         borderColor: 'surfaceBorderSecondary',
-        borderColorHover: 'surfaceBorderSecondaryHover',
+        borderColorHover: 'surfaceBorderHoverSecondary',
         iconAfterFill: 'surfaceItemQuaternary',
         iconBeforeFill: 'surfaceItemQuaternary',
         iconClearFill: 'surfaceItemQuaternary',
@@ -56,7 +56,7 @@ const searchAppearanceDisabled = {
     disabledPrimary: {
         fill: 'surfaceDisabled',
         borderColor: 'surfaceBorderDisabled',
-        borderColorHover: 'surfaceBorderDisabledHover',
+        borderColorHover: 'surfaceBorderHoverQuaternary',
         iconAfterFill: 'surfaceItemPrimary',
         iconBeforeFill: 'surfaceItemPrimary',
         iconClearFill: 'surfaceItemPrimary',
@@ -69,7 +69,7 @@ const searchAppearanceError = {
     errorPrimary: {
         fill: 'errorTertiary',
         borderColor: 'errorBorderQuaternary',
-        borderColorHover: 'errorBorderQuaternaryHover',
+        borderColorHover: 'errorBorderHoverQuaternary',
         iconAfterFill: 'errorItemSecondary',
         iconBeforeFill: 'errorItemSecondary',
         iconClearFill: 'errorItemSecondary',
@@ -82,7 +82,7 @@ const searchAppearanceRequire = {
     requirePrimary: {
         fill: 'warningTertiary',
         borderColor: 'warningBorderSecondary',
-        borderColorHover: 'warningBorderSecondaryHover',
+        borderColorHover: 'warningBorderHoverSecondary',
         iconAfterFill: 'warningItemSecondary',
         iconBeforeFill: 'warningItemSecondary',
         iconClearFill: 'warningItemSecondary',
@@ -98,21 +98,21 @@ const searchAppearanceShape = {
     rounded: {
         shape: 'rounded',
     },
-    roundedS: {
-        shape: 'rounded',
-        shapeStrength: '0_5m',
-    },
-    roundedM: {
+    roundedXL: {
         shape: 'rounded',
-        shapeStrength: '1m',
+        shapeStrength: '2m',
     },
     roundedL: {
         shape: 'rounded',
         shapeStrength: '1_5m',
     },
-    roundedXL: {
+    roundedM: {
         shape: 'rounded',
-        shapeStrength: '2m',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
     },
 };
 
@@ -183,7 +183,6 @@ const searchAppearanceSuccess = {
         fill: 'successTertiary',
         borderColor: 'accentBorderQuaternary',
         borderColorHover: 'accentBorderQuaternary',
-        textColor: 'surfaceTextPrimary',
         iconAfterFill: 'successItemSecondary',
         iconBeforeFill: 'successItemSecondary',
         iconClearFill: 'successItemSecondary',
@@ -214,7 +213,7 @@ const SearchInput = React.forwardRef(function SearchInput(props, ref) {
         onChange && onChange(event.target.value);
     }, [onChange]);
     const onClickClearIcon = React.useCallback((event) => {
-        event.stopPropagation();
+        event?.stopPropagation();
         onChange && onChange('');
         if (onClickClean) {
             onClickClean();
@@ -239,7 +238,7 @@ const SearchResult = React.forwardRef(function SearchResult(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}`), "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] }) }));
+    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 || 300, children: children })), after] }) }));
 });
 
 exports.SearchInput = SearchInput;

package/dist/cjs/components/Segmented/stories/__mock__.js

@@ -4,32 +4,32 @@ var _default = require('@itcase/icons/default');
 
 const segmentedMock = {
     activeSegment: {
-        value: 1,
+        value: '1',
     },
     segments: [
         {
             label: 'Label 1',
             iconAfter: _default.icons24.Placeholder.Default,
             iconBefore: _default.icons24.Placeholder.Default,
-            value: 1,
+            value: '1',
         },
         {
             label: 'Label 2',
             iconAfter: _default.icons24.Placeholder.Default,
             iconBefore: _default.icons24.Placeholder.Default,
-            value: 2,
+            value: '2',
         },
         {
             label: 'Label 3',
             iconAfter: _default.icons24.Placeholder.Default,
             iconBefore: _default.icons24.Placeholder.Default,
-            value: 3,
+            value: '3',
         },
         {
             label: 'Label 4',
             iconAfter: _default.icons24.Placeholder.Default,
             iconBefore: _default.icons24.Placeholder.Default,
-            value: 4,
+            value: '4',
         },
     ],
 };