@itcase/ui 1.3.24 → 1.3.25

package/dist/cjs/components/Cell.js

@@ -39,8 +39,8 @@ function Cell(props) {
     var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
     var bgFillActiveClass = classGenerator.bgFillActiveClass, bgFillClass = classGenerator.bgFillClass, bgFillDisabledClass = classGenerator.bgFillDisabledClass, bgFillHoverClass = classGenerator.bgFillHoverClass, bgShapeClass = classGenerator.bgShapeClass, directionClass = classGenerator.directionClass, fillActiveClass = classGenerator.fillActiveClass, fillClass = classGenerator.fillClass, fillDisabledClass = classGenerator.fillDisabledClass, fillHoverClass = classGenerator.fillHoverClass, gapClass = classGenerator.gapClass, shapeClass = classGenerator.shapeClass, widthClass = classGenerator.widthClass;
     // @ts-expect-error
-    var cellStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsxs("div", { className: clsx(className, 'cell', mode && "cell_mode_".concat(mode), size && "cell_size_".concat(size), set && "cell_set_".concat(set), bgFillClass && "fill_".concat(bgFillClass), bgFillHoverClass && "fill_hover_".concat(bgFillHoverClass), isActive && bgFillActiveClass && "fill_active_".concat(bgFillActiveClass), isDisabled && bgFillDisabledClass && "fill_disabled_".concat(bgFillDisabledClass), bgShapeClass && "cell_shape_".concat(bgShapeClass), widthClass && "width_".concat(widthClass), gapClass && "gap_".concat(gapClass), zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsxRuntime.jsx("div", { className: "cell__before", children: before }), jsxRuntime.jsxs("div", { className: clsx('cell__wrapper', directionClass && "cell__wrapper_direction_".concat(directionClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), isActive && fillActiveClass && "fill_active_".concat(fillActiveClass), isDisabled && fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "cell__wrapper_shape_".concat(shapeClass), isEqual && 'cell__wrapper-equal'), children: [title && (jsxRuntime.jsxs("div", { className: "cell__data", children: [jsxRuntime.jsx(Text.Text, { className: "cell__title", size: titleTextSize, tag: titleTag, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title }), (titleIcon || titleIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), showTitleLabel && (jsxRuntime.jsx(Label.Label, { labelTextSize: titleLabelTextSize, appearance: titleLabelAppearance, label: titleLabel, shape: titleLabelShape, size: titleLabelSize }))] })), value && (jsxRuntime.jsxs("div", { className: "cell__data", children: [jsxRuntime.jsx(Text.Text, { className: "cell__value", size: valueTextSize, tag: valueTag, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, children: value }), (valueIcon || valueIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), showValueLabel && (jsxRuntime.jsx(Label.Label, { labelTextSize: valueLabelTextSize, appearance: valueLabelAppearance, label: valueLabel, shape: valueLabelShape, size: valueLabelSize }))] }))] }), after && jsxRuntime.jsx("div", { className: "cell__after", children: after })] }));
+    var _b = useStyles.useStyles(props), dataStyles = _b.data, cellStyles = _b.styles;
+    return (jsxRuntime.jsxs("div", { className: clsx(className, 'cell', mode && "cell_mode_".concat(mode), size && "cell_size_".concat(size), set && "cell_set_".concat(set), bgFillClass && "fill_".concat(bgFillClass), bgFillHoverClass && "fill_hover_".concat(bgFillHoverClass), isActive && bgFillActiveClass && "fill_active_".concat(bgFillActiveClass), isDisabled && bgFillDisabledClass && "fill_disabled_".concat(bgFillDisabledClass), bgShapeClass && "cell_shape_".concat(bgShapeClass), widthClass && "width_".concat(widthClass), gapClass && "gap_".concat(gapClass), zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsxRuntime.jsx("div", { className: "cell__before", children: before }), jsxRuntime.jsxs("div", { className: clsx('cell__wrapper', directionClass && "cell__wrapper_direction_".concat(directionClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), isActive && fillActiveClass && "fill_active_".concat(fillActiveClass), isDisabled && fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "cell__wrapper_shape_".concat(shapeClass), isEqual && 'cell__wrapper-equal'), children: [title && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__title", size: titleTextSize, tag: titleTag, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title }), (titleIcon || titleIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), showTitleLabel && (jsxRuntime.jsx(Label.Label, { labelTextSize: titleLabelTextSize, appearance: titleLabelAppearance, label: titleLabel, shape: titleLabelShape, size: titleLabelSize }))] })), value && (jsxRuntime.jsxs("div", { className: "cell__data", style: dataStyles, children: [jsxRuntime.jsx(Text.Text, { className: "cell__value", size: valueTextSize, tag: valueTag, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, children: value }), (valueIcon || valueIconSrc) && (jsxRuntime.jsx(Icon.Icon, { className: "cell__icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), showValueLabel && (jsxRuntime.jsx(Label.Label, { labelTextSize: valueLabelTextSize, appearance: valueLabelAppearance, label: valueLabel, shape: valueLabelShape, size: valueLabelSize }))] }))] }), after && jsxRuntime.jsx("div", { className: "cell__after", children: after })] }));
 }
 
 exports.Cell = Cell;

package/dist/cjs/components/Checkmark.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
+var useStyles = require('../hooks/useStyles.js');
+var Icon = require('../../Icon-ByLHEhHL.js');
+require('../../tslib.es6-CCZ3TN_7.js');
+require('react');
+require('lodash/camelCase');
+require('lodash/castArray');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('react-inlinesvg');
+require('../../Link-CoAhRbFg.js');
+require('../../Tooltip-CyZCVyba.js');
+require('../../Text-COHpLTYr.js');
+require('../../Title-BduD-TXE.js');
+
+var checkmarkAppearance = {
+    accent: {
+        borderWidth: '4',
+        borderColor: 'accentBorderQuaternary',
+        fill: 'accentPrimary',
+        iconFill: 'surfaceItemInverse',
+    },
+    disabled: {
+        borderWidth: '4',
+        borderColor: 'surfaceBorderTertiary',
+        fill: 'surfaceItemSecondary',
+        iconFill: 'surfaceItemQuaternary',
+    },
+    surface: {
+        borderWidth: '4',
+        borderColor: 'surfaceBorderTertiary',
+        fill: 'surfacePrimary',
+        iconFill: 'surfaceItemPrimary',
+    },
+};
+
+var checkmarkConfig = {
+    appearance: checkmarkAppearance,
+    setAppearance: function (newComponent) {
+        checkmarkConfig.appearance = newComponent;
+    },
+};
+function Checkmark(props) {
+    var isChecked = props.isChecked, _a = props.isDisabled, isDisabled = _a === undefined ? false : _a, appearance = props.appearance, className = props.className, iconChecked = props.iconChecked, iconFill = props.iconFill, onClick = props.onClick;
+    // @ts-expect-error
+    var appearanceConfig = checkmarkConfig.appearance && checkmarkConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
+    var borderColorClass = classGenerator.borderColorClass, borderWidthClass = classGenerator.borderWidthClass, fillClass = classGenerator.fillClass, sizeClass = classGenerator.sizeClass;
+    // @ts-expect-error
+    var checkmarkStyles = useStyles.useStyles(props).styles;
+    return (jsxRuntime.jsx("div", { className: clsx(className, 'checkmark', sizeClass && "checkmark_size_".concat(sizeClass), fillClass && "fill_".concat(fillClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), isDisabled), style: checkmarkStyles, onClick: onClick, children: isChecked && (jsxRuntime.jsx(Icon.Icon, { className: "checkmark__svg", iconFill: iconFill || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.iconFill), size: "24", SvgImage: isChecked ? iconChecked : null })) }));
+}
+
+exports.Checkmark = Checkmark;
+exports.checkmarkAppearance = checkmarkAppearance;
+exports.checkmarkConfig = checkmarkConfig;

package/dist/cjs/components/Notification.js

@@ -5,7 +5,6 @@ var clsx = require('clsx');
 var useDeviceTargetClassGenerator = require('../hooks/useDeviceTargetClassGenerator.js');
 var useStyles = require('../hooks/useStyles.js');
 var Text = require('../../Text-COHpLTYr.js');
-var Title = require('../../Title-BduD-TXE.js');
 var Notifications = require('../context/Notifications.js');
 require('../../tslib.es6-CCZ3TN_7.js');
 require('react');
