@itcase/ui 1.8.72 → 1.8.74

package/dist/components/AvatarStack.js

@@ -3,8 +3,8 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { A as Avatar } from '../Avatar_es_CZbxsfMv.js';
-import { G as Group } from '../Group_es_CruwH8Al.js';
+import { A as Avatar } from '../Avatar_es_DnqQ0yn6.js';
+import { G as Group } from '../Group_es_Bo7Y6JwT.js';
 import { T as Text } from '../Text_es_BvmOR4nv.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';

package/dist/components/Checkmark.js

@@ -87,6 +87,15 @@ var checkmarkAppearanceSurface = {
         borderWidth: '2',
         checkmarkFill: 'surfaceItemPrimary',
     },
+    surfaceSecondary: {
+        fill: 'surfaceSecondary',
+        fillActive: 'surfacePrimary',
+        fillHover: 'surfaceHover',
+        borderColor: 'surfaceBorderTertiary',
+        borderColorHover: 'surfaceBorderPrimary',
+        borderWidth: '2',
+        checkmarkFill: 'surfaceItemPrimary',
+    },
 };
 
 var checkmarkAppearance = __assign(__assign(__assign(__assign(__assign({}, checkmarkAppearanceAccent), checkmarkAppearanceDisabled), checkmarkAppearanceStyle), checkmarkAppearanceSurface), checkmarkAppearanceSize);

package/dist/components/Dadata.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
 import { PartySuggestions } from 'react-dadata';
-import { I as Input } from '../Input_es_D2mNCqiH.js';
+import { I as Input } from '../Input_es_3C_YhQFo.js';
 import '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import 'lodash/camelCase';

package/dist/components/DatePeriod.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import clsx from 'clsx';
 import { DATE_PERIOD_INTERVALS } from '@itcase/common';
-import { D as DatePickerInput } from '../DatePicker_es_Cn7l4eD0.js';
+import { D as DatePickerInput } from '../DatePicker_es_DIFs7Wgs.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { b as ChipsGroup, C as Chips } from '../ChipsGroup_es_CSRBUuRU.js';
@@ -28,7 +28,7 @@ import '../context/UrlAssetPrefix.js';
 import '../Link_es_BnUIX0QT.js';
 import '../Text_es_BvmOR4nv.js';
 import '../Loader_es_DhNCKZ8Y.js';
-import '../Input_es_D2mNCqiH.js';
+import '../Input_es_3C_YhQFo.js';
 import '../Label_es_DnTcY7ih.js';
 import '@itcase/icons/default';
 import 'lodash/castArray';

package/dist/components/DatePicker.js

@@ -1,4 +1,4 @@
-export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_Cn7l4eD0.js';
+export { D as DatePickerInput, a as datePickerAppearance, d as datePickerConfig } from '../DatePicker_es_DIFs7Wgs.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';
@@ -28,6 +28,6 @@ import '../context/UrlAssetPrefix.js';
 import '../Link_es_BnUIX0QT.js';
 import '../Text_es_BvmOR4nv.js';
 import '../Loader_es_DhNCKZ8Y.js';
-import '../Input_es_D2mNCqiH.js';
+import '../Input_es_3C_YhQFo.js';
 import '../Label_es_DnTcY7ih.js';
 import '@itcase/icons/default';

package/dist/components/Drawer/stories/__mock__.js

@@ -0,0 +1,8 @@
+const DrawerMock = {
+  appearance: 'surfacePrimary',
+  isOpenModal: true,
+  title: 'Title 123',
+  desc: 'Text 123'
+};
+
+export { DrawerMock };

package/dist/components/Drawer.js

