@itcase/ui 1.8.25 → 1.8.29

package/dist/components/Notification.js

@@ -1,9 +1,11 @@
+import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { T as Text } from '../Text_es_BRb3qqKM.js';
-import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
+import { I as Icon } from '../Tooltip_es_frBCZDrO.js';
+import { T as Text } from '../Text_es_BfLRfj-5.js';
+import { icon20 } from '@itcase/icons/default';
 import { useNotifications, useNotificationsAPI } from '../context/Notifications.js';
 import '../context/UIContext.js';
 import 'react';
@@ -17,139 +19,119 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
+import 'react-inlinesvg';
+import '../Link_es_DxtZLeKY.js';
 
-var notificationItemAppearanceError = {
-    error: {
-        fill: 'errorPrimary',
-        fillHover: 'errorPrimaryHover',
-        labelTextColor: 'errorTextPrimary',
-        labelTextColorHover: 'errorTextPrimary',
-        loaderFill: 'errorPrimary',
-        loaderItemFill: 'errorItemPrimary',
+var notificationAppearanceDefault = {
+    defaultPrimary: {
+        fill: 'surfacePrimary',
+        fillHover: 'surfacePrimaryHover',
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'xxl',
+        descTextColor: 'surfaceTextPrimary',
+        descTextSize: 'm',
+        borderColor: 'surfaceBorderPrimary',
+        elevation: 8,
+        textColor: 'surfaceTextPrimary',
+        iconSize: 20,
+        closeIcon: icon20.Close,
+        closeIconFillIcon: 'surfaceItemPrimary',
     },
 };
 
-var notificationItemAppearanceSize = {
-    sizeXXL: {
-        size: 'xxl',
-        labelTextSize: 'xxl',
-        iconAfterFillSize: '24',
-        iconAfterSize: '24',
-        iconBeforeFillSize: '24',
-        iconBeforeSize: '24',
-    },
-    sizeXL: {
-        size: 'xl',
-        labelTextSize: 'l',
-        iconAfterFillSize: '24',
-        iconAfterSize: '24',
-        iconBeforeFillSize: '24',
-        iconBeforeSize: '24',
-    },
-    sizeL: {
-        size: 'l',
-        labelTextSize: 'l',
-        iconAfterFillSize: '24',
-        iconAfterSize: '24',
-        iconBeforeFillSize: '24',
-        iconBeforeSize: '24',
-    },
-    sizeM: {
-        size: 'm',
-        labelTextSize: 'm',
-        iconAfterFillSize: '24',
-        iconAfterSize: '24',
-        iconBeforeFillSize: '24',
-        iconBeforeSize: '24',
-    },
-    sizeS: {
-        size: 's',
-        labelTextSize: 's',
-        iconAfterFillSize: '20',
-        iconAfterSize: '20',
-        iconBeforeFillSize: '20',
-        iconBeforeSize: '20',
-    },
-    sizeXS: {
-        size: 'xs',
-        labelTextSize: 'xs',
-        iconAfterFillSize: '16',
-        iconAfterSize: '16',
-        iconBeforeFillSize: '16',
-        iconBeforeSize: '16',
-    },
-    sizeXXS: {
-        size: 'xxs',
-        labelTextSize: 'xs',
-        iconAfterFillSize: '14',
-        iconAfterSize: '14',
-        iconBeforeFillSize: '14',
-        iconBeforeSize: '14',
+var notificationAppearanceError = {
+    errorPrimary: {
+        fill: 'errorPrimary',
+        fillHover: 'errorPrimaryHover',
+        titleTextColor: 'errorTextPrimary',
+        titleTextSize: 'xxl',
+        descTextColor: 'errorTextPrimary',
+        descTextSize: 'm',
+        borderColor: 'errorBorderPrimary',
+        elevation: 8,
+        textColor: 'errorTextPrimary',
+        iconSize: 20,
+        closeIcon: icon20.Close,
+        closeIconFillIcon: 'errorItemPrimary',
     },
 };
 
-var notificationItemAppearanceStyle = {
-    full: {
-        borderColor: '0',
-    },
+var notificationAppearanceSize = {};
+
+var notificationAppearanceStyle = {
+    full: {},
     ghost: {
         fill: 'none',
-        borderColor: '0',
+        borderColor: 'none',
     },
     outlined: {
         fill: 'none',
     },
     solid: {
-        borderColor: '0',
+        borderColor: 'none',
     },
 };
 
-var notificationItemAppearanceSuccess = {
-    success: {
+var notificationAppearanceSuccess = {
+    successPrimary: {
         fill: 'successPrimary',
         fillHover: 'successPrimaryHover',
-        labelTextColor: 'successTextSecondary',
-        labelTextColorHover: 'successTextSecondary',
-        loaderFill: 'successPrimary',
-        loaderItemFill: 'successItemPrimary',
+        titleTextColor: 'successTextPrimary',
+        titleTextSize: 'xxl',
+        descTextColor: 'successTextPrimary',
+        descTextSize: 'm',
+        borderColor: 'successBorderPrimary',
+        elevation: 8,
+        textColor: 'successTextPrimary',
+        iconSize: 20,
+        closeIcon: icon20.Close,
+        closeIconFillIcon: 'accentItemPrimary',
     },
 };
 
-var notificationItemAppearanceWarning = {
-    warning: {
+var notificationAppearanceWarning = {
+    warningPrimary: {
         fill: 'warningPrimary',
         fillHover: 'warningPrimaryHover',
-        labelTextColor: 'warningTextSecondary',
-        labelTextColorHover: 'warningTextSecondary',
-        loaderFill: 'warningPrimary',
-        loaderItemFill: 'warningItemPrimary',
+        titleTextColor: 'warningTextPrimary',
+        titleTextSize: 'xxl',
+        descTextColor: 'warningTextPrimary',
+        descTextSize: 'm',
+        borderColor: 'surfaceBorderPrimary',
+        elevation: 8,
+        textColor: 'warningTextPrimary',
+        iconSize: 20,
+        closeIcon: icon20.Close,
+        closeIconFillIcon: 'warningItemPrimary',
     },
 };
 
-var notificationItemAppearance = __assign(__assign(__assign(__assign(__assign({}, notificationItemAppearanceSize), notificationItemAppearanceStyle), notificationItemAppearanceError), notificationItemAppearanceSuccess), notificationItemAppearanceWarning);
+var notificationAppearance = __assign(__assign(__assign(__assign(__assign(__assign({}, notificationAppearanceDefault), notificationAppearanceSize), notificationAppearanceStyle), notificationAppearanceError), notificationAppearanceSuccess), notificationAppearanceWarning);
 
-var notificationItemConfig = {
-    appearance: notificationItemAppearance,
+var notificationConfig = {
+    appearance: notificationAppearance,
     setAppearance: function (appearanceConfig) {
-        notificationItemConfig.appearance = appearanceConfig;
+        notificationConfig.appearance = appearanceConfig;
     },
 };
-function NotificationItem(props) {
-    var id = props.id, className = props.className, appearance = props.appearance, size = props.size, title = props.title, titleTextColor = props.titleTextColor, _a = props.titleTextSize, titleTextSize = _a === void 0 ? 'm' : _a, status = props.status, text = props.text, textColor = props.textColor, _b = props.textSize, textSize = _b === void 0 ? 's' : _b, dataTestId = props.dataTestId, dataTour = props.dataTour, before = props.before, after = props.after, closeButton = props.closeButton, set = props.set, onClickClose = props.onClickClose;
-    var appearanceConfig = notificationItemConfig.appearance &&
-        notificationItemConfig.appearance[appearance];
+function Notification(props) {
+    var id = props.id, className = props.className, type = props.type, appearance = props.appearance, title = props.title, desc = props.desc, status = props.status, dataTestId = props.dataTestId, dataTour = props.dataTour, before = props.before, after = props.after, close = props.close, isSkeleton = props.isSkeleton, onClickClose = props.onClickClose;
+    var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
+        var _a;
+        return (__assign(__assign({}, resultConfig), (_a = notificationConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
+    }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, widthClass = propsGenerator.widthClass;
+    var fillClass = propsGenerator.fillClass, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, elevationClass = propsGenerator.elevationClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass, closeIcon = propsGenerator.closeIcon, closeIconFill = propsGenerator.closeIconFill, closeIconFillIcon = propsGenerator.closeIconFillIcon, closeIconFillSize = propsGenerator.closeIconFillSize, closeIconShape = propsGenerator.closeIconShape, closeIconSize = propsGenerator.closeIconSize, closeIconSrc = propsGenerator.closeIconSrc;
     // @ts-expect-error
     var notificationStyles = useStyles(props).styles;
-    return (jsxs("div", { className: clsx('notification__item', status && "notification__item_status_".concat(status), set && "notification__item_set_".concat(set), size && "notification__item_set_".concat(size), closeButton && 'notification__item_type_close-button', widthClass && "width_".concat(widthClass), fillClass && "fill_".concat(fillClass)), "data-testid": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsx(Text, { className: "notification__item-title", size: titleTextSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextSize), textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.titleTextColor), children: title })), text && (jsx(Text, { className: "notification__item-text", size: textSize || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.textColor), children: text })), closeButton && (jsx("div", { className: clsx('notification__item-close', onClickClose && 'cursor_type_pointer'), onClick: function () { return onClickClose && onClickClose(id); }, children: closeButton }))] }), after] }));
+    return (jsxs("div", { className: clsx('notification__item', status && "notification__item_status_".concat(status), type && "notification__item_set_".concat(type), elevationClass && "elevation_".concat(elevationClass), sizeClass && "notification__item_set_".concat(sizeClass), widthClass && "width_".concat(widthClass), fillClass && "fill_".concat(fillClass), isSkeleton && "notification__item_skeleton"), "data-testid": dataTestId, "data-tour": dataTour, style: notificationStyles, children: [before, jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsx(Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsx(Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: desc })), close && (closeIcon || closeIconSrc) && (jsx(Icon, { className: clsx('notification__item-close', 'cursor_type_pointer'), fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: function () { return onClickClose && onClickClose(id); } }))] }), after] }));
 }
 
-function NotificationList(props) {
+function NotificationWrapper(props) {
     var notifications = useNotifications();
     var hideNotifications = useNotificationsAPI().hideNotifications;
-    var className = props.className, type = props.type, size = props.size, closeButton = props.closeButton, set = props.set;
-    return (jsx("div", { className: clsx('notification', className), children: jsx("div", { className: "notification__wrapper", children: notifications.map(function (notification, i) { return (jsx(NotificationItem, { id: notification.id, type: notification.type || type, size: notification.size || size, title: notification.title, status: notification.status, text: notification.text, closeButton: closeButton, set: notification.set || set, onClickClose: hideNotifications }, i)); }) }) }));
+    var className = props.className, close = props.close;
+    return (jsx("div", { className: clsx('notification', className), children: jsx("div", { className: "notification__wrapper", children: notifications.map(function (notification, i) { return (jsx(Notification, { id: notification.id, appearance: notification.appearance, title: notification.title, status: notification.status, text: notification.text, close: close, onClickClose: hideNotifications }, i)); }) }) }));
 }
 
-export { NotificationItem, NotificationList, notificationItemAppearance, notificationItemConfig };
+export { Notification, NotificationWrapper, notificationAppearance, notificationConfig };

package/dist/components/Overlay.js

@@ -1,4 +1,4 @@
-export { O as Overlay, a as overlayAppearance, o as overlayConfig } from '../Overlay_es_cI_-_xUO.js';
+export { O as Overlay, a as overlayAppearance, o as overlayConfig } from '../Overlay_es_DczPjVL9.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'clsx';

package/dist/components/Pagination.js

@@ -6,9 +6,9 @@ import ceil from 'lodash/ceil';
 import ReactPaginate from 'react-paginate';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { D as Dropdown, a as DropdownItem } from '../DropdownItem_es_B4EZYdJA.js';
-import { I as Icon } from '../Tooltip_es_D1w1s33u.js';
-import { T as Text } from '../Text_es_BRb3qqKM.js';
+import { D as Dropdown, a as DropdownItem } from '../DropdownItem_es_CVztMEm0.js';
+import { I as Icon } from '../Tooltip_es_frBCZDrO.js';
+import { T as Text } from '../Text_es_BfLRfj-5.js';
 import { icon32, icon24 } from '@itcase/icons/default';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -22,7 +22,7 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Divider_es_BEYLRagS.js';
+import '../Divider_es_kY-30pft.js';
 import 'react-inlinesvg';
 import '../Link_es_DxtZLeKY.js';
 

package/dist/components/Radio.js

@@ -2,7 +2,7 @@ import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
-import { T as Text } from '../Text_es_BRb3qqKM.js';
+import { T as Text } from '../Text_es_BfLRfj-5.js';
 import 'react';
 import 'lodash/camelCase';
 import 'lodash/castArray';
@@ -18,54 +18,147 @@ import '../hooks/useStyles/useStyles.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
 
-var radioAppearance = {
-    dev: {
+var radioAppearanceDefault = {
+    defaultPrimary: {
+        fillCheckmark: 'surfacePrimary',
+        fillRadio: 'surfaceTertiary',
+        fillRadioActive: 'surfaceTertiary',
+        fillRadioActiveHover: 'surfaceTertiary',
+        fillRadioHover: 'surfaceTertiary',
         labelTextColor: 'surfaceTextPrimary',
-        labelTextSize: 'm',
         descTextColor: 'surfaceTextPrimary',
-        descTextSize: 's',
-        stateBorderColor: 'surfaceBorderTertiary',
-        stateBorderWidth: 1,
-        stateCheckmarkFill: 'surfaceItemAccent',
-        stateShape: 'circular',
+        borderColorRadio: 'surfaceBorderPrimary',
+        borderColorRadioActive: 'surfaceBorderPrimary',
+        borderColorRadioActiveHover: 'surfaceBorderPrimary',
+        borderColorRadioHover: 'surfaceBorderPrimary',
+    },
+    defaultSecondary: {
+        fill: 'surfacePrimary',
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderQuaternary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconClearFill: 'surfaceItemPrimary',
+        placeholderTextColor: 'surfaceTextSecondary',
+    },
+};
+
+var radioAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'warningTertiary',
+        borderColor: 'warningBorderQuaternary',
+        borderHover: 'warningBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+        iconBeforeFill: 'warningItemQuaternary',
+        iconClearFill: 'warningItemPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
     },
 };
-var radioState = {
-    normal: {
-        borderColor: 'surfaceBorderQuaternary',
-        placeholderTextColor: 'secondaryTextSecondary',
+
+var radioAppearanceError = {
+    error: {
+        fill: 'errorPrimary',
+        fillHover: 'errorPrimaryHover',
+        labelTextColor: 'errorTextPrimary',
+        labelTextColorHover: 'errorTextPrimary',
+        loaderFill: 'errorPrimary',
+        loaderItemFill: 'errorItemPrimary',
     },
 };
 
+var radioAppearanceRequire = {
+    requirePrimary: {
+        fill: 'warningTertiary',
+        borderColor: 'warningBorderQuaternary',
+        borderHover: 'warningBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+        iconBeforeFill: 'warningItemQuaternary',
+        iconClearFill: 'warningItemPrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+    },
+    requireSecondary: {
+        fill: 'surfaceSecondary',
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderQuaternary',
+        iconBeforeFill: 'surfaceItemQuaternary',
+        iconClearFill: 'surfaceItemPrimary',
+        placeholderTextColor: 'surfaceTextSecondary',
+    },
+};
+
+var radioAppearanceSize = {
+    sizeM: {
+        size: 'm',
+        labelTextSize: 'm',
+        descTextSize: 'xs',
+    },
+    sizeXS: {
+        size: 'xs',
+        labelTextSize: 'm',
+        descTextSize: 'xs',
+    },
+    sizeXXS: {
+        size: 'xxs',
+        labelTextSize: 'm',
+        descTextSize: 'xs',
+    },
+};
+
+var radioAppearanceStyle = {
+    full: {
+        borderColor: '0',
+    },
+    ghost: {
+        fill: 'none',
+        borderColor: '0',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    solid: {
+        borderColor: '0',
+    },
+};
+
+var radioAppearanceSuccess = {
+    success: {
+        fill: 'successPrimary',
+        fillHover: 'successPrimaryHover',
+        labelTextColor: 'successTextSecondary',
+        labelTextColorHover: 'successTextSecondary',
+        loaderFill: 'successPrimary',
+        loaderItemFill: 'successItemPrimary',
+    },
+};
+
+var radioAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign({}, radioAppearanceDefault), radioAppearanceError), radioAppearanceSuccess), radioAppearanceRequire), radioAppearanceDisabled), radioAppearanceSize), radioAppearanceStyle);
+
 var radioConfig = {
     appearance: radioAppearance,
-    state: radioState,
     setAppearance: function (appearanceConfig) {
         radioConfig.appearance = appearanceConfig;
     },
-    setState: function (newComponent) {
-        radioConfig.state = newComponent;
-    },
 };
 function Radio(props) {
-    var id = props.id, className = props.className, appearance = props.appearance, label = props.label, labelTextColor = props.labelTextColor, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, desc = props.desc, descTextColor = props.descTextColor, descTextSize = props.descTextSize, descTextWeight = props.descTextWeight, disabled = props.disabled, isDisabled = props.isDisabled, checked = props.checked, _a = props.tag, Tag = _a === void 0 ? 'label' : _a, onChange = props.onChange;
+    var id = props.id, className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, checked = props.checked, _a = props.tag, Tag = _a === void 0 ? 'label' : _a, onChange = props.onChange;
     var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
         var _a;
         return (__assign(__assign({}, resultConfig), (_a = radioConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, _b = propsGenerator.shapeClass, shapeClass = _b === void 0 ? 'circular' : _b, stateBorderColorClass = propsGenerator.stateBorderColorClass, stateBorderWidthClass = propsGenerator.stateBorderWidthClass, stateCheckmarkFillClass = propsGenerator.stateCheckmarkFillClass, stateShapeClass = propsGenerator.stateShapeClass;
-    var stateFillClass = propsGenerator.getClassName(checked ? 'stateFillChecked' : 'stateFill', {
-        prefix: 'fill_',
-    });
-    var stateFillDisabledClass = propsGenerator.getClassName(checked ? 'stateFillDisabledChecked' : 'stateFillDisabled', { prefix: 'fill_' });
-    var stateBorderColorHoverClass = propsGenerator.getClassName(checked ? 'stateBorderColorHoverChecked' : 'stateBorderColorHover', { prefix: 'border-color_hover_' });
-    var stateBorderColorDisabledClass = propsGenerator.getClassName(checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled', { prefix: 'border-color_' });
-    return (jsxs(Tag, { className: clsx(className, 'radio', fillClass && "fill_".concat(fillClass), shapeClass && "radio_shape_".concat(shapeClass)), htmlFor: id, children: [jsxs("div", { className: clsx('radio__item', stateCheckmarkFillClass &&
-                    "radio_checkmark_fill_".concat(stateCheckmarkFillClass)), children: [jsx("input", { id: id, className: "radio__input", type: "radio", disabled: isDisabled && 'disabled', checked: checked, onChange: onChange }), jsx("div", { className: clsx('radio__state', disabled ? stateFillDisabledClass : stateFillClass, disabled
-                            ? stateBorderColorDisabledClass
-                            : stateBorderColorClass &&
-                                "border-color_".concat(stateBorderColorClass), stateBorderColorHoverClass, stateShapeClass && "radio__state_shape_".concat(stateShapeClass), stateBorderWidthClass && "border-width_".concat(stateBorderWidthClass)), children: "\u00A0" }), jsx("div", { className: "radio__state-checkmark", 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 }))] }));
+    var fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, fillRadioActiveClass = propsGenerator.fillRadioActiveClass, fillRadioActiveHoverClass = propsGenerator.fillRadioActiveHoverClass, fillRadioClass = propsGenerator.fillRadioClass, fillRadioHoverClass = propsGenerator.fillRadioHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorRadioActiveClass = propsGenerator.borderColorRadioActiveClass, borderColorRadioActiveHoverClass = propsGenerator.borderColorRadioActiveHoverClass, borderColorRadioClass = propsGenerator.borderColorRadioClass, borderColorRadioHoverClass = propsGenerator.borderColorRadioHoverClass, _b = propsGenerator.shapeClass, shapeClass = _b === void 0 ? 'circular' : _b;
+    return (jsxs(Tag, { className: clsx(className, 'radio', fillClass && "fill_".concat(fillClass)), htmlFor: id, children: [jsxs("div", { className: clsx('radio__item'), children: [jsx("input", { id: id, className: "radio__input", type: "radio", disabled: isDisabled && 'disabled', checked: checked, onChange: onChange }), jsx("div", { className: clsx('radio__state', shapeClass && "shape_".concat(shapeClass), !checked
+                            ? fillRadioClass && "fill_".concat(fillRadioClass)
+                            : fillRadioActiveClass && "fill_active_".concat(fillRadioActiveClass), !checked
+                            ? fillRadioHoverClass && "fill_hover_".concat(fillRadioHoverClass)
+                            : fillRadioActiveHoverClass &&
+                                "fill_active_hover_".concat(fillRadioActiveHoverClass), !checked
+                            ? borderColorRadioClass && "border-color_".concat(borderColorRadioClass)
+                            : borderColorRadioActiveClass &&
+                                "border-color_active_".concat(borderColorRadioActiveClass), !checked
+                            ? borderColorRadioHoverClass &&
+                                "border-color_hover_".concat(borderColorRadioHoverClass)
+                            : borderColorRadioActiveHoverClass &&
+                                "border-color_active_hover_".concat(borderColorRadioActiveHoverClass)), children: "\u00A0" }), jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && "fill_".concat(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, radioState };
+export { Radio, radioAppearance, radioConfig };

package/dist/components/Response.js

@@ -5,9 +5,9 @@ import clsx from 'clsx';
 import SVG from 'react-inlinesvg';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Button } from '../Button_es_Dp6yFZgn.js';
+import { B as Button } from '../Button_es_CO_dwo-N.js';
 import { G as Group } from '../Group_es_CYW2Hquh.js';
-import { T as Text } from '../Text_es_BRb3qqKM.js';
+import { T as Text } from '../Text_es_BfLRfj-5.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import 'lodash/upperFirst';
@@ -20,9 +20,9 @@ import 'react-responsive';
 import '../utils/setViewportProperty.js';
 import 'lodash/maxBy';
 import '../hooks/useStyles/styleAttributes.js';
-import '../Tooltip_es_D1w1s33u.js';
+import '../Tooltip_es_frBCZDrO.js';
 import '../Link_es_DxtZLeKY.js';
-import '../Loader_es_DHKB6tTw.js';
+import '../Loader_es_B2auu_rc.js';
 
 var responseAppearanceConfirm = {
     confirm: {
@@ -45,6 +45,8 @@ var responseAppearanceFail = {
         descTextSize: 'm',
         primaryButtonAppearance: 'accentPrimary sizeXXL',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL',
+        svgFill: 'surfaceTertiary',
+        svgPathFill: 'surfaceItemQuaternary',
     },
 };
 
@@ -57,6 +59,8 @@ var responseAppearanceNothingFound = {
         descTextSize: 'm',
         primaryButtonAppearance: 'accentPrimary sizeXXL',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL',
+        svgFill: 'surfaceTertiary',
+        svgPathFill: 'surfaceItemQuaternary',
     },
 };
 
@@ -69,6 +73,8 @@ var responseAppearanceRefresh = {
         descTextSize: 'm',
         primaryButtonAppearance: 'accentPrimary sizeXXL',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL',
+        svgFill: 'surfaceTertiary',
+        svgPathFill: 'surfaceItemQuaternary',
     },
 };
 
@@ -81,6 +87,8 @@ var responseAppearanceError = {
         descTextSize: 'm',
         primaryButtonAppearance: 'errorPrimary sizeXXL',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL',
+        svgFill: 'errorPrimary',
+        svgPathFill: 'errorItemPrimary',
     },
 };
 
@@ -93,6 +101,8 @@ var responseAppearanceSuccess = {
         descTextSize: 'm',
         primaryButtonAppearance: 'accentPrimary sizeXXL',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL',
+        svgFill: 'surfaceTertiary',
+        svgPathFill: 'surfaceItemQuaternary',
     },
 };
 
@@ -105,6 +115,8 @@ var responseAppearanceUnableLoadData = {
         descTextSize: 'm',
         primaryButtonAppearance: 'accentPrimary sizeXXL',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL',
+        svgFill: 'surfaceTertiary',
+        svgPathFill: 'surfaceItemQuaternary',
     },
 };
 
@@ -117,6 +129,8 @@ var responseAppearanceWarning = {
         descTextSize: 'm',
         primaryButtonAppearance: 'warningPrimary sizeXXL',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL',
+        svgFill: 'warningPrimary',
+        svgPathFill: 'warningItemPrimary',
     },
 };
 
@@ -129,13 +143,13 @@ var responseConfig = {
     },
 };
 function Response(props) {
-    var className = props.className, appearance = props.appearance, width = props.width, height = props.height, title = props.title, desc = props.desc, primaryButton = props.primaryButton, secondaryButton = props.secondaryButton, onClickSecondaryButton = props.onClickSecondaryButton, before = props.before, after = props.after;
+    var className = props.className, appearance = props.appearance, width = props.width, height = props.height, title = props.title, desc = props.desc, primaryButton = props.primaryButton, onClickSecondaryButton = props.onClickSecondaryButton, secondaryButton = props.secondaryButton, before = props.before, after = props.after, isSkeleton = props.isSkeleton;
     var appearanceConfig = appearance === null || appearance === void 0 ? void 0 : appearance.split(' ').reduce(function (resultConfig, appearanceKey) {
         var _a;
         return (__assign(__assign({}, resultConfig), (_a = responseConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextWeight = propsGenerator.titleTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass; propsGenerator.textAlignClass; var primaryButtonAfter = propsGenerator.primaryButtonAfter, primaryButtonAppearance = propsGenerator.primaryButtonAppearance, primaryButtonBefore = propsGenerator.primaryButtonBefore, primaryButtonFill = propsGenerator.primaryButtonFill, primaryButtonFillHover = propsGenerator.primaryButtonFillHover, primaryButtonLabel = propsGenerator.primaryButtonLabel, primaryButtonLabelTextColor = propsGenerator.primaryButtonLabelTextColor, primaryButtonLabelTextSize = propsGenerator.primaryButtonLabelTextSize, primaryButtonShape = propsGenerator.primaryButtonShape, primaryButtonSize = propsGenerator.primaryButtonSize, primaryButtonWidth = propsGenerator.primaryButtonWidth, secondaryButtonAfter = propsGenerator.secondaryButtonAfter, secondaryButtonAppearance = propsGenerator.secondaryButtonAppearance, secondaryButtonBefore = propsGenerator.secondaryButtonBefore, secondaryButtonFill = propsGenerator.secondaryButtonFill, secondaryButtonFillHover = propsGenerator.secondaryButtonFillHover, secondaryButtonLabel = propsGenerator.secondaryButtonLabel, secondaryButtonLabelTextColor = propsGenerator.secondaryButtonLabelTextColor, secondaryButtonLabelTextSize = propsGenerator.secondaryButtonLabelTextSize, secondaryButtonShape = propsGenerator.secondaryButtonShape, secondaryButtonSize = propsGenerator.secondaryButtonSize, secondaryButtonWidth = propsGenerator.secondaryButtonWidth, onClickPrimaryButton = propsGenerator.onClickPrimaryButton, dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, imageSrc = propsGenerator.imageSrc, shapeClass = propsGenerator.shapeClass, svgFillClass = propsGenerator.svgFillClass, SvgImage = propsGenerator.SvgImage, svgPathFillClass = propsGenerator.svgPathFillClass, svgSrc = propsGenerator.svgSrc;
+    var fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, titleTextWeight = propsGenerator.titleTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, onClickPrimaryButton = propsGenerator.onClickPrimaryButton, primaryButtonAfter = propsGenerator.primaryButtonAfter, primaryButtonAppearance = propsGenerator.primaryButtonAppearance, primaryButtonBefore = propsGenerator.primaryButtonBefore, primaryButtonFill = propsGenerator.primaryButtonFill, primaryButtonFillHover = propsGenerator.primaryButtonFillHover, primaryButtonLabel = propsGenerator.primaryButtonLabel, primaryButtonLabelTextColor = propsGenerator.primaryButtonLabelTextColor, primaryButtonLabelTextSize = propsGenerator.primaryButtonLabelTextSize, primaryButtonShape = propsGenerator.primaryButtonShape, primaryButtonSize = propsGenerator.primaryButtonSize, primaryButtonWidth = propsGenerator.primaryButtonWidth, secondaryButtonAfter = propsGenerator.secondaryButtonAfter, secondaryButtonAppearance = propsGenerator.secondaryButtonAppearance, secondaryButtonBefore = propsGenerator.secondaryButtonBefore, secondaryButtonFill = propsGenerator.secondaryButtonFill, secondaryButtonFillHover = propsGenerator.secondaryButtonFillHover, secondaryButtonLabel = propsGenerator.secondaryButtonLabel, secondaryButtonLabelTextColor = propsGenerator.secondaryButtonLabelTextColor, secondaryButtonLabelTextSize = propsGenerator.secondaryButtonLabelTextSize, secondaryButtonShape = propsGenerator.secondaryButtonShape, secondaryButtonSize = propsGenerator.secondaryButtonSize, secondaryButtonWidth = propsGenerator.secondaryButtonWidth, dataTestId = propsGenerator.dataTestId, dataTour = propsGenerator.dataTour, imageSrc = propsGenerator.imageSrc, shapeClass = propsGenerator.shapeClass, svgFillClass = propsGenerator.svgFillClass, SvgImage = propsGenerator.SvgImage, svgPathFillClass = propsGenerator.svgPathFillClass, svgSrc = propsGenerator.svgSrc;
     var ImageComponent = useMemo(function () {
         var src = imageSrc || svgSrc;
         var Image = SvgImage;
@@ -164,7 +178,7 @@ function Response(props) {
     }, [imageSrc, svgSrc, SvgImage, width, height, svgFillClass]);
     // @ts-expect-error
     var _a = useStyles(props), responseStyles = _a.styles, wrapperStyles = _a.wrapper;
-    return (jsxs("div", { className: clsx(className, 'response', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "response_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass)), "data-testid": dataTestId, "data-tour": dataTour, style: responseStyles, children: [before, jsxs("div", { className: "response__wrapper", style: wrapperStyles, children: [jsx("div", { className: clsx('response__image', svgFillClass && "svg_fill_".concat(svgFillClass), svgPathFillClass && "svg_path_fill_".concat(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', fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), shapeClass && "response_shape_".concat(shapeClass), borderColorClass && "border-color_".concat(borderColorClass), borderColorHoverClass && "border-color_hover_".concat(borderColorHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), isSkeleton && "response_skeleton"), "data-testid": dataTestId, "data-tour": dataTour, style: responseStyles, children: [before, jsxs("div", { className: "response__wrapper", style: wrapperStyles, children: [jsx("div", { className: clsx('response__image', svgFillClass && "svg_fill_".concat(svgFillClass), svgPathFillClass && "svg_path_fill_".concat(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 ||