@@ -59,14 +58,13 @@ var notificationItemConfig = {
     },
 };
 function NotificationItem(props) {
-    var id = props.id, after = props.after, appearance = props.appearance, before = props.before, className = props.className, closeButton = props.closeButton, dataTour = props.dataTour, set = props.set, size = props.size, status = props.status, text = props.text, textColor = props.textColor, _a = props.textSize, textSize = _a === undefined ? 's' : _a, title = props.title, titleTextColor = props.titleTextColor, _b = props.titleTextSize, titleTextSize = _b === undefined ? 'h5' : _b, onClickClose = props.onClickClose;
-    // @ts-expect-error
+    var id = props.id, after = props.after, appearance = props.appearance, before = props.before, className = props.className, closeButton = props.closeButton, dataTour = props.dataTour, set = props.set, size = props.size, status = props.status, text = props.text, textColor = props.textColor, _a = props.textSize, textSize = _a === undefined ? 's' : _a, title = props.title, titleTextColor = props.titleTextColor, _b = props.titleTextSize, titleTextSize = _b === undefined ? 'm' : _b, onClickClose = props.onClickClose;
     var appearanceConfig = notificationItemConfig.appearance && notificationItemConfig.appearance[appearance];
     var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
     var fillClass = classGenerator.fillClass, widthClass = classGenerator.widthClass;
     // @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-tour": dataTour, style: notificationStyles, children: [before, jsxRuntime.jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsxRuntime.jsx(Title.Title, { className: "notification__item-title", size: titleTextSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.titleTextSize), textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.titleTextColor), children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "notification__item-text", size: textSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : 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), 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-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 === undefined ? undefined : appearanceConfig.titleTextSize), textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.titleTextColor), children: title })), text && (jsxRuntime.jsx(Text.Text, { className: "notification__item-text", size: textSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : 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] }));
 }
 
 function NotificationList(props) {

package/dist/cjs/components/Response.js

@@ -10,7 +10,6 @@ var useStyles = require('../hooks/useStyles.js');
 var Button = require('../../Button-BSygAkO5.js');
 var Group = require('../../Group-pMTTxQH4.js');
 var Text = require('../../Text-COHpLTYr.js');
-var Title = require('../../Title-BduD-TXE.js');
 require('lodash/camelCase');
 require('lodash/castArray');
 require('../context/UIContext.js');
@@ -22,13 +21,16 @@ require('../hooks/styleAttributes.js');
 require('../../Icon-ByLHEhHL.js');
 require('../../Link-CoAhRbFg.js');
 require('../../Tooltip-CyZCVyba.js');
+require('../../Title-BduD-TXE.js');
 require('../../Loader-D_53c71f.js');
 
-var img$6 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23D9D9D9'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M85.7155 56.9042L54.1865 115.911C53.0219 118.09 54.5678 121.43 58.4708 121.43H121.529C125.432 121.43 126.978 118.09 125.814 115.911L94.2845 56.9043C93.5012 55.4392 91.8762 54.57 89.9998 54.57C88.1237 54.57 86.4986 55.439 85.7155 56.9042ZM89.9998 48C93.9317 48 98.1142 49.8644 100.253 53.8659L131.782 112.873C135.732 120.266 129.482 128 121.529 128H58.4708C50.5181 128 44.2675 120.266 48.2181 112.873L79.7471 53.866C81.8855 49.8645 86.0683 48 89.9998 48ZM90.0002 74.0886C91.8588 74.0886 93.3658 75.5593 93.3658 77.3736V92.8756C93.3658 94.6897 91.8588 96.1606 90.0002 96.1606C88.1411 96.1606 86.6345 94.6897 86.6345 92.8756V77.3736C86.6345 75.5593 88.1411 74.0886 90.0002 74.0886ZM93.3658 108.377C93.3658 106.563 91.8588 105.092 90.0002 105.092C88.1411 105.092 86.6345 106.563 86.6345 108.377V108.457C86.6345 110.271 88.1411 111.742 90.0002 111.742C91.8588 111.742 93.3658 110.271 93.3658 108.457V108.377Z' fill='%23747474'/%3e%3c/svg%3e";
+var img$7 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23D9D9D9'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M85.7155 56.9042L54.1865 115.911C53.0219 118.09 54.5678 121.43 58.4708 121.43H121.529C125.432 121.43 126.978 118.09 125.814 115.911L94.2845 56.9043C93.5012 55.4392 91.8762 54.57 89.9998 54.57C88.1237 54.57 86.4986 55.439 85.7155 56.9042ZM89.9998 48C93.9317 48 98.1142 49.8644 100.253 53.8659L131.782 112.873C135.732 120.266 129.482 128 121.529 128H58.4708C50.5181 128 44.2675 120.266 48.2181 112.873L79.7471 53.866C81.8855 49.8645 86.0683 48 89.9998 48ZM90.0002 74.0886C91.8588 74.0886 93.3658 75.5593 93.3658 77.3736V92.8756C93.3658 94.6897 91.8588 96.1606 90.0002 96.1606C88.1411 96.1606 86.6345 94.6897 86.6345 92.8756V77.3736C86.6345 75.5593 88.1411 74.0886 90.0002 74.0886ZM93.3658 108.377C93.3658 106.563 91.8588 105.092 90.0002 105.092C88.1411 105.092 86.6345 106.563 86.6345 108.377V108.457C86.6345 110.271 88.1411 111.742 90.0002 111.742C91.8588 111.742 93.3658 110.271 93.3658 108.457V108.377Z' fill='%23747474'/%3e%3c/svg%3e";
 
-var img$5 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23E00000'/%3e%3cpath d='M90.5027 104.581V45.2513' stroke='white' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M90.5027 134.749V129.721' stroke='white' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
+var img$6 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23E00000'/%3e%3cpath d='M90.5027 104.581V45.2513' stroke='white' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M90.5027 134.749V129.721' stroke='white' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
 
-var img$4 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23D9D9D9'/%3e%3cpath d='M116.144 71.2426C118.487 68.8995 118.487 65.1005 116.144 62.7574C113.801 60.4142 110.002 60.4142 107.659 62.7574L89.4506 80.9654L71.2426 62.7574C68.8995 60.4142 65.1005 60.4142 62.7574 62.7574C60.4142 65.1005 60.4142 68.8995 62.7574 71.2426L80.9654 89.4506L62.7574 107.659C60.4142 110.002 60.4142 113.801 62.7574 116.144C65.1005 118.487 68.8995 118.487 71.2426 116.144L89.4506 97.9359L107.659 116.144C110.002 118.487 113.801 118.487 116.144 116.144C118.487 113.801 118.487 110.002 116.144 107.659L97.9359 89.4506L116.144 71.2426Z' fill='%23747474'/%3e%3c/svg%3e";
+var img$5 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23D9D9D9'/%3e%3cpath d='M116.144 71.2426C118.487 68.8995 118.487 65.1005 116.144 62.7574C113.801 60.4142 110.002 60.4142 107.659 62.7574L89.4506 80.9654L71.2426 62.7574C68.8995 60.4142 65.1005 60.4142 62.7574 62.7574C60.4142 65.1005 60.4142 68.8995 62.7574 71.2426L80.9654 89.4506L62.7574 107.659C60.4142 110.002 60.4142 113.801 62.7574 116.144C65.1005 118.487 68.8995 118.487 71.2426 116.144L89.4506 97.9359L107.659 116.144C110.002 118.487 113.801 118.487 116.144 116.144C118.487 113.801 118.487 110.002 116.144 107.659L97.9359 89.4506L116.144 71.2426Z' fill='%23747474'/%3e%3c/svg%3e";
+
+var img$4 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23D9D9D9'/%3e%3cpath d='M93.2275 101.842H84.0659C83.8263 99.1898 83.976 96.839 84.515 94.7895C85.1138 92.74 86.2216 90.8111 87.8383 89.0027C89.515 87.1341 91.7904 85.2051 94.6647 83.2159C96.5808 81.8898 97.9581 80.5637 98.7964 79.2375C99.6946 77.9114 100.144 76.4345 100.144 74.807C100.144 72.2753 99.2156 70.1957 97.3593 68.5682C95.503 66.9406 93.0778 66.1269 90.0838 66.1269C87.3892 66.1269 84.7246 66.9105 82.0898 68.4777C79.4551 69.9847 77.0299 72.3959 74.8144 75.7112L67 67.9352C70.0539 64.0774 73.5868 61.1237 77.5988 59.0742C81.6707 57.0247 85.9521 56 90.4431 56C94.5749 56 98.2575 56.8439 101.491 58.5317C104.725 60.1592 107.269 62.3896 109.126 65.2227C111.042 67.9955 112 71.1601 112 74.7166C112 78.0922 111.042 81.1062 109.126 83.7584C107.269 86.4107 104.455 88.8821 100.683 91.1727C97.7485 92.8605 95.7725 94.4881 94.7545 96.0553C93.7365 97.6226 93.2275 99.5515 93.2275 101.842ZM96.1916 115.767C96.1916 117.756 95.4731 119.474 94.0359 120.92C92.5988 122.307 90.8323 123 88.7365 123C86.6407 123 84.8743 122.307 83.4371 120.92C82 119.474 81.2814 117.756 81.2814 115.767C81.2814 113.717 82 111.999 83.4371 110.613C84.8743 109.166 86.6407 108.443 88.7365 108.443C90.8323 108.443 92.5988 109.166 94.0359 110.613C95.4731 111.999 96.1916 113.717 96.1916 115.767Z' fill='%23747474'/%3e%3c/svg%3e";
 
 var img$3 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23D9D9D9'/%3e%3cpath d='M89.4468 113.833C98.5743 113.833 106.51 108.762 110.56 101.299L116.507 109.116C110.49 117.519 100.612 123 89.4468 123C74.5162 123 61.888 113.2 57.7156 99.7167H51L62.3388 84.8667L73.6777 99.7167H67.55C71.2908 108.036 79.6878 113.833 89.4468 113.833Z' fill='%23747474'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M122.212 84.6833C119.654 68.9858 105.958 57 89.4468 57C77.527 57 67.0747 63.2463 61.2209 72.6261L67.4218 80.5738C71.0963 72.0991 79.5747 66.1667 89.4468 66.1667C100.848 66.1667 110.391 74.0798 112.821 84.6833H106.322L117.661 99.5333L129 84.6833H122.212ZM118.759 84.6833H118.81L118.793 84.6618L118.759 84.6833Z' fill='%23747474'/%3e%3c/svg%3e";
 
@@ -38,12 +40,12 @@ 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%3ccircle cx='90' cy='90' r='90' fill='%23DE8806'/%3e%3cpath d='M90.5028 104.581V45.2513' stroke='white' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M90.5028 134.749V129.721' stroke='white' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
 
+/* eslint-disable perfectionist/sort-objects */
 var responseAppearance = {
-    dev: {
-        fill: 'surfaceSecondary',
+    cantLoadData: {
         messageTextColor: 'surfaceTextPrimary',
         messageTextSize: 'm',
-        messageTextWeight: 300,
+        messageTextWeight: 400,
         primaryButtonAppearance: 'surfaceTertiary',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
@@ -54,14 +56,15 @@ var responseAppearance = {
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
+        svgSrc: img$7,
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'h2',
+        titleTextSize: 'xxl',
         titleTextWeight: 400,
     },
     custom: {
         messageTextColor: 'surfaceTextPrimary',
         messageTextSize: 'm',
-        messageTextWeight: 300,
+        messageTextWeight: 400,
         primaryButtonAppearance: 'accent',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
@@ -73,15 +76,15 @@ var responseAppearance = {
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'h2',
+        titleTextSize: 'xxl',
         titleTextWeight: 400,
     },
-    error: {
-        svgSrc: img$5,
+    dev: {
+        fill: 'surfaceSecondary',
         messageTextColor: 'surfaceTextPrimary',
         messageTextSize: 'm',
-        messageTextWeight: 300,
-        primaryButtonAppearance: 'secondary',
+        messageTextWeight: 400,
+        primaryButtonAppearance: 'surfaceTertiary',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
         primaryButtonSize: 'xxl',
@@ -92,15 +95,14 @@ var responseAppearance = {
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'h2',
+        titleTextSize: 'xxl',
         titleTextWeight: 400,
     },
-    success: {
-        svgSrc: img$1,
+    error: {
         messageTextColor: 'surfaceTextPrimary',
         messageTextSize: 'm',
-        messageTextWeight: 300,
-        primaryButtonAppearance: 'accent',
+        messageTextWeight: 400,
+        primaryButtonAppearance: 'secondary',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
         primaryButtonSize: 'xxl',
@@ -110,16 +112,16 @@ var responseAppearance = {
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
+        svgSrc: img$6,
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'h2',
+        titleTextSize: 'xxl',
         titleTextWeight: 400,
     },
-    warning: {
-        svgSrc: img,
+    fail: {
         messageTextColor: 'surfaceTextPrimary',
         messageTextSize: 'm',
-        messageTextWeight: 300,
-        primaryButtonAppearance: 'primary',
+        messageTextWeight: 400,
+        primaryButtonAppearance: 'surfaceTertiary',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
         primaryButtonSize: 'xxl',
@@ -129,15 +131,15 @@ var responseAppearance = {
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
+        svgSrc: img$5,
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'h2',
+        titleTextSize: 'xxl',
         titleTextWeight: 400,
     },
-    fail: {
-        svgSrc: img$4,
+    refresh: {
         messageTextColor: 'surfaceTextPrimary',
         messageTextSize: 'm',
-        messageTextWeight: 300,
+        messageTextWeight: 400,
         primaryButtonAppearance: 'surfaceTertiary',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
@@ -148,17 +150,36 @@ var responseAppearance = {
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
+        svgSrc: img$3,
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'h2',
+        titleTextSize: 'xxl',
         titleTextWeight: 400,
     },
-    search: {
-        svgSrc: img$2,
+    off: {
+        messageTextColor: 'surfaceTextPrimary',
+        messageTextSize: 'm',
+        messageTextWeight: 400,
+        primaryButtonAppearance: 'success',
+        primaryButtonLabelTextSize: 'l',
+        primaryButtonShape: 'rounded',
+        primaryButtonSize: 'xxl',
+        primaryButtonWidth: 'fill',
+        secondaryButtonAppearance: 'secondary',
+        secondaryButtonLabelTextSize: 'l',
+        secondaryButtonShape: 'rounded',
+        secondaryButtonSize: 'xxl',
+        secondaryButtonWidth: 'fill',
         svgFill: 'errorPrimary',
         svgPathFill: 'surfaceItemTertiary',
+        svgSrc: img$4,
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'xxl',
+        titleTextWeight: 400,
+    },
+    search: {
         messageTextColor: 'surfaceTextPrimary',
         messageTextSize: 'm',
-        messageTextWeight: 300,
+        messageTextWeight: 400,
         primaryButtonAppearance: 'surfaceTertiary',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
@@ -169,16 +190,18 @@ var responseAppearance = {
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
+        svgFill: 'errorPrimary',
+        svgPathFill: 'surfaceItemTertiary',
+        svgSrc: img$2,
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'h2',
+        titleTextSize: 'xxl',
         titleTextWeight: 400,
     },
-    cantLoadData: {
-        svgSrc: img$6,
+    success: {
         messageTextColor: 'surfaceTextPrimary',
         messageTextSize: 'm',
-        messageTextWeight: 300,
-        primaryButtonAppearance: 'surfaceTertiary',
+        messageTextWeight: 400,
+        primaryButtonAppearance: 'accent',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
         primaryButtonSize: 'xxl',
@@ -188,16 +211,16 @@ var responseAppearance = {
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
+        svgSrc: img$1,
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'h2',
+        titleTextSize: 'xxl',
         titleTextWeight: 400,
     },
-    refresh: {
-        svgSrc: img$3,
+    warning: {
         messageTextColor: 'surfaceTextPrimary',
         messageTextSize: 'm',
-        messageTextWeight: 300,
-        primaryButtonAppearance: 'surfaceTertiary',
+        messageTextWeight: 400,
+        primaryButtonAppearance: 'primary',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
         primaryButtonSize: 'xxl',
@@ -207,8 +230,9 @@ var responseAppearance = {
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
+        svgSrc: img,
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'h2',
+        titleTextSize: 'xxl',
         titleTextWeight: 400,
     },
 };
@@ -224,7 +248,7 @@ function Response(props) {
     // @ts-expect-error
     var appearanceConfig = responseConfig.appearance && responseConfig.appearance[appearance];
     var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
-    var borderColorClass = classGenerator.borderColorClass, borderColorHoverClass = classGenerator.borderColorHoverClass, borderTypeClass = classGenerator.borderTypeClass, borderWidthClass = classGenerator.borderWidthClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, shapeClass = classGenerator.shapeClass, svgFillClass = classGenerator.svgFillClass, svgPathFillClass = classGenerator.svgPathFillClass;
+    var borderColorClass = classGenerator.borderColorClass, borderColorHoverClass = classGenerator.borderColorHoverClass, borderTypeClass = classGenerator.borderTypeClass, borderWidthClass = classGenerator.borderWidthClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, shapeClass = classGenerator.shapeClass, svgFillClass = classGenerator.svgFillClass, svgPathFillClass = classGenerator.svgPathFillClass, textAlignClass = classGenerator.textAlignClass;
     var ImageComponent = React.useMemo(function () {
         var src = imageSrc || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.imageSrc) || svgSrc || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.svgSrc);
         var Image = SvgImage || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.SvgImage);
@@ -252,8 +276,8 @@ function Response(props) {
         return null;
     }, [imageSrc, appearanceConfig, SvgImage, width, height, svgFillClass]);
     // @ts-expect-error
-    var responseStyles = useStyles.useStyles(props).styles;
-    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), set && "response_set_".concat(set)), style: responseStyles, children: [before, jsxRuntime.jsx("div", { className: clsx('response__image', svgFillClass && "svg_fill_".concat(svgFillClass), svgPathFillClass && "svg_path_fill_".concat(svgPathFillClass)), children: ImageComponent }), jsxRuntime.jsxs(Group.Group, { className: "response__desc", width: "fill", children: [title && (jsxRuntime.jsx(Title.Title, { className: "response__title", size: titleTextSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.titleTextSize) || 'h2', textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.titleTextColor), textWeight: titleTextWeight || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.titleTextWeight) || '600', children: title })), message && (jsxRuntime.jsx(Text.Text, { className: "response__message", size: messageTextSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.messageTextSize) || 'xxl', textColor: messageTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.messageTextColor), textWeight: messageTextWeight || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.messageTextWeight), children: message }))] }), (primaryButtonLabel ||
+    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), set && "response_set_".concat(set)), 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(Group.Group, { className: clsx('response__desc', textAlignClass && "text-align_".concat(textAlignClass)), width: "fill", children: [title && (jsxRuntime.jsx(Text.Text, { className: "response__title", size: titleTextSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.titleTextSize) || 'xxl', textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.titleTextColor), textWeight: titleTextWeight || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.titleTextWeight) || '400', children: title })), message && (jsxRuntime.jsx(Text.Text, { className: "response__message", size: messageTextSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.messageTextSize) || 'm', textColor: messageTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.messageTextColor), textWeight: messageTextWeight || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.messageTextWeight), children: message }))] })] }), (primaryButtonLabel ||
                 primaryButton ||
                 secondaryButtonLabel ||
                 secondaryButton ||

package/dist/cjs/components/Select.js

@@ -154,7 +154,7 @@ var selectConfig = {
     },
 };
 var SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