@@ -70,7 +70,7 @@ function Drawer(props) {
     var prevIsOpenModalRef = useRef(null);
     var appearanceConfig = useAppearanceConfig(appearance, drawerConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var direction = propsGenerator.direction, size = propsGenerator.size, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, zeroPadding = propsGenerator.zeroPadding, closeIcon = propsGenerator.closeIcon, closeIconFill = propsGenerator.closeIconFill, closeIconFillIcon = propsGenerator.closeIconFillIcon, closeIconFillSize = propsGenerator.closeIconFillSize, closeIconShape = propsGenerator.closeIconShape, closeIconSize = propsGenerator.closeIconSize, closeIconSrc = propsGenerator.closeIconSrc;
+    var direction = propsGenerator.direction, size = propsGenerator.size, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, divider = propsGenerator.divider, zeroPadding = propsGenerator.zeroPadding, closeIcon = propsGenerator.closeIcon, closeIconFill = propsGenerator.closeIconFill, closeIconFillIcon = propsGenerator.closeIconFillIcon, closeIconFillSize = propsGenerator.closeIconFillSize, closeIconShape = propsGenerator.closeIconShape, closeIconSize = propsGenerator.closeIconSize, closeIconSrc = propsGenerator.closeIconSrc;
     useEffect(function () {
         if (onClose && prevIsOpenModalRef.current === true && !isOpenModal) {
             onClose();
@@ -79,7 +79,7 @@ function Drawer(props) {
     }, [isOpenModal, onClose]);
     return (jsxs(ReactDrawer, { className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "dataTour-".concat(dataTour), stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600, 
         // Drawer set prefix "EZDrawer" for any id
-        customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, dataTour: dataTour, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: isOpenModal, onClose: onClickClose, children: [before && jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsx("div", { className: "drawer__close", children: jsx(Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon }) })), (title || desc) && (jsxs("div", { className: "drawer__header", children: [jsx(Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsx(Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
+        customIdSuffix: dataTestId ? "_".concat(dataTestId) : undefined, dataTour: dataTour, enableOverlay: enableOverlay, lockBackgroundScroll: false, overlayClassName: "drawer__overlay", open: isOpenModal, onClose: onClickClose, children: [before && jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (jsx("div", { className: "drawer__close", children: jsx(Icon, { className: "cursor_type_pointer", fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon }) })), (title || desc) && (jsxs("div", { className: "drawer__header", children: [jsx(Title, { className: "drawer__header-title", size: titleTextSize, textColor: titleTextColor, children: title }), jsx(Text, { className: "drawer__header-desc", size: descTextSize, textColor: descTextColor, children: desc })] })), divider && jsx(Divider, { width: "fill", fill: "surfaceTertiary" }), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
 }
 
 export { Drawer, drawerAppearance, drawerConfig };

package/dist/components/Group.js

@@ -1,4 +1,4 @@
-export { G as Group, a as groupAppearance, g as groupConfig } from '../Group_es_CruwH8Al.js';
+export { G as Group, a as groupAppearance, g as groupConfig } from '../Group_es_Bo7Y6JwT.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/Input.js

@@ -1,4 +1,4 @@
-export { I as Input, a as inputAppearance, i as inputConfig } from '../Input_es_D2mNCqiH.js';
+export { I as Input, a as inputAppearance, i as inputConfig } from '../Input_es_3C_YhQFo.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/components/Radio.js

@@ -67,6 +67,31 @@ var radioAppearanceRequire = {
     },
 };
 
+var radioAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+};
+
 var radioAppearanceSize = {
     sizeM: {
         size: 'm',
@@ -111,7 +136,7 @@ var radioAppearanceSuccess = {
     },
 };
 
-var radioAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign({}, radioAppearanceDefault), radioAppearanceError), radioAppearanceSuccess), radioAppearanceRequire), radioAppearanceDisabled), radioAppearanceSize), radioAppearanceStyle);
+var radioAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, radioAppearanceDefault), radioAppearanceError), radioAppearanceSuccess), radioAppearanceRequire), radioAppearanceDisabled), radioAppearanceSize), radioAppearanceShape), radioAppearanceStyle);
 
 var radioConfig = {
     appearance: radioAppearance,
@@ -120,23 +145,23 @@ var radioConfig = {
     },
 };
 function Radio(props) {
-    var id = props.id, className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, checked = props.checked, _a = props.tag, Tag = _a === void 0 ? 'label' : _a, isSkeleton = props.isSkeleton, onChange = props.onChange;
+    var id = props.id, className = props.className, appearance = props.appearance, label = props.label, desc = props.desc, isDisabled = props.isDisabled, checked = props.checked, _a = props.tag, Tag = _a === void 0 ? 'label' : _a, isActive = props.isActive, isSkeleton = props.isSkeleton, onChange = props.onChange;
     var appearanceConfig = useAppearanceConfig(appearance, radioConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, fillRadioActiveClass = propsGenerator.fillRadioActiveClass, fillRadioActiveHoverClass = propsGenerator.fillRadioActiveHoverClass, fillRadioClass = propsGenerator.fillRadioClass, fillRadioHoverClass = propsGenerator.fillRadioHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorClass = propsGenerator.borderColorClass, borderColorRadioActiveClass = propsGenerator.borderColorRadioActiveClass, borderColorRadioActiveHoverClass = propsGenerator.borderColorRadioActiveHoverClass, borderColorRadioClass = propsGenerator.borderColorRadioClass, borderColorRadioHoverClass = propsGenerator.borderColorRadioHoverClass, _b = propsGenerator.shapeClass, shapeClass = _b === void 0 ? 'circular' : _b, sizeClass = propsGenerator.sizeClass;
-    return (jsxs(Tag, { className: clsx(className, 'radio', fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), isSkeleton && 'radio_skeleton', sizeClass && "radio_size_".concat(sizeClass)), htmlFor: id, children: [jsxs("div", { className: "radio__item", children: [jsx("input", { id: id, className: "radio__input", type: "radio", disabled: isDisabled && 'disabled', checked: checked, onChange: onChange }), jsx("div", { className: clsx('radio__state', !checked
+    var fillCheckmarkClass = propsGenerator.fillCheckmarkClass, fillClass = propsGenerator.fillClass, fillRadioActiveClass = propsGenerator.fillRadioActiveClass, fillRadioActiveHoverClass = propsGenerator.fillRadioActiveHoverClass, fillRadioClass = propsGenerator.fillRadioClass, fillRadioHoverClass = propsGenerator.fillRadioHoverClass, labelTextColor = propsGenerator.labelTextColor, labelTextSize = propsGenerator.labelTextSize, labelTextWeight = propsGenerator.labelTextWeight, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize, descTextWeight = propsGenerator.descTextWeight, borderColorClass = propsGenerator.borderColorClass, borderColorRadioActiveClass = propsGenerator.borderColorRadioActiveClass, borderColorRadioActiveHoverClass = propsGenerator.borderColorRadioActiveHoverClass, borderColorRadioClass = propsGenerator.borderColorRadioClass, borderColorRadioHoverClass = propsGenerator.borderColorRadioHoverClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass;
+    return (jsxs(Tag, { className: clsx(className, 'radio', fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), isSkeleton && 'radio_skeleton', sizeClass && "radio_size_".concat(sizeClass)), htmlFor: id, children: [jsxs("div", { className: "radio__item", children: [jsx("input", { id: id, className: "radio__input", type: "radio", disabled: isDisabled && 'disabled', checked: checked, onChange: onChange }), jsx("div", { className: clsx('radio__state', !checked || !isActive
                             ? fillRadioClass && "fill_".concat(fillRadioClass)
-                            : fillRadioActiveClass && "fill_active_".concat(fillRadioActiveClass), !checked
+                            : fillRadioActiveClass && "fill_active_".concat(fillRadioActiveClass), !checked || !isActive
                             ? fillRadioHoverClass && "fill_hover_".concat(fillRadioHoverClass)
                             : fillRadioActiveHoverClass &&
-                                "fill_active_hover_".concat(fillRadioActiveHoverClass), !checked
+                                "fill_active_hover_".concat(fillRadioActiveHoverClass), !checked || !isActive
                             ? borderColorRadioClass && "border-color_".concat(borderColorRadioClass)
                             : borderColorRadioActiveClass &&
-                                "border-color_active_".concat(borderColorRadioActiveClass), !checked
+                                "border-color_active_".concat(borderColorRadioActiveClass), !checked || !isActive
                             ? borderColorRadioHoverClass &&
                                 "border-color_hover_".concat(borderColorRadioHoverClass)
                             : borderColorRadioActiveHoverClass &&
-                                "border-color_active_hover_".concat(borderColorRadioActiveHoverClass), shapeClass && "shape_".concat(shapeClass)), children: "\u00A0" }), jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && "fill_".concat(fillCheckmarkClass)), children: "\u00A0" })] }), label && (jsx(Text, { className: "radio__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsx(Text, { className: "radio__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] }));
+                                "border-color_active_hover_".concat(borderColorRadioActiveHoverClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass)), children: "\u00A0" }), jsx("div", { className: clsx('radio__state-checkmark', checked && fillCheckmarkClass && "fill_".concat(fillCheckmarkClass)), children: "\u00A0" })] }), label && (jsx(Text, { className: "radio__label", size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), desc && (jsx(Text, { className: "radio__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }))] }));
 }
 
 export { Radio, radioAppearance, radioConfig };

package/dist/components/Response.js

@@ -8,7 +8,7 @@ import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceC
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
 import { B as Button } from '../Button_es_3cCwdJcQ.js';
-import { G as Group } from '../Group_es_CruwH8Al.js';
+import { G as Group } from '../Group_es_Bo7Y6JwT.js';
 import { T as Text } from '../Text_es_BvmOR4nv.js';
 import '@itcase/common';
 import '../context/UrlAssetPrefix.js';

package/dist/components/Select.js

@@ -8,7 +8,7 @@ import CreatableSelect from 'react-select/creatable';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { T as Text } from '../Text_es_BvmOR4nv.js';
-import { G as Group } from '../Group_es_CruwH8Al.js';
+import { G as Group } from '../Group_es_Bo7Y6JwT.js';
 import { D as Divider } from '../Divider_es_CiRU0sTz.js';
 import 'react-inlinesvg';
 import '../hoc/urlWithAssetPrefix.js';

package/dist/components/Switch.js

@@ -117,30 +117,20 @@ var switchConfig = {
     },
 };
 var Switch = React.forwardRef(function Switch(props, ref) {
-    var id = props.id, className = props.className, appearance = props.appearance, _a = props.align, align = _a === void 0 ? 'left' : _a, title = props.title, desc = props.desc, disabled = props.disabled, checked = props.checked, isActive = props.isActive, onChange = props.onChange;
+    var id = props.id, className = props.className, appearance = props.appearance, _a = props.align, align = _a === void 0 ? 'left' : _a, title = props.title, desc = props.desc, isDisabled = props.isDisabled, isChecked = props.isChecked, isActive = props.isActive, onChange = props.onChange;
     var appearanceConfig = useAppearanceConfig(appearance, switchConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     var size = propsGenerator.size, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, fillToggleActiveClass = propsGenerator.fillToggleActiveClass, fillToggleActiveHoverClass = propsGenerator.fillToggleActiveHoverClass, fillToggleClass = propsGenerator.fillToggleClass, fillToggleHoverClass = propsGenerator.fillToggleHoverClass, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize;
-    return (jsxs("div", { className: clsx('switch', className, align && "switch_align_".concat(align), size && "switch_size_".concat(size)), children: [title && (jsx(Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsx(Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc })), jsxs("div", { className: 'switch__item', children: [jsx("input", { id: id, className: "switch__checkbox", type: "checkbox", disabled: disabled, checked: checked || isActive, 
+    return (jsxs("div", { className: clsx('switch', className, align && "switch_align_".concat(align), size && "switch_size_".concat(size)), children: [title && (jsx(Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsx(Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc })), jsxs("div", { className: 'switch__item', children: [jsx("input", { id: id, className: "switch__checkbox", type: "checkbox", disabled: isDisabled && 'disabled', checked: (isActive || isChecked) && 'checked', 
                         // @ts-expect-error
-                        ref: ref, onChange: onChange }), jsx("div", { className: clsx('switch__bg', !checked
+                        ref: ref, onChange: onChange }), jsx("div", { className: clsx('switch__bg', !isActive || !isChecked
                             ? fillClass && "fill_".concat(fillClass)
-                            : fillActiveClass && "fill_active_".concat(fillActiveClass), !checked
+                            : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive || !isChecked
                             ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
                             : fillActiveHoverClass &&
-                                "fill_active_hover_".concat(fillActiveHoverClass), !isActive
-                            ? fillClass && "fill_".concat(fillClass)
-                            : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
-                            ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
-                            : fillActiveHoverClass &&
-                                "fill_active_hover_".concat(fillActiveHoverClass)), children: "\u00A0" }), jsx("div", { className: clsx('switch__toggle', !checked
-                            ? fillToggleClass && "fill_".concat(fillToggleClass)
-                            : fillToggleActiveClass && "fill_active_".concat(fillToggleActiveClass), !checked
-                            ? fillToggleHoverClass && "fill_hover_".concat(fillToggleHoverClass)
-                            : fillToggleActiveHoverClass &&
-                                "fill_active_hover_".concat(fillToggleActiveHoverClass), !isActive
+                                "fill_active_hover_".concat(fillActiveHoverClass)), children: "\u00A0" }), jsx("div", { className: clsx('switch__toggle', !isActive || !isChecked
                             ? fillToggleClass && "fill_".concat(fillToggleClass)
-                            : fillToggleActiveClass && "fill_active_".concat(fillToggleActiveClass), !isActive
+                            : fillToggleActiveClass && "fill_active_".concat(fillToggleActiveClass), !isActive || !isChecked
                             ? fillToggleHoverClass && "fill_hover_".concat(fillToggleHoverClass)
                             : fillToggleActiveHoverClass &&
                                 "fill_active_hover_".concat(fillToggleActiveHoverClass)), children: "\u00A0" })] })] }));

package/dist/components/Textarea.js

@@ -110,6 +110,31 @@ var textareaAppearanceRequire = {
     },
 };
 
+var textareaAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+};
+
 var textareaAppearanceSize = {
     sizeXXL: {
         size: 'xxl',
@@ -175,7 +200,7 @@ var textareaAppearanceSuccess = {
     },
 };
 
-var textareaAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign({}, textareaAppearanceDefault), textareaAppearanceError), textareaAppearanceSuccess), textareaAppearanceRequire), textareaAppearanceDisabled), textareaAppearanceSize), textareaAppearanceStyle);
+var textareaAppearance = __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({}, textareaAppearanceDefault), textareaAppearanceShape), textareaAppearanceError), textareaAppearanceSuccess), textareaAppearanceRequire), textareaAppearanceDisabled), textareaAppearanceSize), textareaAppearanceStyle);
 
 var textareaConfig = {
     appearance: textareaAppearance,
@@ -187,8 +212,8 @@ function Textarea(props) {
     var id = props.id, className = props.className, appearance = props.appearance, isDisabled = props.isDisabled, placeholder = props.placeholder, value = props.value, onBlur = props.onBlur, onChange = props.onChange, onKeyDown = props.onKeyDown;
     var appearanceConfig = useAppearanceConfig(appearance, textareaConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
-    var fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderHoverClass = propsGenerator.borderHoverClass, borderWidthClass = propsGenerator.borderWidthClass, textColorClass = propsGenerator.textColorClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
-    return (jsx("div", { className: clsx('textarea', className, sizeClass && "textarea_size_".concat(sizeClass), shapeClass && "textarea_shape_".concat(shapeClass)), children: jsx("textarea", { id: id, className: clsx('textarea__input', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderHoverClass && "border-color_hover_".concat(borderHoverClass), placeholderTextColorClass &&
+    var fillClass = propsGenerator.fillClass, borderColorClass = propsGenerator.borderColorClass, borderHoverClass = propsGenerator.borderHoverClass, borderWidthClass = propsGenerator.borderWidthClass, textColorClass = propsGenerator.textColorClass, textSizeClass = propsGenerator.textSizeClass, textWeightClass = propsGenerator.textWeightClass, caretClass = propsGenerator.caretClass, placeholderTextColorClass = propsGenerator.placeholderTextColorClass, shapeClass = propsGenerator.shapeClass, shapeStrengthClass = propsGenerator.shapeStrengthClass, sizeClass = propsGenerator.sizeClass, widthClass = propsGenerator.widthClass;
+    return (jsx("div", { className: clsx('textarea', className, sizeClass && "textarea_size_".concat(sizeClass)), children: jsx("textarea", { id: id, className: clsx('textarea__input', (textSizeClass || textColorClass || textWeightClass) && 'text', caretClass && "caret-color_".concat(caretClass), fillClass && "fill_".concat(fillClass), borderColorClass && "border-color_".concat(borderColorClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderHoverClass && "border-color_hover_".concat(borderHoverClass), shapeClass && "shape_".concat(shapeClass), shapeStrengthClass && "shape-strength_".concat(shapeStrengthClass), placeholderTextColorClass &&
                 "placeholder-text-color_".concat(placeholderTextColorClass), textSizeClass && "text_size_".concat(textSizeClass), textColorClass && "text-color_".concat(textColorClass), textWeightClass && "text-weight_".concat(textWeightClass), widthClass && "width_".concat(widthClass)), disabled: isDisabled && 'disabled', placeholder: placeholder, value: value, onBlur: onBlur, onChange: onChange, onKeyDown: onKeyDown }) }));
 }
 

package/dist/css/components/Input/Input.css

@@ -22,10 +22,6 @@
 }
 .input {
   &_shape {
-    &_rounded {
-      border-radius: var(--input-shape-rounded);
-      position: relative;
-    }
     &_underline {
       border-left: none !important;
       border-top: none !important;

package/dist/css/components/Textarea/Textarea.css

@@ -22,10 +22,6 @@
 .textarea {
   &_shape {
     &^&__input {
-      &_rounded {
-        border-radius: var(--textarea-shape-rounded);
-        position: relative;
-      }
       &_underline {
         border-left: none !important;
         border-top: none !important;

package/dist/types/components/Avatar/appearance/avatarShape.d.ts

@@ -5,7 +5,7 @@ declare const avatarAppearanceShape: {
     rounded: {
         shape: string;
     };
-    roundedL: {
+    roundedS: {
         shape: string;
         shapeStrength: string;
     };
@@ -13,7 +13,7 @@ declare const avatarAppearanceShape: {
         shape: string;
         shapeStrength: string;
     };
-    roundedS: {
+    roundedL: {
         shape: string;
         shapeStrength: string;
     };

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

@@ -8,5 +8,14 @@ declare const checkmarkAppearanceSurface: {
         borderWidth: string;
         checkmarkFill: string;
     };
+    surfaceSecondary: {
+        fill: string;
+        fillActive: string;
+        fillHover: string;
+        borderColor: string;
+        borderColorHover: string;
+        borderWidth: string;
+        checkmarkFill: string;
+    };
 };
 export { checkmarkAppearanceSurface };

package/dist/types/components/Input/appearance/inputShape.d.ts

@@ -0,0 +1,25 @@
+declare const inputAppearanceShape: {
+    circular: {
+        shape: string;
+    };
+    rounded: {
+        shape: string;
+    };
+    roundedS: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedM: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedL: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedXL: {
+        shape: string;
+        shapeStrength: string;
+    };
+};
+export { inputAppearanceShape };

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

@@ -10,6 +10,28 @@ export declare const radioAppearance: {
         fill: string;
         borderColor: string;
     };
+    circular: {
+        shape: string;
+    };
+    rounded: {
+        shape: string;
+    };
+    roundedS: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedM: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedL: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedXL: {
+        shape: string;
+        shapeStrength: string;
+    };
     sizeM: {
         size: string;
         labelTextSize: string;

package/dist/types/components/Radio/appearance/radioShape.d.ts

@@ -0,0 +1,25 @@
+declare const radioAppearanceShape: {
+    circular: {
+        shape: string;
+    };
+    rounded: {
+        shape: string;
+    };
+    roundedS: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedM: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedL: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedXL: {
+        shape: string;
+        shapeStrength: string;
+    };
+};
+export { radioAppearanceShape };

package/dist/types/components/Textarea/appearance/textareaShape.d.ts

@@ -0,0 +1,25 @@
+declare const textareaAppearanceShape: {
+    circular: {
+        shape: string;
+    };
+    rounded: {
+        shape: string;
+    };
+    roundedS: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedM: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedL: {
+        shape: string;
+        shapeStrength: string;
+    };
+    roundedXL: {
+        shape: string;
+        shapeStrength: string;
+    };
+};
+export { textareaAppearanceShape };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.72",
+  "version": "1.8.74",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -103,7 +103,7 @@
     "@emotion/is-prop-valid": "^1.3.1",
     "@itcase/common": "^1.2.28",
     "@itcase/icons": "^1.2.16",
-    "@itcase/storybook-config": "^1.1.61",
+    "@itcase/storybook-config": "^1.1.66",
     "@itcase/tokens-am": "^1.1.19",
     "@itcase/tokens-baikal": "^1.1.17",
     "@itcase/tokens-palette": "^1.1.11",
@@ -143,7 +143,7 @@
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
     "@itcase/config": "^1.0.54",
-    "@itcase/lint": "^1.1.27",
+    "@itcase/lint": "^1.1.29",
     "@itcase/types": "^1.0.6",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
@@ -169,12 +169,12 @@
     "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "conventional-changelog-conventionalcommits": "^9.1.0",
-    "eslint": "9.31.0",
+    "eslint": "9.32.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.1.2",
     "prettier": "^3.6.2",
     "react-docgen-typescript": "^2.4.0",
-    "rollup": "^4.45.1",
+    "rollup": "^4.46.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.2.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",

package/dist/Group_cjs_D4QLNgcC.js

@@ -1,50 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
-var useAppearanceConfig = require('./cjs/hooks/useAppearanceConfig/useAppearanceConfig.js');
-var useDevicePropsGenerator = require('./cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useStyles = require('./cjs/hooks/useStyles/useStyles.js');
-
-var groupAppearance = {
-    dev: {
-        direction: 'horizontal',
-        fill: 'surfacePrimary',
-        fillHover: 'surfacePrimaryHover',
-        borderColor: 'surfaceBorderPrimary',
-        borderWidth: 1,
-    },
-};
-
-var groupConfig = {
-    appearance: groupAppearance,
-    setAppearance: function (appearanceConfig) {
-        groupConfig.appearance = appearanceConfig;
-    },
-};
-var Group = React.forwardRef(function Group(props, ref) {
-    var id = props.id, className = props.className, name = props.name, appearance = props.appearance, dataTestId = props.dataTestId, dataTour = props.dataTour, htmlFor = props.htmlFor, scroll = props.scroll, style = props.style, _a = props.tag, Tag = _a === void 0 ? 'div' : _a, isActive = props.isActive, onClick = props.onClick, onMouseDown = props.onMouseDown, children = props.children;
-    var appearanceConfig = useAppearanceConfig.useAppearanceConfig(appearance, groupConfig);
-    var propsGenerator = useDevicePropsGenerator.useDevicePropsGenerator(props, appearanceConfig);
-    var directionClass = propsGenerator.directionClass, flexGrowClass = propsGenerator.flexGrowClass, justifyContentClass = propsGenerator.justifyContentClass, alignClass = propsGenerator.alignClass, alignDirectionClass = propsGenerator.alignDirectionClass, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, borderColorActiveClass = propsGenerator.borderColorActiveClass, borderColorActiveHoverClass = propsGenerator.borderColorActiveHoverClass, borderColorClass = propsGenerator.borderColorClass, borderColorHoverClass = propsGenerator.borderColorHoverClass, borderTypeClass = propsGenerator.borderTypeClass, borderWidthClass = propsGenerator.borderWidthClass, textColorActiveClass = propsGenerator.textColorActiveClass, textColorClass = propsGenerator.textColorClass, textColorHoverClass = propsGenerator.textColorHoverClass, columnsClass = propsGenerator.columnsClass, elevationClass = propsGenerator.elevationClass, heightClass = propsGenerator.heightClass, iconFillHoverClass = propsGenerator.iconFillHoverClass, shapeClass = propsGenerator.shapeClass, stackingClass = propsGenerator.stackingClass, widthClass = propsGenerator.widthClass, wrapClass = propsGenerator.wrapClass;
-    // @ts-expect-error
-    var groupStyles = useStyles.useStyles(props).styles;
-    return (jsxRuntime.jsx(Tag, { id: id, dataTestId: dataTestId, dataTour: dataTour, className: clsx(className, 'group', widthClass && "width_".concat(widthClass), heightClass && "height_".concat(heightClass), columnsClass && "group_columns_".concat(columnsClass), alignDirectionClass && "align_".concat(alignDirectionClass), directionClass && "group_direction_".concat(directionClass), alignClass && "align_".concat(alignClass), textColorClass && "group_text-color_".concat(textColorClass), textColorActiveClass &&
-            "group_text-color_active_".concat(textColorActiveClass), textColorHoverClass && "group_text-color_hover_".concat(textColorHoverClass), iconFillHoverClass && "group_icon_fill_hover_".concat(iconFillHoverClass), !isActive
-            ? fillClass && "fill_".concat(fillClass)
-            : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
-            ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
-            : fillActiveHoverClass && "fill_active_hover_".concat(fillActiveHoverClass), scroll && "group_scroll_".concat(scroll), stackingClass && "group_stacking_".concat(stackingClass), wrapClass && "group_wrap_".concat(wrapClass), flexGrowClass && "flex-grow_".concat(flexGrowClass), shapeClass && "group_shape_".concat(shapeClass), !isActive
-            ? borderColorClass && "border-color_".concat(borderColorClass)
-            : borderColorActiveClass &&
-                "border-color_active_".concat(borderColorActiveClass), !isActive
-            ? borderColorHoverClass &&
-                "border-color_hover_".concat(borderColorHoverClass)
-            : borderColorActiveHoverClass &&
-                "border-color_active_hover_".concat(borderColorActiveHoverClass), borderWidthClass && "border-width_".concat(borderWidthClass), borderTypeClass && "border_type_".concat(borderTypeClass), elevationClass && "elevation_".concat(elevationClass), justifyContentClass && "justify-content_".concat(justifyContentClass), onClick && 'cursor_type_pointer'), name: name, htmlFor: htmlFor, ref: ref, style: Object.assign({}, groupStyles, style), onClick: onClick, onMouseDown: onMouseDown, children: children }));
-});
-
-exports.Group = Group;
-exports.groupAppearance = groupAppearance;
-exports.groupConfig = groupConfig;