@itcase/ui 1.8.27 → 1.8.30

package/dist/cjs/components/Notification.js

@@ -1,11 +1,13 @@
 'use strict';
 
+var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Text = require('../../Text_cjs_DPhKj3wf.js');
-var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
+var Tooltip = require('../../Tooltip_cjs_pBGCcXLZ.js');
+var Text = require('../../Text_cjs_C9fOm0nd.js');
+var _default = require('@itcase/icons/default');
 var Notifications = require('../context/Notifications.js');
 require('../context/UIContext.js');
 require('react');
@@ -19,142 +21,122 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
+require('react-inlinesvg');
+require('../../Link_cjs_DbRGq2Yk.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: _default.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: _default.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: _default.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: _default.icon20.Close,
+        closeIconFillIcon: 'warningItemPrimary',
     },
 };
 
-var notificationItemAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign({}, notificationItemAppearanceSize), notificationItemAppearanceStyle), notificationItemAppearanceError), notificationItemAppearanceSuccess), notificationItemAppearanceWarning);
+var notificationAppearance = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__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 (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = notificationConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
+    }, {});
     var propsGenerator = useDevicePropsGenerator.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.useStyles(props).styles;
-    return (jsxRuntime.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, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Text.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 && (jsxRuntime.jsx(Text.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 && (jsxRuntime.jsx("div", { className: clsx('notification__item-close', onClickClose && 'cursor_type_pointer'), onClick: function () { return onClickClose && onClickClose(id); }, children: closeButton }))] }), after] }));
+    return (jsxRuntime.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, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Text.Text, { className: "notification__item-title", size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsxRuntime.jsx(Text.Text, { className: "notification__item-text", size: descTextSize, textColor: descTextColor, children: desc })), close && (closeIcon || closeIconSrc) && (jsxRuntime.jsx(Tooltip.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 = Notifications.useNotifications();
     var hideNotifications = Notifications.useNotificationsAPI().hideNotifications;
-    var className = props.className, type = props.type, size = props.size, closeButton = props.closeButton, set = props.set;
-    return (jsxRuntime.jsx("div", { className: clsx('notification', className), children: jsxRuntime.jsx("div", { className: "notification__wrapper", children: notifications.map(function (notification, i) { return (jsxRuntime.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 (jsxRuntime.jsx("div", { className: clsx('notification', className), children: jsxRuntime.jsx("div", { className: "notification__wrapper", children: notifications.map(function (notification, i) { return (jsxRuntime.jsx(Notification, { id: notification.id, appearance: notification.appearance, title: notification.title, status: notification.status, text: notification.text, close: close, onClickClose: hideNotifications }, i)); }) }) }));
 }
 
-exports.NotificationItem = NotificationItem;
-exports.NotificationList = NotificationList;
-exports.notificationItemAppearance = notificationItemAppearance;
-exports.notificationItemConfig = notificationItemConfig;
+exports.Notification = Notification;
+exports.NotificationWrapper = NotificationWrapper;
+exports.notificationAppearance = notificationAppearance;
+exports.notificationConfig = notificationConfig;

package/dist/cjs/components/Overlay.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var Overlay = require('../../Overlay_cjs_BdAm_zrO.js');
+var Overlay = require('../../Overlay_cjs_CFOtnzDU.js');
 require('../../tslib.es6_cjs_CCZ3TN_7.js');
 require('react/jsx-runtime');
 require('clsx');

package/dist/cjs/components/Pagination.js

@@ -8,9 +8,9 @@ var ceil = require('lodash/ceil');
 var ReactPaginate = require('react-paginate');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var DropdownItem = require('../../DropdownItem_cjs_B_7anyaJ.js');
-var Tooltip = require('../../Tooltip_cjs_CaocDcQ5.js');
-var Text = require('../../Text_cjs_DPhKj3wf.js');
+var DropdownItem = require('../../DropdownItem_cjs_DPoFy70W.js');
+var Tooltip = require('../../Tooltip_cjs_pBGCcXLZ.js');
+var Text = require('../../Text_cjs_C9fOm0nd.js');
 var _default = require('@itcase/icons/default');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -24,7 +24,7 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Divider_cjs_DhqcldLH.js');
+require('../../Divider_cjs_BmCJj3TN.js');
 require('react-inlinesvg');
 require('../../Link_cjs_DbRGq2Yk.js');
 

package/dist/cjs/components/Radio.js

@@ -4,7 +4,7 @@ var tslib_es6 = require('../../tslib.es6_cjs_CCZ3TN_7.js');
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var Text = require('../../Text_cjs_DPhKj3wf.js');
+var Text = require('../../Text_cjs_C9fOm0nd.js');
 require('react');
 require('lodash/camelCase');
 require('lodash/castArray');
@@ -20,57 +20,149 @@ require('../hooks/useStyles/useStyles.js');
 require('lodash/maxBy');
 require('../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 = tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__assign(tslib_es6.__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 (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = radioConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator.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 (jsxRuntime.jsxs(Tag, { className: clsx(className, 'radio', fillClass && "fill_".concat(fillClass), shapeClass && "radio_shape_".concat(shapeClass)), htmlFor: id, children: [jsxRuntime.jsxs("div", { className: clsx('radio__item', stateCheckmarkFillClass &&
-                    "radio_checkmark_fill_".concat(stateCheckmarkFillClass)), children: [jsxRuntime.jsx("input", { id: id, className: "radio__input", type: "radio", disabled: isDisabled && 'disabled', checked: checked, onChange: onChange }), jsxRuntime.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" }), jsxRuntime.jsx("div", { className: "radio__state-checkmark", 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 }))] }));
+    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 (jsxRuntime.jsxs(Tag, { className: clsx(className, 'radio', fillClass && "fill_".concat(fillClass)), htmlFor: id, children: [jsxRuntime.jsxs("div", { className: clsx('radio__item'), children: [jsxRuntime.jsx("input", { id: id, className: "radio__input", type: "radio", disabled: isDisabled && 'disabled', checked: checked, onChange: onChange }), jsxRuntime.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" }), jsxRuntime.jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && "fill_".concat(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;
 exports.radioAppearance = radioAppearance;
 exports.radioConfig = radioConfig;
-exports.radioState = radioState;

package/dist/cjs/components/Response.js

@@ -7,9 +7,9 @@ var clsx = require('clsx');
 var SVG = require('react-inlinesvg');
 var useDevicePropsGenerator = require('../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
 var useStyles = require('../hooks/useStyles/useStyles.js');
-var Button = require('../../Button_cjs_CYUpbdMO.js');
+var Button = require('../../Button_cjs_C05Joa8j.js');
 var Group = require('../../Group_cjs_Cwt0gWk4.js');
-var Text = require('../../Text_cjs_DPhKj3wf.js');
+var Text = require('../../Text_cjs_C9fOm0nd.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('lodash/upperFirst');
@@ -22,9 +22,9 @@ require('react-responsive');
 require('../utils/setViewportProperty.js');
 require('lodash/maxBy');
 require('../hooks/useStyles/styleAttributes.js');
-require('../../Tooltip_cjs_CaocDcQ5.js');
+require('../../Tooltip_cjs_pBGCcXLZ.js');
 require('../../Link_cjs_DbRGq2Yk.js');
-require('../../Loader_cjs___VikiqS.js');
+require('../../Loader_cjs_CCrbD8Em.js');
 
 var responseAppearanceConfirm = {
     confirm: {
@@ -47,6 +47,8 @@ var responseAppearanceFail = {
         descTextSize: 'm',
         primaryButtonAppearance: 'accentPrimary sizeXXL',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL',
+        svgFill: 'surfaceTertiary',
+        svgPathFill: 'surfaceItemQuaternary',
     },
 };
 
@@ -59,6 +61,8 @@ var responseAppearanceNothingFound = {
         descTextSize: 'm',
         primaryButtonAppearance: 'accentPrimary sizeXXL',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL',
+        svgFill: 'surfaceTertiary',
+        svgPathFill: 'surfaceItemQuaternary',
     },
 };
 
@@ -71,6 +75,8 @@ var responseAppearanceRefresh = {
         descTextSize: 'm',
         primaryButtonAppearance: 'accentPrimary sizeXXL',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL',
+        svgFill: 'surfaceTertiary',
+        svgPathFill: 'surfaceItemQuaternary',
     },
 };
 
@@ -83,6 +89,8 @@ var responseAppearanceError = {
         descTextSize: 'm',
         primaryButtonAppearance: 'errorPrimary sizeXXL',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL',
+        svgFill: 'errorPrimary',
+        svgPathFill: 'errorItemPrimary',
     },
 };
 
@@ -95,6 +103,8 @@ var responseAppearanceSuccess = {
         descTextSize: 'm',
         primaryButtonAppearance: 'accentPrimary sizeXXL',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL',
+        svgFill: 'surfaceTertiary',
+        svgPathFill: 'surfaceItemQuaternary',
     },
 };
 
@@ -107,6 +117,8 @@ var responseAppearanceUnableLoadData = {
         descTextSize: 'm',
         primaryButtonAppearance: 'accentPrimary sizeXXL',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL',
+        svgFill: 'surfaceTertiary',
+        svgPathFill: 'surfaceItemQuaternary',
     },
 };
 
@@ -119,6 +131,8 @@ var responseAppearanceWarning = {
         descTextSize: 'm',
         primaryButtonAppearance: 'warningPrimary sizeXXL',
         secondaryButtonAppearance: 'surfaceSecondary sizeXXL',
+        svgFill: 'warningPrimary',
+        svgPathFill: 'warningItemPrimary',
     },
 };
 
@@ -131,13 +145,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 (tslib_es6.__assign(tslib_es6.__assign({}, resultConfig), (_a = responseConfig.appearance) === null || _a === void 0 ? void 0 : _a[appearanceKey]));
     }, {});
     var propsGenerator = useDevicePropsGenerator.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 = React.useMemo(function () {
         var src = imageSrc || svgSrc;
         var Image = SvgImage;
@@ -166,7 +180,7 @@ function Response(props) {
     }, [imageSrc, svgSrc, SvgImage, width, height, svgFillClass]);
     // @ts-expect-error
     var _a = useStyles.useStyles(props), responseStyles = _a.styles, wrapperStyles = _a.wrapper;
-    return (jsxRuntime.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, jsxRuntime.jsxs("div", { className: "response__wrapper", style: wrapperStyles, children: [jsxRuntime.jsx("div", { className: clsx('response__image', svgFillClass && "svg_fill_".concat(svgFillClass), svgPathFillClass && "svg_path_fill_".concat(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', 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, jsxRuntime.jsxs("div", { className: "response__wrapper", style: wrapperStyles, children: [jsxRuntime.jsx("div", { className: clsx('response__image', svgFillClass && "svg_fill_".concat(svgFillClass), svgPathFillClass && "svg_path_fill_".concat(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 ||