-    var elevation = props.elevation, isClearable = props.isClearable, isCreatable = props.isCreatable, isDisabled = props.isDisabled, isLoading = props.isLoading, isMulti = props.isMulti, isSearchable = props.isSearchable, after = props.after, appearance = props.appearance, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextSize = props.badgeTextSize, before = props.before, className = props.className, clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, closeMenuOnSelect = props.closeMenuOnSelect, defaultValue = props.defaultValue, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, dropdownFillHover = props.dropdownFillHover, dropdownIcon = props.dropdownIcon, dropdownIconFill = props.dropdownIconFill, dropdownIconShape = props.dropdownIconShape, filterOption = props.filterOption, hideSelectedOptions = props.hideSelectedOptions, hideValueContainer = props.hideValueContainer, initialValue = props.initialValue, inputAfter = props.inputAfter, inputBefore = props.inputBefore, instanceId = props.instanceId, loadingMessage = props.loadingMessage, menuAfter = props.menuAfter, menuBefore = props.menuBefore, menuIsOpen = props.menuIsOpen, menuItemSize = props.menuItemSize, multipleItemFill = props.multipleItemFill, multipleItemFillHover = props.multipleItemFillHover, multipleItemIcon = props.multipleItemIcon, multipleItemIconFill = props.multipleItemIconFill, noOptionsSearchText = props.noOptionsSearchText, noOptionsText = props.noOptionsText, openMenuOnClick = props.openMenuOnClick, optionAfter = props.optionAfter, optionBefore = props.optionBefore, options = props.options, optionSelected = props.optionSelected, placeholder = props.placeholder, placeholderTextColor = props.placeholderTextColor, placeholderTextSize = props.placeholderTextSize, set = props.set, showBadge = props.showBadge, showDivider = props.showDivider, value = props.value, onChange = props.onChange, onInputChange = props.onInputChange;
+    var width = props.width, minWidth = props.minWidth, elevation = props.elevation, isClearable = props.isClearable, isCreatable = props.isCreatable, isDisabled = props.isDisabled, isLoading = props.isLoading, isMulti = props.isMulti, isSearchable = props.isSearchable, after = props.after, appearance = props.appearance, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextSize = props.badgeTextSize, before = props.before, className = props.className, clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, closeMenuOnSelect = props.closeMenuOnSelect, defaultValue = props.defaultValue, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, dropdownFillHover = props.dropdownFillHover, dropdownIcon = props.dropdownIcon, dropdownIconFill = props.dropdownIconFill, dropdownIconShape = props.dropdownIconShape, filterOption = props.filterOption, hideSelectedOptions = props.hideSelectedOptions, hideValueContainer = props.hideValueContainer, initialValue = props.initialValue, inputAfter = props.inputAfter, inputBefore = props.inputBefore, instanceId = props.instanceId, loadingMessage = props.loadingMessage, menuAfter = props.menuAfter, menuBefore = props.menuBefore, menuIsOpen = props.menuIsOpen, menuItemSize = props.menuItemSize, multipleItemFill = props.multipleItemFill, multipleItemFillHover = props.multipleItemFillHover, multipleItemIcon = props.multipleItemIcon, multipleItemIconFill = props.multipleItemIconFill, noOptionsSearchText = props.noOptionsSearchText, noOptionsText = props.noOptionsText, openMenuOnClick = props.openMenuOnClick, optionAfter = props.optionAfter, optionBefore = props.optionBefore, options = props.options, optionSelected = props.optionSelected, placeholder = props.placeholder, placeholderTextColor = props.placeholderTextColor, placeholderTextSize = props.placeholderTextSize, set = props.set, showBadge = props.showBadge, showDivider = props.showDivider, value = props.value, onChange = props.onChange, onInputChange = props.onInputChange;
     var defaultRef = React.useRef(null);
     var selectRef = ref || defaultRef;
     // React-select wait function as "loadingMessage" property
