@itcase/ui 1.9.36 → 1.9.37

package/dist/cjs/components/Radio.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useAppearanceConfig = require('../hooks/useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Text = require('../../Text_cjs_Co2XdYF-.js');
+var Text = require('../../Text_cjs_BJ9NgJkx.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -25,7 +25,6 @@ const radioAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfaceSecondary',
         fillCheckmark: 'surfaceQuaternary',
-        fillDisabled: 'errorPrimary',
         fillRadio: 'surfaceSecondary',
         fillRadioHover: 'surfaceTertiary',
         labelTextColor: 'surfaceTextPrimary',
@@ -43,13 +42,13 @@ const radioAppearanceDisabled = {
     disabledPrimary: {
         fill: 'surfaceDisabled',
         fillCheckmark: 'surfaceQuaternary',
-        labelTextColor: 'surfaceTextDisabled',
-        descTextColor: 'surfaceTextDisabled',
-        borderColor: 'surfaceBorderDisabled',
+        labelTextColor: 'surfaceTextPrimary',
+        descTextColor: 'surfaceTextPrimary',
+        borderColor: 'surfaceBorderPrimary',
         borderRadioColor: 'surfaceBorderQuaternary',
-        borderRadioColorHover: 'surfaceBorderQuaternary',
-        borderRadioColorActive: 'surfaceBorderQuaternary',
-        borderRadioColorActiveHover: 'surfaceBorderQuaternary',
+        borderRadioColorActive: 'surfaceBorderActiveQuaternary',
+        borderRadioColorActiveHover: 'surfaceBorderHoverQuaternary',
+        borderRadioColorHover: 'surfaceBorderHoverQuaternary',
     },
 };
 
@@ -61,9 +60,9 @@ const radioAppearanceError = {
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'errorBorderQuaternary',
         borderRadioColor: 'surfaceBorderQuaternary',
-        borderRadioColorHover: 'surfaceBorderQuaternary',
-        borderRadioColorActive: 'surfaceBorderQuaternary',
-        borderRadioColorActiveHover: 'surfaceBorderQuaternary',
+        borderRadioColorActive: 'surfaceBorderActiveQuaternary',
+        borderRadioColorActiveHover: 'surfaceBorderHoverQuaternary',
+        borderRadioColorHover: 'surfaceBorderHoverQuaternary',
     },
 };
 
@@ -75,9 +74,9 @@ const radioAppearanceRequire = {
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'warningBorderSecondary',
         borderRadioColor: 'surfaceBorderQuaternary',
-        borderRadioColorHover: 'surfaceBorderQuaternary',
         borderRadioColorActive: 'surfaceBorderQuaternary',
         borderRadioColorActiveHover: 'surfaceBorderQuaternary',
+        borderRadioColorHover: 'surfaceBorderQuaternary',
     },
 };
 
