@itcase/ui 1.9.36 → 1.9.37

package/dist/components/Pagination.js

@@ -6,10 +6,10 @@ 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_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 { D as Dropdown, a as DropdownItem } from '../DropdownItem_es_CgVFMUyM.js';
+import { I as Icon } from '../Icon_es_BoUAbwyu.js';
+import { T as Text } from '../Text_es_DR4Alx-v.js';
+import { icons14, icons16, icons24 } from '@itcase/icons/default';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -23,20 +23,16 @@ import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
-import '../Divider_es_BlOJ77zx.js';
+import '../Divider_es_Cod0xv2q.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';
 import '../context/UrlAssetPrefix.js';
-import '../Link_es_Bt-Bhy3t.js';
+import '../Link_es_OpkyzWe6.js';
 
 const paginationAppearanceAccent = {
-    accent: {
-        fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
-    },
     accentPrimary: {
         fill: 'accentPrimary',
-        fillActive: 'accentQuaternary',
+        fillActive: 'accentActiveQuaternary',
         fillInput: 'surfacePrimary',
         borderColor: 'accentBorderPrimary',
         textColor: 'accentTextPrimary',
@@ -44,13 +40,13 @@ const paginationAppearanceAccent = {
         nextIconFillIcon: 'accentItemPrimary',
         pageCountDescTextColor: 'surfaceTextPrimary',
         pageCountDropdownAlignment: 'topCenter',
-        pageCountDropdownElevation: 8,
+        pageCountDropdownElevation: '8',
         pageCountDropdownFill: 'surfacePrimary',
         pageCountDropdownItemDividerFill: 'surfaceSecondary',
         pageCountDropdownItemFill: 'surfacePrimary',
         pageCountDropdownItemFillActive: 'accentPrimary',
-        pageCountDropdownItemFillActiveHover: 'accentActiveHover',
-        pageCountDropdownItemFillHover: 'surfaceSecondary',
+        pageCountDropdownItemFillActiveHover: 'accentActiveHoverPrimary',
+        pageCountDropdownItemFillHover: 'surfaceHoverSecondary',
         pageCountDropdownItemLabelAlign: 'center',
         pageCountDropdownItemLabelColor: 'surfaceTextPrimary',
         pageCountDropdownItemLabelColorActive: 'accentTextPrimary',
@@ -62,7 +58,7 @@ const paginationAppearanceAccent = {
     },
     accentSecondary: {
         fill: 'accentPrimary',
-        fillHover: 'accentPrimaryHover',
+        fillHover: 'accentHoverPrimary',
         labelTextColor: 'accentTextSecondary',
         labelTextColorHover: 'accentTextSecondary',
         borderColor: 'accentBorderPrimary',
@@ -110,11 +106,7 @@ const paginationAppearanceSize = {
         size: 'l',
         labelTextSize: 'l',
         textSize: 'l',
-        builderIcon: icons24.General.Dot,
-        iconAfterFillSize: '24',
-        iconAfterSize: '24',
-        iconBeforeFillSize: '24',
-        iconBeforeSize: '24',
+        builderIcon: icons24.General.DotMedium,
         nextIcon: icons24.Arrow.ChevronRightSmall,
         pageCountDescTextSize: 'l',
         pageCountDropdownItemDividerSize: 'xxs',
@@ -130,11 +122,7 @@ const paginationAppearanceSize = {
         size: 'm',
         labelTextSize: 'm',
         textSize: 'm',
-        builderIcon: icons24.General.Dot,
-        iconAfterFillSize: '24',
-        iconAfterSize: '24',
-        iconBeforeFillSize: '24',
-        iconBeforeSize: '24',
+        builderIcon: icons24.General.DotMedium,
         nextIcon: icons24.Arrow.ChevronRightSmall,
         pageCountDescTextSize: 'm',
         pageCountDropdownItemDividerSize: 'xxs',
@@ -149,11 +137,7 @@ const paginationAppearanceSize = {
         size: 's',
         labelTextSize: 's',
         textSize: 's',
-        builderIcon: icons24.General.Dot,
-        iconAfterFillSize: '20',
-        iconAfterSize: '20',
-        iconBeforeFillSize: '20',
-        iconBeforeSize: '20',
+        builderIcon: icons24.General.DotMedium,
         nextIcon: icons16.Arrow.ChevronRightSmall,
         pageCountDescTextSize: 's',
         pageCountDropdownItemDividerSize: 'xxs',
@@ -167,10 +151,7 @@ const paginationAppearanceSize = {
         size: 'xs',
         labelTextSize: 'xs',
         textSize: 'xs',
-        beforeSize: '16',
-        // TODO: replace builderIcon: icons24.General.Dot with an builderIcon: icons14.General.Dot,
-        builderIcon: icons24.General.Dot,
-        iconAfterFillSize: '16',
+        builderIcon: icons14.General.DotMedium,
         nextIcon: icons14.Arrow.ChevronRightSmall,
         pageCountDescTextSize: 'xs',
         pageCountDropdownItemDividerSize: 'xxs',
@@ -199,27 +180,27 @@ const paginationAppearanceStyle = {
 const paginationAppearanceSurface = {
     surfacePrimary: {
         fill: 'surfacePrimary',
-        fillHover: 'surfaceTertiary',
         fillActive: 'accentPrimary',
-        fillActiveHover: 'accentHoverPrimary',
+        fillActiveHover: 'accentPrimary',
+        fillHover: 'surfaceHoverTertiary',
         fillInput: 'surfacePrimary',
-        fillInputHover: 'surfaceTertiary',
+        fillInputHover: 'surfaceHoverTertiary',
         textColor: 'surfaceTextPrimary',
-        textColorHover: 'surfaceTextPrimary',
         textColorActive: 'accentTextPrimary',
         textColorActiveHover: 'accentTextPrimary',
+        textColorHover: 'surfaceTextPrimary',
         builderIconFillIcon: 'surfaceItemPrimary',
         nextIconFillIcon: 'surfaceItemPrimary',
         pageCountDescTextColor: 'surfaceTextPrimary',
         pageCountDropdownAlignment: 'topCenter',
-        pageCountDropdownElevation: 8,
+        pageCountDropdownElevation: '8',
         pageCountDropdownFill: 'surfacePrimary',
-        pageCountDropdownFillHover: 'surfaceTertiary',
+        pageCountDropdownFillHover: 'surfaceHoverTertiary',
         pageCountDropdownItemDividerFill: 'surfaceSecondary',
         pageCountDropdownItemFill: 'surfacePrimary',
         pageCountDropdownItemFillActive: 'accentPrimary',
-        pageCountDropdownItemFillActiveHover: 'accentActiveHover',
-        pageCountDropdownItemFillHover: 'surfaceSecondary',
+        pageCountDropdownItemFillActiveHover: 'accentPrimary',
+        pageCountDropdownItemFillHover: 'surfaceHoverSecondary',
         pageCountDropdownItemLabelAlign: 'center',
         pageCountDropdownItemLabelColor: 'surfaceTextPrimary',
         pageCountDropdownItemLabelColorActive: 'accentTextPrimary',
@@ -246,15 +227,7 @@ const paginationConfig = {
     },
 };
 function Pagination(props) {
-    const { appearance, className, dataTestId, dataTour, allItemsCount = 0, pageCountDesc = 'кол-во строк', pageCountDropdownItemDividerDirection, pageCountList = [10, 20, 50, 100], pageNumber = 0, perPageCount = 0, isDisabled, isSkeleton, isPageCount, isPageCountDropdownReversed = false, isPageLabelBuilder, onChangePage, onChangePerPageCount, 
-    /**
-     * @deprecated The method should not be used
-     */
-    onPageChange, 
-    /**
-     * @deprecated The method should not be used
-     */
-    onPerPageCountChange, } = props;
+    const { appearance, className, dataTestId, dataTour, allItemsCount = 0, pageCountDesc = 'кол-во строк', pageCountDropdownItemDividerDirection, pageCountList = [10, 20, 50, 100], pageNumber = 0, perPageCount = 0, isDisabled, isSkeleton, isPageCount, isPageCountDropdownReversed = false, isPageLabelBuilder, onChangePage, onChangePerPageCount, onPageChange, onPerPageCountChange, } = props;
     const _onChangePage = useMemo(() => {
         if (onPageChange) {
             console.warn('@itcase/ui Pagination warning: "onPageChange" is deprecated, use "onChangePage" instead.');
@@ -276,7 +249,6 @@ function Pagination(props) {
             ? pageCountList?.reverse()
             : pageCountList;
     }, [isPageCountDropdownReversed, pageCountList]);
-    // Toggle command menu
     const onClickCommandMenuButton = useCallback(() => {
         setIsOpenDropdown((state) => !state);
     }, []);
@@ -286,18 +258,14 @@ function Pagination(props) {
         setActiveDropdownItem(item);
         setIsOpenDropdown(false);
     }, [_onChangePerPageCount]);
-    // Calculate count of pages for all items
     const paginationPagesCount = useMemo(() => {
         if (allItemsCount && allItemsCount > 0) {
-            // Round up. "perPageCount" may be is a query params "limit"
             return ceil(allItemsCount / perPageCount);
         }
         return 0;
     }, [allItemsCount, perPageCount]);
-    // Index for pagination state
     const paginationPageIndex = useMemo(() => {
-        const intPageNumber = parseInt(pageNumber);
-        // For pagination need index of page, not number
+        const intPageNumber = pageNumber;
         if (!isNaN(intPageNumber) && intPageNumber > 1) {
             return intPageNumber - 1;
         }
@@ -306,19 +274,15 @@ function Pagination(props) {
     const appearanceConfig = useAppearanceConfig(appearance, paginationConfig, isDisabled);
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { justifyContentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, fillInputClass, fillInputHoverClass, fillInputShapeClass, fillInputShapeStrengthClass, textColorActiveClass, textColorActiveHoverClass, textColorClass, textColorHoverClass, textSizeClass, builderIcon, builderIconFill, builderIconFillIcon, builderIconFillSize, builderIconSize, marginPagesDisplayed, nextIcon, nextIconFill, nextIconFillIcon, nextIconFillSize, nextIconSize, pageCountDescTextColor, pageCountDescTextSize, pageCountDropdownAlignment, pageCountDropdownElevation, pageCountDropdownFill, pageCountDropdownFillHover, pageCountDropdownItemDividerFill, pageCountDropdownItemDividerSize, pageCountDropdownItemFill, pageCountDropdownItemFillActive, pageCountDropdownItemFillActiveHover, pageCountDropdownItemFillHover, pageCountDropdownItemLabelAlign, pageCountDropdownItemLabelColor, pageCountDropdownItemLabelColorActive, pageCountDropdownItemLabelColorActiveHover, pageCountDropdownItemLabelColorHover, pageCountDropdownItemLabelSize, pageCountDropdownItemLabelWrap, pageCountDropdownItemShowDivider, pageCountDropdownItemSize, pageCountDropdownItemWidth, pageCountDropdownShape, pageCountDropdownShapeStrength, pageCountInputIcon, pageCountInputIconColor, pageCountInputIconFillSize, pageCountInputIconSrc, pageCountInputTextColor, pageCountInputTextSize, pageRangeDisplayed, previousIcon, previousIconFill, previousIconFillIcon, previousIconFillSize, previousIconSize, sizeClass, } = propsGenerator;
+    //@ts-expect-error
     const { styles: paginationStyles } = useStyles(props);
     const minPageSize = Math.min(perPageCount, ...pageCountList);
-    // If there are fewer items than the minimum page size - pagination wont work.
     const isPaginationDisplayed = allItemsCount > minPageSize;
     return (isPaginationDisplayed && (jsxs("div", { className: clsx('pagination', sizeClass && `pagination_size_${sizeClass}`, isSkeleton && `pagination_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: paginationStyles, children: [jsx(ReactPaginate, { activeClassName: clsx('pagination__item_state_active cursor_type_default', fillActiveClass && `fill fill_active_${fillActiveClass}`, fillActiveHoverClass &&
                     `fill fill_active_hover_${fillActiveHoverClass}`), activeLinkClassName: clsx('pagination__item-link_state_active', textColorActiveClass &&
                     `text text-color_active_${textColorActiveClass}`, textColorActiveHoverClass &&
                     `text text-color_active_hover_${textColorActiveHoverClass}`), breakClassName: "pagination__item pagination__item_break", breakLabel: "...", breakLinkClassName: "pagination__item-link", containerClassName: clsx(className, 'pagination__container', justifyContentClass &&
-                    `pagination_justify-content_${justifyContentClass}`), disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", 
-                // pages settings
-                forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), 
-                // next button
-                nextLabel: jsx(Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
+                    `pagination_justify-content_${justifyContentClass}`), disabledClassName: "pagination__item_state_disabled cursor_type_default", disabledLinkClassName: "pagination__item_state_disabled", forcePage: paginationPageIndex, marginPagesDisplayed: marginPagesDisplayed, nextClassName: clsx('pagination__item pagination__item_next', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), nextLabel: jsx(Icon, { fill: nextIconFill, fillSize: nextIconFillSize, iconFill: nextIconFillIcon, iconSize: nextIconSize, shape: "circular", SvgImage: nextIcon }), nextLinkClassName: "pagination__item-link", pageClassName: clsx('pagination__item', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), pageCount: paginationPagesCount, pageLabelBuilder: isPageLabelBuilder &&
                     (() => (jsx(Icon, { fill: builderIconFill, fillSize: builderIconFillSize, iconFill: builderIconFillIcon, iconSize: builderIconSize, shape: "circular", SvgImage: builderIcon }))), pageLinkClassName: clsx('pagination__item-link', textSizeClass && `pagination__item-link_size_${textSizeClass}`, textColorClass && `text text-color_${textColorClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`), pageRangeDisplayed: pageRangeDisplayed ?? 8, previousClassName: clsx('pagination__item pagination__item_previous', sizeClass && `pagination__item_size_${sizeClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`), previousLabel: jsx(Icon, { fill: previousIconFill, fillSize: previousIconFillSize, iconFill: previousIconFillIcon, iconSize: previousIconSize, shape: "circular", SvgImage: previousIcon }), previousLinkClassName: "pagination__item-link", onPageChange: _onChangePage }), isPageCount && (jsxs("div", { className: clsx(className, 'pagination__count'), children: [jsx(Text, { className: "pagination__count-text", size: pageCountDescTextSize, textColor: pageCountDescTextColor, children: pageCountDesc }), jsxs("div", { className: clsx('pagination__input', 'cursor_type_pointer', fillInputClass && `fill_${fillInputClass}`, fillInputHoverClass && `fill_hover_${fillInputHoverClass}`, fillInputShapeClass && `shape_${fillInputShapeClass}`, fillInputShapeStrengthClass &&
                             `shape-strength_${fillInputShapeStrengthClass}`), onClick: onClickCommandMenuButton, children: [jsx(Text, { size: pageCountInputTextSize, textColor: pageCountInputTextColor, children: activeDropdownItem }), jsx(Icon, { fillSize: pageCountInputIconFillSize, iconFill: pageCountInputIconColor, imageSrc: pageCountInputIconSrc, SvgImage: pageCountInputIcon }), jsx(Dropdown, { className: "pagination__dropdown", alignment: pageCountDropdownAlignment, fill: pageCountDropdownFill, fillHover: pageCountDropdownFillHover, elevation: pageCountDropdownElevation, shape: pageCountDropdownShape, shapeStrength: pageCountDropdownShapeStrength, isOpen: isOpenDropdown, setIsOpen: setIsOpenDropdown, children: pageCountDropdownArray.map((item, index) => activeDropdownItem === item ? (jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillActive: pageCountDropdownItemFillActive, fillActiveHover: pageCountDropdownItemFillActiveHover, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorActive: pageCountDropdownItemLabelColorActive, labelTextColorActiveHover: pageCountDropdownItemLabelColorActiveHover, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountList.length - 1 &&
                                         pageCountDropdownItemShowDivider, isActive: true, onClick: (event) => handleDropdownItemClick(event, item) }, item)) : (jsx(DropdownItem, { width: pageCountDropdownItemWidth, size: pageCountDropdownItemSize, fill: pageCountDropdownItemFill, fillHover: pageCountDropdownItemFillHover, label: item.toString(), labelTextAlign: pageCountDropdownItemLabelAlign, labelTextColor: pageCountDropdownItemLabelColor, labelTextColorHover: pageCountDropdownItemLabelColorHover, labelTextSize: pageCountDropdownItemLabelSize, labelTextWrap: pageCountDropdownItemLabelWrap, dividerDirection: pageCountDropdownItemDividerDirection, dividerFill: pageCountDropdownItemDividerFill, dividerSize: pageCountDropdownItemDividerSize, showDivider: index < pageCountList.length - 1 &&

package/dist/components/Radio.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { T as Text } from '../Text_es_DaYcLe4H.js';
+import { T as Text } from '../Text_es_DR4Alx-v.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -23,7 +23,6 @@ const radioAppearanceDefault = {
     defaultPrimary: {
         fill: 'surfaceSecondary',
         fillCheckmark: 'surfaceQuaternary',
-        fillDisabled: 'errorPrimary',
         fillRadio: 'surfaceSecondary',
         fillRadioHover: 'surfaceTertiary',
         labelTextColor: 'surfaceTextPrimary',
@@ -41,13 +40,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',
     },
 };
 
@@ -59,9 +58,9 @@ const radioAppearanceError = {
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'errorBorderQuaternary',
         borderRadioColor: 'surfaceBorderQuaternary',
-        borderRadioColorHover: 'surfaceBorderQuaternary',
-        borderRadioColorActive: 'surfaceBorderQuaternary',
-        borderRadioColorActiveHover: 'surfaceBorderQuaternary',
+        borderRadioColorActive: 'surfaceBorderActiveQuaternary',
+        borderRadioColorActiveHover: 'surfaceBorderHoverQuaternary',
+        borderRadioColorHover: 'surfaceBorderHoverQuaternary',
     },
 };
 
@@ -73,9 +72,9 @@ const radioAppearanceRequire = {
         descTextColor: 'surfaceTextPrimary',
         borderColor: 'warningBorderSecondary',
         borderRadioColor: 'surfaceBorderQuaternary',
-        borderRadioColorHover: 'surfaceBorderQuaternary',
         borderRadioColorActive: 'surfaceBorderQuaternary',
         borderRadioColorActiveHover: 'surfaceBorderQuaternary',
+        borderRadioColorHover: 'surfaceBorderQuaternary',
     },
 };
 
@@ -149,14 +148,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',
     },
 };
 
@@ -195,7 +194,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: [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, 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/Response/img.js

@@ -21,17 +21,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,
 };
 
 export { responseIcon };

package/dist/components/Response.js

@@ -1,14 +1,14 @@
 import { responseIcon } from './Response/img.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import clsx from 'clsx';
 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_DH8hqqdN.js';
-import { G as Group } from '../Group_es_Dml1c8Cz.js';
-import { T as Text } from '../Text_es_DaYcLe4H.js';
+import { B as Button } from '../Button_es_BDrXGgUw.js';
+import { G as Group } from '../Group_es_CrDAyR_E.js';
+import { T as Text } from '../Text_es_DR4Alx-v.js';
 import '@itcase/common';
 import '../context/UrlAssetPrefix.js';
 import 'lodash/camelCase';
@@ -23,10 +23,10 @@ import '../utils/setViewportProperty.js';
 import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
-import '../Icon_es_Banbw98_.js';
+import '../Icon_es_BoUAbwyu.js';
 import 'react-inlinesvg';
-import '../Link_es_Bt-Bhy3t.js';
-import '../Loader_es_Csp5tr40.js';
+import '../Link_es_OpkyzWe6.js';
+import '../Loader_es_CcFl-K-t.js';
 
 const responseAppearanceConfirm = {
     confirm: {
@@ -39,7 +39,7 @@ const responseAppearanceConfirm = {
         primaryButtonAppearance: 'accentPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'surfaceTertiary',
-        svgPathFill: 'surfaceItemQuaternary',
+        svgPathFill: 'surfaceQuaternary',
     },
 };
 
@@ -84,7 +84,7 @@ const responseAppearanceError = {
         primaryButtonAppearance: 'errorPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'errorPrimary',
-        svgPathFill: 'errorItemPrimary',
+        svgPathFill: 'errorPrimary',
     },
 };
 
@@ -99,7 +99,7 @@ const responseAppearanceFail = {
         primaryButtonAppearance: 'accentPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'surfaceTertiary',
-        svgPathFill: 'surfaceItemQuaternary',
+        svgPathFill: 'surfaceQuaternary',
     },
 };
 
@@ -114,7 +114,7 @@ const responseAppearanceNothingFound = {
         primaryButtonAppearance: 'accentPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'surfaceTertiary',
-        svgPathFill: 'surfaceItemQuaternary',
+        svgPathFill: 'surfaceQuaternary',
     },
 };
 
@@ -129,7 +129,7 @@ const responseAppearanceRefresh = {
         primaryButtonAppearance: 'accentPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'surfaceTertiary',
-        svgPathFill: 'surfaceItemQuaternary',
+        svgPathFill: 'surfaceQuaternary',
     },
 };
 
@@ -158,7 +158,7 @@ const responseAppearanceSuccess = {
         primaryButtonAppearance: 'accentPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'accentPrimary',
-        svgPathFill: 'accentItemPrimary',
+        svgPathFill: 'accentPrimary',
     },
 };
 
@@ -173,7 +173,7 @@ const responseAppearanceUnableLoadData = {
         primaryButtonAppearance: 'accentPrimary sizeXXL solid',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
         svgFill: 'surfaceTertiary',
-        svgPathFill: 'surfaceItemQuaternary',
+        svgPathFill: 'surfaceQuaternary',
     },
 };
 
@@ -185,10 +185,10 @@ const responseAppearanceWarning = {
         labelTextColor: 'surfaceTextPrimary',
         descTextSize: 'm',
         imageSrc: responseIcon.Warning,
-        primaryButtonAppearance: 'warningPrimary sizeXXL solid',
-        secondaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
+        primaryButtonAppearance: 'surfaceSecondary sizeXXL solid',
+        secondaryButtonAppearance: 'warningPrimary sizeXXL solid',
         svgFill: 'warningPrimary',
-        svgPathFill: 'warningItemPrimary',
+        svgPathFill: 'warningPrimary',
     },
 };
 
@@ -212,12 +212,11 @@ const responseConfig = {
         responseConfig.appearance = appearanceConfig;
     },
 };
-const Response = urlWithAssetPrefix(function Response(props) {
-    const { appearance, className, dataTestId, dataTour, width, height, title, desc, bottomButton, primaryButton, secondaryButton, before, after, isSkeleton, onClickSecondaryButton, } = props;
+const Response = urlWithAssetPrefix(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(appearance, responseConfig);
     const propsGenerator = 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 = useMemo(() => {
         const src = imageSrc || svgSrc;
         const Image = SvgImage;
@@ -235,15 +234,16 @@ const Response = urlWithAssetPrefix(function Response(props) {
             return 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(props);
-    return (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, jsxs("div", { className: "response__wrapper", style: wrapperStyles, children: [ImageComponent && (jsx("div", { className: clsx('response__image', svgFillClass && `svg_fill_${svgFillClass}`, svgPathFillClass && `svg_path_fill_${svgPathFillClass}`), children: ImageComponent })), jsxs("div", { className: "response__wrapper-inner", children: [title && (jsx(Text, { className: "response__title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title })), desc && (jsx(Text, { className: "response__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] })] }), (primaryButtonLabel ||
+    return (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, jsxs("div", { className: "response__wrapper", style: wrapperStyles, children: [ImageComponent && (jsx("div", { className: clsx('response__image', svgFillClass && `svg_fill_${svgFillClass}`, svgPathFillClass && `svg_path_fill_${svgPathFillClass}`), children: ImageComponent })), jsxs("div", { className: "response__wrapper-inner", children: [title && (jsx(Text, { className: "response__title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title })), desc && (jsx(Text, { className: "response__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] })] }), (primaryButtonLabel ||
                 primaryButton ||
                 secondaryButtonLabel ||
                 secondaryButton ||
-                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] }));
-});
+                appearanceConfig) && (jsxs(Group, { className: "response__button", width: "fill", children: [primaryButtonLabel && showPrimaryButton ? (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 && showSecondaryButton ? (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 = {
     error: {

package/dist/components/SVGContent.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
 import { urlWithAssetPrefix } from '../hoc/urlWithAssetPrefix.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import 'react';
 import '@itcase/common';
 import '../context/UrlAssetPrefix.js';
 import 'lodash/camelCase';
@@ -20,13 +20,13 @@ import '../hooks.js';
 import '../hooks/useStyles/styleAttributes.js';
 import 'lodash/maxBy';
 
-const SVGContent = urlWithAssetPrefix(function SVGContent(props) {
+const SVGContent = urlWithAssetPrefix(forwardRef(function SVGContent(props, ref) {
     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}`), "data-testid": dataTestId, "data-tour": dataTour, 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}`), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: svgContentStyles, children: [src && jsx(SVG, { src: src }), SvgImage && jsx(SvgImage, {})] }));
+}));
 
 export { SVGContent };

package/dist/components/ScrollOnDrag.js

@@ -27,7 +27,6 @@ function ScrollOnDrag(props) {
     // @ts-expect-error
     const { scrollContainer: scrollContainerStyles, styles: styles } = 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 (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 }) }) }));
 }

package/dist/components/ScrollToView.js

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