@@ -184,7 +184,22 @@ var SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
             }
         };
     }, []);
-    var clearStyle = React.useMemo(function () { return new Proxy({}, { get: function () { return function () { }; } }); }, []);
+    var clearStyle = React.useMemo(function () {
+        return new Proxy({
+            container: {
+                width: width,
+                minWidth: minWidth,
+            },
+        }, {
+            get: function (target, prop) {
+                if (prop in target) {
+                    return function () { return target[prop]; };
+                }
+                return function () { };
+            },
+        });
+    }, []);
+    // @ts-expect-error
     var appearanceConfig = (selectConfig.appearance && selectConfig.appearance[appearance]) || {};
     var classGenerator = useDeviceTargetClassGenerator.useDeviceTargetClassGenerator(props, appearanceConfig);
     var borderColorClass = classGenerator.borderColorClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, headingFillClass = classGenerator.headingFillClass, headingFillHoverClass = classGenerator.headingFillHoverClass, headingTextColorClass = classGenerator.headingTextColorClass, headingTextSizeClass = classGenerator.headingTextSizeClass, headingTextWeightClass = classGenerator.headingTextWeightClass, inputBorderColorClass = classGenerator.inputBorderColorClass, inputBorderColorHoverClass = classGenerator.inputBorderColorHoverClass, inputCaretColorClass = classGenerator.inputCaretColorClass, inputFillClass = classGenerator.inputFillClass, inputShapeClass = classGenerator.inputShapeClass, inputTextColorClass = classGenerator.inputTextColorClass, inputTextSizeClass = classGenerator.inputTextSizeClass, multipleItemTextColorClass = classGenerator.multipleItemTextColorClass, multipleItemTextSizeClass = classGenerator.multipleItemTextSizeClass, noOptionsTextColorClass = classGenerator.noOptionsTextColorClass, noOptionsTextSizeClass = classGenerator.noOptionsTextSizeClass, optionBorderClass = classGenerator.optionBorderClass, optionBorderTypeClass = classGenerator.optionBorderTypeClass, optionFillClass = classGenerator.optionFillClass, optionFillHoverClass = classGenerator.optionFillHoverClass, optionShapeClass = classGenerator.optionShapeClass, optionTextColorClass = classGenerator.optionTextColorClass, optionTextSizeClass = classGenerator.optionTextSizeClass, shapeClass = classGenerator.shapeClass, sizeClass = classGenerator.sizeClass;

package/dist/components/Cell.js