@@ -151,14 +150,14 @@ const radioAppearanceStyle = {
 const radioAppearanceSuccess = {
     successPrimary: {
         fill: 'successTertiary',
-        fillCheckmark: 'accentItemSecondary',
+        fillCheckmark: 'accentSecondary',
         labelTextColor: 'surfaceTextPrimary',
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'accentBorderSecondary',
         borderRadioColor: 'surfaceBorderQuaternary',
-        borderRadioColorHover: 'surfaceBorderQuaternary',
-        borderRadioColorActive: 'surfaceBorderQuaternary',
-        borderRadioColorActiveHover: 'surfaceBorderQuaternary',
+        borderRadioColorActive: 'surfaceBorderActiveQuaternary',
+        borderRadioColorActiveHover: 'surfaceBorderHoverQuaternary',
+        borderRadioColorHover: 'surfaceBorderHoverQuaternary',
     },
 };
 
@@ -197,7 +196,7 @@ function Radio(props) {
             ? borderRadioColorHoverClass &&
                 `radio_border-color_hover_${borderRadioColorHoverClass}`
             : borderRadioColorActiveHoverClass &&
-                `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 }))] }));
+                `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, 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/Response/img.js

@@ -23,17 +23,17 @@ var img$1 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180
 var img = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='180' height='180' rx='90' fill='%23DE8806'/%3e%3cpath d='M90.5029 123.721C93.8166 123.721 96.5029 126.407 96.5029 129.721V134.749C96.5027 138.063 93.8165 140.749 90.5029 140.749C87.1894 140.749 84.5031 138.063 84.5029 134.749V129.721C84.5029 126.407 87.1892 123.721 90.5029 123.721ZM90.5029 39.251C93.8166 39.251 96.5029 41.9383 96.5029 45.252V104.582C96.5024 107.895 93.8163 110.582 90.5029 110.582C87.1895 110.582 84.5034 107.895 84.5029 104.582V45.252C84.5029 41.9382 87.1892 39.251 90.5029 39.251Z' fill='white'/%3e%3c/svg%3e";
 
 const responseIcon = {
-    Error: img$7,
-    Warning: img,
-    Success: img$2,
-    Danger: img$9,
     Confirm: img$a,
+    Danger: img$9,
     Empty: img$8,
+    Error: img$7,
     Fail: img$6,
     NothingFound: img$5,
     Refresh: img$4,
     Search: img$3,
+    Success: img$2,
     UnableLoadData: img$1,
+    Warning: img,
 };
 
 exports.responseIcon = responseIcon;

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_Dvh0E0zz.js');
+var Group = require('../../Group_cjs_BGVwVJwS.js');
+var Text = require('../../Text_cjs_BJ9NgJkx.js');
 require('@itcase/common');
 require('../context/UrlAssetPrefix.js');
 require('lodash/camelCase');
@@ -25,10 +25,10 @@ require('../utils/setViewportProperty.js');
 require('../hooks.js');
 require('../hooks/useStyles/styleAttributes.js');
 require('lodash/maxBy');
-require('../../Icon_cjs_CQxDPPGY.js');
+require('../../Icon_cjs_DRdjXL7T.js');
 require('react-inlinesvg');
-require('../../Link_cjs_DqNtNI23.js');
-require('../../Loader_cjs_CP1xKwb-.js');
+require('../../Link_cjs_CmBw4h-N.js');
+require('../../Loader_cjs_BHMB4c8f.js');
 
 const responseAppearanceConfirm = {
     confirm: {
@@ -41,7 +41,7 @@ const responseAppearanceConfirm = {
         primaryButtonAppearance: 'accentPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'surfaceTertiary',
-        svgPathFill: 'surfaceItemQuaternary',
+        svgPathFill: 'surfaceQuaternary',
     },
 };
 
@@ -86,7 +86,7 @@ const responseAppearanceError = {
         primaryButtonAppearance: 'errorPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'errorPrimary',
-        svgPathFill: 'errorItemPrimary',
+        svgPathFill: 'errorPrimary',
     },
 };
 
@@ -101,7 +101,7 @@ const responseAppearanceFail = {
         primaryButtonAppearance: 'accentPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'surfaceTertiary',
-        svgPathFill: 'surfaceItemQuaternary',
+        svgPathFill: 'surfaceQuaternary',
     },
 };
 
@@ -116,7 +116,7 @@ const responseAppearanceNothingFound = {
         primaryButtonAppearance: 'accentPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'surfaceTertiary',
-        svgPathFill: 'surfaceItemQuaternary',
+        svgPathFill: 'surfaceQuaternary',
     },
 };
 
@@ -131,7 +131,7 @@ const responseAppearanceRefresh = {
         primaryButtonAppearance: 'accentPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'surfaceTertiary',
-        svgPathFill: 'surfaceItemQuaternary',
+        svgPathFill: 'surfaceQuaternary',
     },
 };
 
@@ -160,7 +160,7 @@ const responseAppearanceSuccess = {
         primaryButtonAppearance: 'accentPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'accentPrimary',
-        svgPathFill: 'accentItemPrimary',
+        svgPathFill: 'accentPrimary',
     },
 };
 
@@ -175,7 +175,7 @@ const responseAppearanceUnableLoadData = {
         primaryButtonAppearance: 'accentPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'surfaceTertiary',
-        svgPathFill: 'surfaceItemQuaternary',
+        svgPathFill: 'surfaceQuaternary',
     },
 };
 
@@ -187,10 +187,10 @@ const responseAppearanceWarning = {
         labelTextColor: 'surfaceTextPrimary',
         descTextSize: 'm',
         imageSrc: index.responseIcon.Warning,
-        primaryButtonAppearance: 'warningPrimary sizeXXL solid',
-        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
+        primaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
+        secondaryButtonAppearance: 'warningPrimary sizeXXL solid',
         svgFill: 'warningPrimary',
-        svgPathFill: 'warningItemPrimary',
+        svgPathFill: 'warningPrimary',
     },
 };
 
@@ -214,12 +214,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 +236,16 @@ const Response = urlWithAssetPrefix.urlWithAssetPrefix(function Response(props)
             return jsxRuntime.jsx("img", { src: src });
         }
         return null;
-    }, [imageSrc, svgSrc, SvgImage, width, height, svgFillClass]);
+    }, [imageSrc, svgSrc, SvgImage, width, height]);
     // @ts-expect-error
     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,13 @@ 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

@@ -29,7 +29,6 @@ function ScrollOnDrag(props) {
     // @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,14 @@ 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;
+    // @ts-expect-error
     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_DRdjXL7T.js');
+var Text = require('../../Text_cjs_BJ9NgJkx.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_CmBw4h-N.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',
@@ -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();
@@ -223,6 +222,7 @@ const SearchInput = React.forwardRef(function SearchInput(props, ref) {
     const appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, searchInputConfig, isDisabled);
     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;
+    //@ts-expect-error
     const { styles: searchInputStyles } = useStyles.useStyles(props);
     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 ||
@@ -239,7 +239,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',
         },
     ],
 };