@@ -37,8 +37,8 @@ function Cell(props) {
     var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
     var bgFillActiveClass = classGenerator.bgFillActiveClass, bgFillClass = classGenerator.bgFillClass, bgFillDisabledClass = classGenerator.bgFillDisabledClass, bgFillHoverClass = classGenerator.bgFillHoverClass, bgShapeClass = classGenerator.bgShapeClass, directionClass = classGenerator.directionClass, fillActiveClass = classGenerator.fillActiveClass, fillClass = classGenerator.fillClass, fillDisabledClass = classGenerator.fillDisabledClass, fillHoverClass = classGenerator.fillHoverClass, gapClass = classGenerator.gapClass, shapeClass = classGenerator.shapeClass, widthClass = classGenerator.widthClass;
     // @ts-expect-error
-    var cellStyles = useStyles(props).styles;
-    return (jsxs("div", { className: clsx(className, 'cell', mode && "cell_mode_".concat(mode), size && "cell_size_".concat(size), set && "cell_set_".concat(set), bgFillClass && "fill_".concat(bgFillClass), bgFillHoverClass && "fill_hover_".concat(bgFillHoverClass), isActive && bgFillActiveClass && "fill_active_".concat(bgFillActiveClass), isDisabled && bgFillDisabledClass && "fill_disabled_".concat(bgFillDisabledClass), bgShapeClass && "cell_shape_".concat(bgShapeClass), widthClass && "width_".concat(widthClass), gapClass && "gap_".concat(gapClass), zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsx("div", { className: "cell__before", children: before }), jsxs("div", { className: clsx('cell__wrapper', directionClass && "cell__wrapper_direction_".concat(directionClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), isActive && fillActiveClass && "fill_active_".concat(fillActiveClass), isDisabled && fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "cell__wrapper_shape_".concat(shapeClass), isEqual && 'cell__wrapper-equal'), children: [title && (jsxs("div", { className: "cell__data", children: [jsx(Text, { className: "cell__title", size: titleTextSize, tag: titleTag, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title }), (titleIcon || titleIconSrc) && (jsx(Icon, { className: "cell__icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), showTitleLabel && (jsx(Label, { labelTextSize: titleLabelTextSize, appearance: titleLabelAppearance, label: titleLabel, shape: titleLabelShape, size: titleLabelSize }))] })), value && (jsxs("div", { className: "cell__data", children: [jsx(Text, { className: "cell__value", size: valueTextSize, tag: valueTag, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, children: value }), (valueIcon || valueIconSrc) && (jsx(Icon, { className: "cell__icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), showValueLabel && (jsx(Label, { labelTextSize: valueLabelTextSize, appearance: valueLabelAppearance, label: valueLabel, shape: valueLabelShape, size: valueLabelSize }))] }))] }), after && jsx("div", { className: "cell__after", children: after })] }));
+    var _b = useStyles(props), dataStyles = _b.data, cellStyles = _b.styles;
+    return (jsxs("div", { className: clsx(className, 'cell', mode && "cell_mode_".concat(mode), size && "cell_size_".concat(size), set && "cell_set_".concat(set), bgFillClass && "fill_".concat(bgFillClass), bgFillHoverClass && "fill_hover_".concat(bgFillHoverClass), isActive && bgFillActiveClass && "fill_active_".concat(bgFillActiveClass), isDisabled && bgFillDisabledClass && "fill_disabled_".concat(bgFillDisabledClass), bgShapeClass && "cell_shape_".concat(bgShapeClass), widthClass && "width_".concat(widthClass), gapClass && "gap_".concat(gapClass), zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'), style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && jsx("div", { className: "cell__before", children: before }), jsxs("div", { className: clsx('cell__wrapper', directionClass && "cell__wrapper_direction_".concat(directionClass), fillClass && "fill_".concat(fillClass), fillHoverClass && "fill_hover_".concat(fillHoverClass), isActive && fillActiveClass && "fill_active_".concat(fillActiveClass), isDisabled && fillDisabledClass && "fill_disabled_".concat(fillDisabledClass), shapeClass && "cell__wrapper_shape_".concat(shapeClass), isEqual && 'cell__wrapper-equal'), children: [title && (jsxs("div", { className: "cell__data", style: dataStyles, children: [jsx(Text, { className: "cell__title", size: titleTextSize, tag: titleTag, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, children: title }), (titleIcon || titleIconSrc) && (jsx(Icon, { className: "cell__icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), showTitleLabel && (jsx(Label, { labelTextSize: titleLabelTextSize, appearance: titleLabelAppearance, label: titleLabel, shape: titleLabelShape, size: titleLabelSize }))] })), value && (jsxs("div", { className: "cell__data", style: dataStyles, children: [jsx(Text, { className: "cell__value", size: valueTextSize, tag: valueTag, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, children: value }), (valueIcon || valueIconSrc) && (jsx(Icon, { className: "cell__icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), showValueLabel && (jsx(Label, { labelTextSize: valueLabelTextSize, appearance: valueLabelAppearance, label: valueLabel, shape: valueLabelShape, size: valueLabelSize }))] }))] }), after && jsx("div", { className: "cell__after", children: after })] }));
 }
 
 export { Cell, cellAppearance, cellConfig };

package/dist/components/Checkmark.js

@@ -0,0 +1,60 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
+import { useStyles } from '../hooks/useStyles.js';
+import { I as Icon } from '../Icon-DotE-03d.js';
+import '../tslib.es6-5FtW-kfi.js';
+import 'react';
+import 'lodash/camelCase';
+import 'lodash/castArray';
+import '../context/UIContext.js';
+import '../hooks/useMediaQueries.js';
+import 'react-responsive';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+import '../hooks/styleAttributes.js';
+import 'react-inlinesvg';
+import '../Link-C53o3P6_.js';
+import '../Tooltip-BsbXMzGd.js';
+import '../Text-D9sEeRE4.js';
+import '../Title-Cl95USIn.js';
+
+var checkmarkAppearance = {
+    accent: {
+        borderWidth: '4',
+        borderColor: 'accentBorderQuaternary',
+        fill: 'accentPrimary',
+        iconFill: 'surfaceItemInverse',
+    },
+    disabled: {
+        borderWidth: '4',
+        borderColor: 'surfaceBorderTertiary',
+        fill: 'surfaceItemSecondary',
+        iconFill: 'surfaceItemQuaternary',
+    },
+    surface: {
+        borderWidth: '4',
+        borderColor: 'surfaceBorderTertiary',
+        fill: 'surfacePrimary',
+        iconFill: 'surfaceItemPrimary',
+    },
+};
+
+var checkmarkConfig = {
+    appearance: checkmarkAppearance,
+    setAppearance: function (newComponent) {
+        checkmarkConfig.appearance = newComponent;
+    },
+};
+function Checkmark(props) {
+    var isChecked = props.isChecked, _a = props.isDisabled, isDisabled = _a === undefined ? false : _a, appearance = props.appearance, className = props.className, iconChecked = props.iconChecked, iconFill = props.iconFill, onClick = props.onClick;
+    // @ts-expect-error
+    var appearanceConfig = checkmarkConfig.appearance && checkmarkConfig.appearance[appearance];
+    var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
+    var borderColorClass = classGenerator.borderColorClass, borderWidthClass = classGenerator.borderWidthClass, fillClass = classGenerator.fillClass, sizeClass = classGenerator.sizeClass;
+    // @ts-expect-error
+    var checkmarkStyles = useStyles(props).styles;
+    return (jsx("div", { className: clsx(className, 'checkmark', sizeClass && "checkmark_size_".concat(sizeClass), fillClass && "fill_".concat(fillClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderColorClass && "border-color_".concat(borderColorClass), isDisabled), style: checkmarkStyles, onClick: onClick, children: isChecked && (jsx(Icon, { className: "checkmark__svg", iconFill: iconFill || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.iconFill), size: "24", SvgImage: isChecked ? iconChecked : null })) }));
+}
+
+export { Checkmark, checkmarkAppearance, checkmarkConfig };

package/dist/components/Notification.js

@@ -3,7 +3,6 @@ import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { useStyles } from '../hooks/useStyles.js';
 import { T as Text } from '../Text-D9sEeRE4.js';
-import { T as Title } from '../Title-Cl95USIn.js';
 import { useNotifications, useNotificationsAPI } from '../context/Notifications.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'react';
@@ -57,14 +56,13 @@ var notificationItemConfig = {
     },
 };
 function NotificationItem(props) {
-    var id = props.id, after = props.after, appearance = props.appearance, before = props.before, className = props.className, closeButton = props.closeButton, dataTour = props.dataTour, set = props.set, size = props.size, status = props.status, text = props.text, textColor = props.textColor, _a = props.textSize, textSize = _a === undefined ? 's' : _a, title = props.title, titleTextColor = props.titleTextColor, _b = props.titleTextSize, titleTextSize = _b === undefined ? 'h5' : _b, onClickClose = props.onClickClose;
-    // @ts-expect-error
+    var id = props.id, after = props.after, appearance = props.appearance, before = props.before, className = props.className, closeButton = props.closeButton, dataTour = props.dataTour, set = props.set, size = props.size, status = props.status, text = props.text, textColor = props.textColor, _a = props.textSize, textSize = _a === undefined ? 's' : _a, title = props.title, titleTextColor = props.titleTextColor, _b = props.titleTextSize, titleTextSize = _b === undefined ? 'm' : _b, onClickClose = props.onClickClose;
     var appearanceConfig = notificationItemConfig.appearance && notificationItemConfig.appearance[appearance];
     var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
     var fillClass = classGenerator.fillClass, widthClass = classGenerator.widthClass;
     // @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-tour": dataTour, style: notificationStyles, children: [before, jsxs("div", { className: clsx(className, 'notification__item-wrapper'), children: [title && (jsx(Title, { className: "notification__item-title", size: titleTextSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.titleTextSize), textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.titleTextColor), children: title })), text && (jsx(Text, { className: "notification__item-text", size: textSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : 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), 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-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 === undefined ? undefined : appearanceConfig.titleTextSize), textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.titleTextColor), children: title })), text && (jsx(Text, { className: "notification__item-text", size: textSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.textSize), textColor: textColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : 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] }));
 }
 
 function NotificationList(props) {

package/dist/components/Response.js

@@ -8,7 +8,6 @@ import { useStyles } from '../hooks/useStyles.js';
 import { B as Button } from '../Button-Bn8Mjoeh.js';
 import { G as Group } from '../Group-CIIZoSm5.js';
 import { T as Text } from '../Text-D9sEeRE4.js';
-import { T as Title } from '../Title-Cl95USIn.js';
 import 'lodash/camelCase';
 import 'lodash/castArray';
 import '../context/UIContext.js';
@@ -20,13 +19,16 @@ import '../hooks/styleAttributes.js';
 import '../Icon-DotE-03d.js';
 import '../Link-C53o3P6_.js';
 import '../Tooltip-BsbXMzGd.js';
+import '../Title-Cl95USIn.js';
 import '../Loader-Cm98w6lJ.js';
 
-var img$6 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23D9D9D9'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M85.7155 56.9042L54.1865 115.911C53.0219 118.09 54.5678 121.43 58.4708 121.43H121.529C125.432 121.43 126.978 118.09 125.814 115.911L94.2845 56.9043C93.5012 55.4392 91.8762 54.57 89.9998 54.57C88.1237 54.57 86.4986 55.439 85.7155 56.9042ZM89.9998 48C93.9317 48 98.1142 49.8644 100.253 53.8659L131.782 112.873C135.732 120.266 129.482 128 121.529 128H58.4708C50.5181 128 44.2675 120.266 48.2181 112.873L79.7471 53.866C81.8855 49.8645 86.0683 48 89.9998 48ZM90.0002 74.0886C91.8588 74.0886 93.3658 75.5593 93.3658 77.3736V92.8756C93.3658 94.6897 91.8588 96.1606 90.0002 96.1606C88.1411 96.1606 86.6345 94.6897 86.6345 92.8756V77.3736C86.6345 75.5593 88.1411 74.0886 90.0002 74.0886ZM93.3658 108.377C93.3658 106.563 91.8588 105.092 90.0002 105.092C88.1411 105.092 86.6345 106.563 86.6345 108.377V108.457C86.6345 110.271 88.1411 111.742 90.0002 111.742C91.8588 111.742 93.3658 110.271 93.3658 108.457V108.377Z' fill='%23747474'/%3e%3c/svg%3e";
+var img$7 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23D9D9D9'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M85.7155 56.9042L54.1865 115.911C53.0219 118.09 54.5678 121.43 58.4708 121.43H121.529C125.432 121.43 126.978 118.09 125.814 115.911L94.2845 56.9043C93.5012 55.4392 91.8762 54.57 89.9998 54.57C88.1237 54.57 86.4986 55.439 85.7155 56.9042ZM89.9998 48C93.9317 48 98.1142 49.8644 100.253 53.8659L131.782 112.873C135.732 120.266 129.482 128 121.529 128H58.4708C50.5181 128 44.2675 120.266 48.2181 112.873L79.7471 53.866C81.8855 49.8645 86.0683 48 89.9998 48ZM90.0002 74.0886C91.8588 74.0886 93.3658 75.5593 93.3658 77.3736V92.8756C93.3658 94.6897 91.8588 96.1606 90.0002 96.1606C88.1411 96.1606 86.6345 94.6897 86.6345 92.8756V77.3736C86.6345 75.5593 88.1411 74.0886 90.0002 74.0886ZM93.3658 108.377C93.3658 106.563 91.8588 105.092 90.0002 105.092C88.1411 105.092 86.6345 106.563 86.6345 108.377V108.457C86.6345 110.271 88.1411 111.742 90.0002 111.742C91.8588 111.742 93.3658 110.271 93.3658 108.457V108.377Z' fill='%23747474'/%3e%3c/svg%3e";
 
-var img$5 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23E00000'/%3e%3cpath d='M90.5027 104.581V45.2513' stroke='white' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M90.5027 134.749V129.721' stroke='white' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
+var img$6 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23E00000'/%3e%3cpath d='M90.5027 104.581V45.2513' stroke='white' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M90.5027 134.749V129.721' stroke='white' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
 
-var img$4 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23D9D9D9'/%3e%3cpath d='M116.144 71.2426C118.487 68.8995 118.487 65.1005 116.144 62.7574C113.801 60.4142 110.002 60.4142 107.659 62.7574L89.4506 80.9654L71.2426 62.7574C68.8995 60.4142 65.1005 60.4142 62.7574 62.7574C60.4142 65.1005 60.4142 68.8995 62.7574 71.2426L80.9654 89.4506L62.7574 107.659C60.4142 110.002 60.4142 113.801 62.7574 116.144C65.1005 118.487 68.8995 118.487 71.2426 116.144L89.4506 97.9359L107.659 116.144C110.002 118.487 113.801 118.487 116.144 116.144C118.487 113.801 118.487 110.002 116.144 107.659L97.9359 89.4506L116.144 71.2426Z' fill='%23747474'/%3e%3c/svg%3e";
+var img$5 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23D9D9D9'/%3e%3cpath d='M116.144 71.2426C118.487 68.8995 118.487 65.1005 116.144 62.7574C113.801 60.4142 110.002 60.4142 107.659 62.7574L89.4506 80.9654L71.2426 62.7574C68.8995 60.4142 65.1005 60.4142 62.7574 62.7574C60.4142 65.1005 60.4142 68.8995 62.7574 71.2426L80.9654 89.4506L62.7574 107.659C60.4142 110.002 60.4142 113.801 62.7574 116.144C65.1005 118.487 68.8995 118.487 71.2426 116.144L89.4506 97.9359L107.659 116.144C110.002 118.487 113.801 118.487 116.144 116.144C118.487 113.801 118.487 110.002 116.144 107.659L97.9359 89.4506L116.144 71.2426Z' fill='%23747474'/%3e%3c/svg%3e";
+
+var img$4 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23D9D9D9'/%3e%3cpath d='M93.2275 101.842H84.0659C83.8263 99.1898 83.976 96.839 84.515 94.7895C85.1138 92.74 86.2216 90.8111 87.8383 89.0027C89.515 87.1341 91.7904 85.2051 94.6647 83.2159C96.5808 81.8898 97.9581 80.5637 98.7964 79.2375C99.6946 77.9114 100.144 76.4345 100.144 74.807C100.144 72.2753 99.2156 70.1957 97.3593 68.5682C95.503 66.9406 93.0778 66.1269 90.0838 66.1269C87.3892 66.1269 84.7246 66.9105 82.0898 68.4777C79.4551 69.9847 77.0299 72.3959 74.8144 75.7112L67 67.9352C70.0539 64.0774 73.5868 61.1237 77.5988 59.0742C81.6707 57.0247 85.9521 56 90.4431 56C94.5749 56 98.2575 56.8439 101.491 58.5317C104.725 60.1592 107.269 62.3896 109.126 65.2227C111.042 67.9955 112 71.1601 112 74.7166C112 78.0922 111.042 81.1062 109.126 83.7584C107.269 86.4107 104.455 88.8821 100.683 91.1727C97.7485 92.8605 95.7725 94.4881 94.7545 96.0553C93.7365 97.6226 93.2275 99.5515 93.2275 101.842ZM96.1916 115.767C96.1916 117.756 95.4731 119.474 94.0359 120.92C92.5988 122.307 90.8323 123 88.7365 123C86.6407 123 84.8743 122.307 83.4371 120.92C82 119.474 81.2814 117.756 81.2814 115.767C81.2814 113.717 82 111.999 83.4371 110.613C84.8743 109.166 86.6407 108.443 88.7365 108.443C90.8323 108.443 92.5988 109.166 94.0359 110.613C95.4731 111.999 96.1916 113.717 96.1916 115.767Z' fill='%23747474'/%3e%3c/svg%3e";
 
 var img$3 = "data:image/svg+xml,%3csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='90' cy='90' r='90' fill='%23D9D9D9'/%3e%3cpath d='M89.4468 113.833C98.5743 113.833 106.51 108.762 110.56 101.299L116.507 109.116C110.49 117.519 100.612 123 89.4468 123C74.5162 123 61.888 113.2 57.7156 99.7167H51L62.3388 84.8667L73.6777 99.7167H67.55C71.2908 108.036 79.6878 113.833 89.4468 113.833Z' fill='%23747474'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M122.212 84.6833C119.654 68.9858 105.958 57 89.4468 57C77.527 57 67.0747 63.2463 61.2209 72.6261L67.4218 80.5738C71.0963 72.0991 79.5747 66.1667 89.4468 66.1667C100.848 66.1667 110.391 74.0798 112.821 84.6833H106.322L117.661 99.5333L129 84.6833H122.212ZM118.759 84.6833H118.81L118.793 84.6618L118.759 84.6833Z' fill='%23747474'/%3e%3c/svg%3e";
 
@@ -36,12 +38,12 @@ 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%3ccircle cx='90' cy='90' r='90' fill='%23DE8806'/%3e%3cpath d='M90.5028 104.581V45.2513' stroke='white' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M90.5028 134.749V129.721' stroke='white' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
 
+/* eslint-disable perfectionist/sort-objects */
 var responseAppearance = {
-    dev: {
-        fill: 'surfaceSecondary',
+    cantLoadData: {
         messageTextColor: 'surfaceTextPrimary',
         messageTextSize: 'm',
-        messageTextWeight: 300,
+        messageTextWeight: 400,
         primaryButtonAppearance: 'surfaceTertiary',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
@@ -52,14 +54,15 @@ var responseAppearance = {
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
+        svgSrc: img$7,
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'h2',
+        titleTextSize: 'xxl',
         titleTextWeight: 400,
     },
     custom: {
         messageTextColor: 'surfaceTextPrimary',
         messageTextSize: 'm',
-        messageTextWeight: 300,
+        messageTextWeight: 400,
         primaryButtonAppearance: 'accent',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
@@ -71,15 +74,15 @@ var responseAppearance = {
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'h2',
+        titleTextSize: 'xxl',
         titleTextWeight: 400,
     },
-    error: {
-        svgSrc: img$5,
+    dev: {
+        fill: 'surfaceSecondary',
         messageTextColor: 'surfaceTextPrimary',
         messageTextSize: 'm',
-        messageTextWeight: 300,
-        primaryButtonAppearance: 'secondary',
+        messageTextWeight: 400,
+        primaryButtonAppearance: 'surfaceTertiary',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
         primaryButtonSize: 'xxl',
@@ -90,15 +93,14 @@ var responseAppearance = {
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'h2',
+        titleTextSize: 'xxl',
         titleTextWeight: 400,
     },
-    success: {
-        svgSrc: img$1,
+    error: {
         messageTextColor: 'surfaceTextPrimary',
         messageTextSize: 'm',
-        messageTextWeight: 300,
-        primaryButtonAppearance: 'accent',
+        messageTextWeight: 400,
+        primaryButtonAppearance: 'secondary',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
         primaryButtonSize: 'xxl',
@@ -108,16 +110,16 @@ var responseAppearance = {
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
+        svgSrc: img$6,
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'h2',
+        titleTextSize: 'xxl',
         titleTextWeight: 400,
     },
-    warning: {
-        svgSrc: img,
+    fail: {
         messageTextColor: 'surfaceTextPrimary',
         messageTextSize: 'm',
-        messageTextWeight: 300,
-        primaryButtonAppearance: 'primary',
+        messageTextWeight: 400,
+        primaryButtonAppearance: 'surfaceTertiary',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
         primaryButtonSize: 'xxl',
@@ -127,15 +129,15 @@ var responseAppearance = {
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
+        svgSrc: img$5,
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'h2',
+        titleTextSize: 'xxl',
         titleTextWeight: 400,
     },
-    fail: {
-        svgSrc: img$4,
+    refresh: {
         messageTextColor: 'surfaceTextPrimary',
         messageTextSize: 'm',
-        messageTextWeight: 300,
+        messageTextWeight: 400,
         primaryButtonAppearance: 'surfaceTertiary',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
@@ -146,17 +148,36 @@ var responseAppearance = {
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
+        svgSrc: img$3,
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'h2',
+        titleTextSize: 'xxl',
         titleTextWeight: 400,
     },
-    search: {
-        svgSrc: img$2,
+    off: {
+        messageTextColor: 'surfaceTextPrimary',
+        messageTextSize: 'm',
+        messageTextWeight: 400,
+        primaryButtonAppearance: 'success',
+        primaryButtonLabelTextSize: 'l',
+        primaryButtonShape: 'rounded',
+        primaryButtonSize: 'xxl',
+        primaryButtonWidth: 'fill',
+        secondaryButtonAppearance: 'secondary',
+        secondaryButtonLabelTextSize: 'l',
+        secondaryButtonShape: 'rounded',
+        secondaryButtonSize: 'xxl',
+        secondaryButtonWidth: 'fill',
         svgFill: 'errorPrimary',
         svgPathFill: 'surfaceItemTertiary',
+        svgSrc: img$4,
+        titleTextColor: 'surfaceTextPrimary',
+        titleTextSize: 'xxl',
+        titleTextWeight: 400,
+    },
+    search: {
         messageTextColor: 'surfaceTextPrimary',
         messageTextSize: 'm',
-        messageTextWeight: 300,
+        messageTextWeight: 400,
         primaryButtonAppearance: 'surfaceTertiary',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
@@ -167,16 +188,18 @@ var responseAppearance = {
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
+        svgFill: 'errorPrimary',
+        svgPathFill: 'surfaceItemTertiary',
+        svgSrc: img$2,
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'h2',
+        titleTextSize: 'xxl',
         titleTextWeight: 400,
     },
-    cantLoadData: {
-        svgSrc: img$6,
+    success: {
         messageTextColor: 'surfaceTextPrimary',
         messageTextSize: 'm',
-        messageTextWeight: 300,
-        primaryButtonAppearance: 'surfaceTertiary',
+        messageTextWeight: 400,
+        primaryButtonAppearance: 'accent',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
         primaryButtonSize: 'xxl',
@@ -186,16 +209,16 @@ var responseAppearance = {
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
+        svgSrc: img$1,
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'h2',
+        titleTextSize: 'xxl',
         titleTextWeight: 400,
     },
-    refresh: {
-        svgSrc: img$3,
+    warning: {
         messageTextColor: 'surfaceTextPrimary',
         messageTextSize: 'm',
-        messageTextWeight: 300,
-        primaryButtonAppearance: 'surfaceTertiary',
+        messageTextWeight: 400,
+        primaryButtonAppearance: 'primary',
         primaryButtonLabelTextSize: 'l',
         primaryButtonShape: 'rounded',
         primaryButtonSize: 'xxl',
@@ -205,8 +228,9 @@ var responseAppearance = {
         secondaryButtonShape: 'rounded',
         secondaryButtonSize: 'xxl',
         secondaryButtonWidth: 'fill',
+        svgSrc: img,
         titleTextColor: 'surfaceTextPrimary',
-        titleTextSize: 'h2',
+        titleTextSize: 'xxl',
         titleTextWeight: 400,
     },
 };
@@ -222,7 +246,7 @@ function Response(props) {
     // @ts-expect-error
     var appearanceConfig = responseConfig.appearance && responseConfig.appearance[appearance];
     var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
-    var borderColorClass = classGenerator.borderColorClass, borderColorHoverClass = classGenerator.borderColorHoverClass, borderTypeClass = classGenerator.borderTypeClass, borderWidthClass = classGenerator.borderWidthClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, shapeClass = classGenerator.shapeClass, svgFillClass = classGenerator.svgFillClass, svgPathFillClass = classGenerator.svgPathFillClass;
+    var borderColorClass = classGenerator.borderColorClass, borderColorHoverClass = classGenerator.borderColorHoverClass, borderTypeClass = classGenerator.borderTypeClass, borderWidthClass = classGenerator.borderWidthClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, shapeClass = classGenerator.shapeClass, svgFillClass = classGenerator.svgFillClass, svgPathFillClass = classGenerator.svgPathFillClass, textAlignClass = classGenerator.textAlignClass;
     var ImageComponent = useMemo(function () {
         var src = imageSrc || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.imageSrc) || svgSrc || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.svgSrc);
         var Image = SvgImage || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.SvgImage);
@@ -250,8 +274,8 @@ function Response(props) {
         return null;
     }, [imageSrc, appearanceConfig, SvgImage, width, height, svgFillClass]);
     // @ts-expect-error
-    var responseStyles = useStyles(props).styles;
-    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), set && "response_set_".concat(set)), style: responseStyles, children: [before, jsx("div", { className: clsx('response__image', svgFillClass && "svg_fill_".concat(svgFillClass), svgPathFillClass && "svg_path_fill_".concat(svgPathFillClass)), children: ImageComponent }), jsxs(Group, { className: "response__desc", width: "fill", children: [title && (jsx(Title, { className: "response__title", size: titleTextSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.titleTextSize) || 'h2', textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.titleTextColor), textWeight: titleTextWeight || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.titleTextWeight) || '600', children: title })), message && (jsx(Text, { className: "response__message", size: messageTextSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.messageTextSize) || 'xxl', textColor: messageTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.messageTextColor), textWeight: messageTextWeight || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.messageTextWeight), children: message }))] }), (primaryButtonLabel ||
+    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), set && "response_set_".concat(set)), 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(Group, { className: clsx('response__desc', textAlignClass && "text-align_".concat(textAlignClass)), width: "fill", children: [title && (jsx(Text, { className: "response__title", size: titleTextSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.titleTextSize) || 'xxl', textColor: titleTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.titleTextColor), textWeight: titleTextWeight || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.titleTextWeight) || '400', children: title })), message && (jsx(Text, { className: "response__message", size: messageTextSize || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.messageTextSize) || 'm', textColor: messageTextColor || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.messageTextColor), textWeight: messageTextWeight || (appearanceConfig === null || appearanceConfig === undefined ? undefined : appearanceConfig.messageTextWeight), children: message }))] })] }), (primaryButtonLabel ||
                 primaryButton ||
                 secondaryButtonLabel ||
                 secondaryButton ||

package/dist/components/Select.js

@@ -152,7 +152,7 @@ var selectConfig = {
     },
 };
 var SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
-    var elevation = props.elevation, isClearable = props.isClearable, isCreatable = props.isCreatable, isDisabled = props.isDisabled, isLoading = props.isLoading, isMulti = props.isMulti, isSearchable = props.isSearchable, after = props.after, appearance = props.appearance, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextSize = props.badgeTextSize, before = props.before, className = props.className, clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, closeMenuOnSelect = props.closeMenuOnSelect, defaultValue = props.defaultValue, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, dropdownFillHover = props.dropdownFillHover, dropdownIcon = props.dropdownIcon, dropdownIconFill = props.dropdownIconFill, dropdownIconShape = props.dropdownIconShape, filterOption = props.filterOption, hideSelectedOptions = props.hideSelectedOptions, hideValueContainer = props.hideValueContainer, initialValue = props.initialValue, inputAfter = props.inputAfter, inputBefore = props.inputBefore, instanceId = props.instanceId, loadingMessage = props.loadingMessage, menuAfter = props.menuAfter, menuBefore = props.menuBefore, menuIsOpen = props.menuIsOpen, menuItemSize = props.menuItemSize, multipleItemFill = props.multipleItemFill, multipleItemFillHover = props.multipleItemFillHover, multipleItemIcon = props.multipleItemIcon, multipleItemIconFill = props.multipleItemIconFill, noOptionsSearchText = props.noOptionsSearchText, noOptionsText = props.noOptionsText, openMenuOnClick = props.openMenuOnClick, optionAfter = props.optionAfter, optionBefore = props.optionBefore, options = props.options, optionSelected = props.optionSelected, placeholder = props.placeholder, placeholderTextColor = props.placeholderTextColor, placeholderTextSize = props.placeholderTextSize, set = props.set, showBadge = props.showBadge, showDivider = props.showDivider, value = props.value, onChange = props.onChange, onInputChange = props.onInputChange;
+    var width = props.width, minWidth = props.minWidth, elevation = props.elevation, isClearable = props.isClearable, isCreatable = props.isCreatable, isDisabled = props.isDisabled, isLoading = props.isLoading, isMulti = props.isMulti, isSearchable = props.isSearchable, after = props.after, appearance = props.appearance, badgeAppearance = props.badgeAppearance, badgeSize = props.badgeSize, badgeTextSize = props.badgeTextSize, before = props.before, className = props.className, clearIcon = props.clearIcon, clearIconFill = props.clearIconFill, closeMenuOnSelect = props.closeMenuOnSelect, defaultValue = props.defaultValue, dividerDirection = props.dividerDirection, dividerFill = props.dividerFill, dividerSize = props.dividerSize, dropdownFillHover = props.dropdownFillHover, dropdownIcon = props.dropdownIcon, dropdownIconFill = props.dropdownIconFill, dropdownIconShape = props.dropdownIconShape, filterOption = props.filterOption, hideSelectedOptions = props.hideSelectedOptions, hideValueContainer = props.hideValueContainer, initialValue = props.initialValue, inputAfter = props.inputAfter, inputBefore = props.inputBefore, instanceId = props.instanceId, loadingMessage = props.loadingMessage, menuAfter = props.menuAfter, menuBefore = props.menuBefore, menuIsOpen = props.menuIsOpen, menuItemSize = props.menuItemSize, multipleItemFill = props.multipleItemFill, multipleItemFillHover = props.multipleItemFillHover, multipleItemIcon = props.multipleItemIcon, multipleItemIconFill = props.multipleItemIconFill, noOptionsSearchText = props.noOptionsSearchText, noOptionsText = props.noOptionsText, openMenuOnClick = props.openMenuOnClick, optionAfter = props.optionAfter, optionBefore = props.optionBefore, options = props.options, optionSelected = props.optionSelected, placeholder = props.placeholder, placeholderTextColor = props.placeholderTextColor, placeholderTextSize = props.placeholderTextSize, set = props.set, showBadge = props.showBadge, showDivider = props.showDivider, value = props.value, onChange = props.onChange, onInputChange = props.onInputChange;
     var defaultRef = useRef(null);
     var selectRef = ref || defaultRef;
     // React-select wait function as "loadingMessage" property
@@ -182,7 +182,22 @@ var SelectContainer = React.forwardRef(function SelectContainer(props, ref) {
             }
         };
     }, []);
-    var clearStyle = useMemo(function () { return new Proxy({}, { get: function () { return function () { }; } }); }, []);
+    var clearStyle = useMemo(function () {
+        return new Proxy({
+            container: {
+                width: width,
+                minWidth: minWidth,
+            },
+        }, {
+            get: function (target, prop) {
+                if (prop in target) {
+                    return function () { return target[prop]; };
+                }
+                return function () { };
+            },
+        });
+    }, []);
+    // @ts-expect-error
     var appearanceConfig = (selectConfig.appearance && selectConfig.appearance[appearance]) || {};
     var classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig);
     var borderColorClass = classGenerator.borderColorClass, fillClass = classGenerator.fillClass, fillHoverClass = classGenerator.fillHoverClass, headingFillClass = classGenerator.headingFillClass, headingFillHoverClass = classGenerator.headingFillHoverClass, headingTextColorClass = classGenerator.headingTextColorClass, headingTextSizeClass = classGenerator.headingTextSizeClass, headingTextWeightClass = classGenerator.headingTextWeightClass, inputBorderColorClass = classGenerator.inputBorderColorClass, inputBorderColorHoverClass = classGenerator.inputBorderColorHoverClass, inputCaretColorClass = classGenerator.inputCaretColorClass, inputFillClass = classGenerator.inputFillClass, inputShapeClass = classGenerator.inputShapeClass, inputTextColorClass = classGenerator.inputTextColorClass, inputTextSizeClass = classGenerator.inputTextSizeClass, multipleItemTextColorClass = classGenerator.multipleItemTextColorClass, multipleItemTextSizeClass = classGenerator.multipleItemTextSizeClass, noOptionsTextColorClass = classGenerator.noOptionsTextColorClass, noOptionsTextSizeClass = classGenerator.noOptionsTextSizeClass, optionBorderClass = classGenerator.optionBorderClass, optionBorderTypeClass = classGenerator.optionBorderTypeClass, optionFillClass = classGenerator.optionFillClass, optionFillHoverClass = classGenerator.optionFillHoverClass, optionShapeClass = classGenerator.optionShapeClass, optionTextColorClass = classGenerator.optionTextColorClass, optionTextSizeClass = classGenerator.optionTextSizeClass, shapeClass = classGenerator.shapeClass, sizeClass = classGenerator.sizeClass;

package/dist/css/components/Checkmark/Checkmark.css

@@ -0,0 +1,30 @@
+.checkmark {
+  border-radius: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  &__svg {
+    width: 100%;
+    height: 100%;
+    & .icon__item {
+      width: 100%;
+      height: 100%;
+      justify-content: center;
+      align-items: center;
+      & > svg {
+        width: 70%;
+        height: 70%;
+      }
+    }
+  }
+}
+.checkmark {
+  &_size {
+    @each $size in xxs, xs, s, m, l, xl, xxl {
+      &_$(size) {
+        min-width: var(--checkmark-width-size-$(size));
+        min-height: var(--checkmark-height-size-$(size));
+      }
+    }
+  }
+}

package/dist/css/components/Code/Code.css

@@ -1,7 +1,8 @@
 .code {
-  display: flex;
+  width: 100%;
   &__wrapper {
     width: 100%;
+    display: flex;
     justify-content: space-between;
   }
 }

package/dist/css/components/Dropdown/Dropdown.css

@@ -115,7 +115,7 @@
 .dropdown__item {
   &_width {
     &_fixed {
-      min-width: 240px;
+      min-width: var(--dropdown-item-width-fixed, 240px);
     }
     &_hug {
       min-width: 62px;

package/dist/css/components/Notification/Notification.css

@@ -57,13 +57,17 @@
   &_set {
     &_form {
       width: 100%;
+      padding: var(--notification-item-set-form-padding, 0);
       border-radius: var(--notification-item-set-form-border-radius, 8px);
+      display: flex;
+      flex-direction: column;
+      gap: var(--notification-item-set-form-gap, 0);
       ^^&-wrapper {
         text-align: left;
-        padding: var(--notification-item-set-form-padding, 12px 16px);
+        padding: var(--notification-item-set-form-wrapper-padding, 12px 16px);
         display: flex;
         flex-direction: column;
-        gap: 4px;
+        gap: var(--notification-item-set-form-wrapper-gap, 4px);
       }
     }
   }

package/dist/css/components/Notification/css/__item/notification__item_set_form.css

@@ -2,13 +2,17 @@
   &_set {
     &_form {
       width: 100%;
+      padding: var(--notification-item-set-form-padding, 0);
       border-radius: var(--notification-item-set-form-border-radius, 8px);
+      display: flex;
+      flex-direction: column;
+      gap: var(--notification-item-set-form-gap, 0);
       ^^&-wrapper {
         text-align: left;
-        padding: var(--notification-item-set-form-padding, 12px 16px);
+        padding: var(--notification-item-set-form-wrapper-padding, 12px 16px);
         display: flex;
         flex-direction: column;
-        gap: 4px;
+        gap: var(--notification-item-set-form-wrapper-gap, 4px);
       }
     }
   }

package/dist/css/components/Pagination/Pagination.css

@@ -75,13 +75,13 @@
     border: solid 1px var(--paginator-item-active-border);
     &&_state {
       &_active {
-        ^^&-link {
-          color: var(--paginator-item-active-text);
-        }
-        background: var(--color-accent-primary);
+        background: var(--paginator-item-active-background, var(--color-accent-primary));
         &:hover {
           background: var(--paginator-item-active-fill-hover);
         }
+        ^^&-link {
+          color: var(--paginator-item-active-text);
+        }
       }
     }
   }

package/dist/css/components/Pagination/css/__item/pagination__item_state_active.css

@@ -3,13 +3,13 @@
     border: solid 1px var(--paginator-item-active-border);
     &&_state {
       &_active {
-        ^^&-link {
-          color: var(--paginator-item-active-text);
-        }
-        background: var(--color-accent-primary);
+        background: var(--paginator-item-active-background, var(--color-accent-primary));
         &:hover {
           background: var(--paginator-item-active-fill-hover);
         }
+        ^^&-link {
+          color: var(--paginator-item-active-text);
+        }
       }
     }
   }

package/dist/css/components/Response/Response.css

@@ -3,13 +3,21 @@
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
-  gap: 32px;
+  &__wrapper {
+    width: 100%;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 24px;
+  }
   &__desc {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 16px;
+    gap: 8px;
   }
   &__button {
     display: flex;

package/dist/css/components/Switch/Switch.css

@@ -56,7 +56,7 @@
 }
 .switch {
   &&_size {
-    @each $size in normal, compact {
+    @each $size in normal, compact, s, m {
       &_$(size) {
         min-width: var(--switch-size-$(size)-width);
         min-height: var(--switch-size-$(size)-height);

package/dist/css/components/Tile/Tile.css

@@ -2,7 +2,7 @@
   &__wrapper {
     position: relative;
     flex: var(--tile-wrapper-flex, auto);
-    & .group {
+    & > .group:first-of-type {
       flex: var(--tile-wrapper-group-flex, auto);
     }
   }

package/dist/stories/Avatar.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as AvatarStories from './Avatar.stories.tsx'
+import * as AvatarStories from './Avatar.stories.js'
 
 <Meta of={AvatarStories} />
 

package/dist/types/components/Checkmark/Checkmark.appearance.d.ts

@@ -0,0 +1,2 @@
+import { tCheckmarkAppearance } from './Checkmark.interface';
+export declare const checkmarkAppearance: tCheckmarkAppearance;

package/dist/types/components/Checkmark/Checkmark.d.ts

@@ -0,0 +1,4 @@
+import { iCheckmarkConfig, iCheckmarkProps } from './Checkmark.interface';
+declare const checkmarkConfig: iCheckmarkConfig;
+declare function Checkmark(props: iCheckmarkProps): import("react/jsx-runtime").JSX.Element;
+export { Checkmark, checkmarkConfig };

package/dist/types/components/Checkmark/Checkmark.interface.d.ts

@@ -0,0 +1,29 @@
+import 'types';
+import { ElementType } from 'react';
+import { tBorderColorProps, tBorderWidthProps, tFillProps, tSizeProps } from 'types';
+import { tAppearanceKeysDefault } from 'types/componentProps/appearanceKeys';
+import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
+export interface iCheckmarkThemeColor {
+    [key: number | string | symbol]: any;
+    borderColor?: tBorderColorProps;
+    borderWidth?: tBorderWidthProps;
+    fill?: tFillProps;
+    size?: tSizeProps;
+}
+type tAppearanceKeys = tAppearanceKeysDefault & {};
+export type tCheckmarkAppearance = {
+    [key in tAppearanceKeysDefault]?: iCheckmarkThemeColor;
+};
+export interface iCheckmarkConfig {
+    [key: number | string | symbol]: any;
+    appearance: tCheckmarkAppearance | undefined;
+    setAppearance: (newComponent: tCheckmarkAppearance) => void;
+}
+export interface iCheckmarkProps extends iCheckmarkThemeColor, iStyleAttributes {
+    [key: number | string | symbol]: any;
+    appearance?: tAppearanceKeys;
+    className?: string;
+    iconChecked: ElementType;
+    isDisabled?: boolean;
+}
+export {};

package/dist/types/components/Checkmark/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkmark, checkmarkConfig } from './Checkmark';
+export { checkmarkAppearance } from './Checkmark.appearance';

package/dist/types/components/Notification/Notification.interface.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-import { tFillProps, tSizeProps, tTextColorProps, tTextSizeProps, tTitleSizeProps, tWidthProps } from 'types';
+import { tFillProps, tSizeProps, tTextColorProps, tTextSizeProps, tWidthProps } from 'types';
 import { tAppearanceKeysDefault } from 'types/componentProps/appearanceKeys';
 import { iStyleAttributes } from '../../hooks/styleAttributes.interface';
 export interface iNotificationItemThemeColor {
@@ -9,7 +9,7 @@ export interface iNotificationItemThemeColor {
     textColor?: tTextColorProps;
     textSize?: tTextSizeProps;
     titleTextColor?: tTextColorProps;
-    titleTextSize?: tTitleSizeProps;
+    titleTextSize?: tTextSizeProps;
     width?: tWidthProps;
 }
 type tAppearanceKeys = tAppearanceKeysDefault & {};
@@ -39,7 +39,7 @@ export interface iNotificationItemProps extends iStyleAttributes {
     textSize?: tTextSizeProps;
     title?: string;
     titleTextColor?: tTextColorProps;
-    titleTextSize?: tTitleSizeProps;
+    titleTextSize?: tTextSizeProps;
     type?: string;
     onClickClose?: (id?: number | string) => void;
     set?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.3.24",
+  "version": "1.3.25",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",