@ozen-ui/kit 0.37.2 → 0.39.0

package/__inner__/cjs/components/ButtonNext/Button.d.ts

@@ -0,0 +1,51 @@
+import './Button.css';
+import type { ReactNode, ElementType, ComponentPropsWithRef } from 'react';
+import type { IconProps, IconSize } from '@ozen-ui/icons';
+import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { RenderContentType } from '../../utils/renderContent';
+import { BUTTON_DEFAULT_TAG } from './constants';
+export declare const buttonVariant: readonly ["contained", "contained-additional", "ghost", "function"];
+export declare const buttonColorVariant: readonly ["primary", "secondary", "tertiary", "error"];
+export type ButtonVariant = (typeof buttonVariant)[number];
+export type ButtonColorVariant = (typeof buttonColorVariant)[number];
+export type ButtonIcon = RenderContentType<IconProps & {
+    size?: IconSize;
+}>['content'];
+type ButtonBaseProps = {
+    /**
+     * Вариант отображения кнопки
+     * @default contained
+     * */
+    variant?: ButtonVariant;
+    /**
+     * Размер
+     * @default m
+     * */
+    size?: FormElementSizeVariant;
+    /**
+     * Цвет
+     * @default primary
+     * */
+    color?: ButtonColorVariant;
+    /** Содержимое кнопки */
+    children?: ReactNode;
+    /** Если {true} делает кнопку заблокированной */
+    disabled?: boolean;
+    /** Если {true} переводит кнопку в состояние загрузки  */
+    loading?: boolean;
+    /** Дополнительные CSS-классы */
+    className?: string;
+    /** Иконка слева */
+    iconLeft?: ButtonIcon;
+    /** Иконка справа */
+    iconRight?: ButtonIcon;
+    /** Если {true} растягивает кнопку на всю ширину родительского контейнера */
+    fullWidth?: boolean;
+    /** Свойства лейбла кнопки */
+    labelProps?: ComponentPropsWithRef<'span'>;
+};
+export type ButtonProps<As extends ElementType = typeof BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<ButtonBaseProps, As>;
+export declare const cnButton: import("@bem-react/classname").ClassNameFormatter;
+export declare const Button: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<ButtonBaseProps, "button">;
+export {};

package/__inner__/cjs/components/ButtonNext/Button.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = exports.cnButton = exports.buttonColorVariant = exports.buttonVariant = void 0;
+var tslib_1 = require("tslib");
+require("./Button.css");
+var react_1 = tslib_1.__importDefault(require("react"));
+var react_transition_group_1 = require("react-transition-group");
+var useThemeProps_1 = require("../../hooks/useThemeProps");
+var classname_1 = require("../../utils/classname");
+var getIconSizeToFormElement_1 = require("../../utils/getIconSizeToFormElement");
+var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
+var renderContent_1 = require("../../utils/renderContent");
+var ButtonBase_1 = require("../ButtonBase");
+var Loader_1 = require("../Loader");
+var constants_1 = require("./constants");
+exports.buttonVariant = [
+    'contained',
+    'contained-additional',
+    'ghost',
+    'function',
+];
+exports.buttonColorVariant = [
+    'primary',
+    'secondary',
+    'tertiary',
+    'error',
+];
+exports.cnButton = (0, classname_1.cn)('ButtonNext');
+exports.Button = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        props: inProps,
+        name: 'ButtonNext',
+    });
+    var _a = props.as, Tag = _a === void 0 ? constants_1.BUTTON_DEFAULT_TAG : _a, _b = props.variant, variant = _b === void 0 ? constants_1.BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? constants_1.BUTTON_DEFAULT_COLOR : _c, _d = props.size, size = _d === void 0 ? constants_1.BUTTON_DEFAULT_SIZE : _d, iconLeft = props.iconLeft, iconRight = props.iconRight, loading = props.loading, children = props.children, disabled = props.disabled, className = props.className, fullWidth = props.fullWidth, labelProps = props.labelProps, onClick = props.onClick, other = tslib_1.__rest(props, ["as", "variant", "color", "size", "iconLeft", "iconRight", "loading", "children", "disabled", "className", "fullWidth", "labelProps", "onClick"]);
+    var iconSize = (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size);
+    var renderIcon = function (content) {
+        return (0, renderContent_1.renderContent)({
+            content: content,
+            props: {
+                size: (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size),
+            },
+        });
+    };
+    var childContent = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("span", { className: (0, exports.cnButton)('Content') },
+            renderIcon(iconLeft),
+            react_1.default.createElement("span", tslib_1.__assign({}, labelProps, { className: (0, exports.cnButton)('Label', [labelProps === null || labelProps === void 0 ? void 0 : labelProps.className]), ref: labelProps === null || labelProps === void 0 ? void 0 : labelProps.ref }), children),
+            renderIcon(iconRight)),
+        react_1.default.createElement(react_transition_group_1.CSSTransition, { in: loading, timeout: 120, classNames: (0, exports.cnButton)('Loader', { animation: true }), unmountOnExit: true },
+            react_1.default.createElement(Loader_1.Loader, { size: iconSize, className: (0, exports.cnButton)('Loader') }))));
+    return (react_1.default.createElement(ButtonBase_1.ButtonBase, tslib_1.__assign({ as: Tag, disabled: disabled, loading: loading, onClick: onClick, className: (0, exports.cnButton)({
+            variant: variant,
+            size: size,
+            disabled: disabled,
+            loading: loading,
+            color: color,
+            fullWidth: fullWidth,
+        }, [className]) }, other, { ref: ref }), childContent));
+});
+exports.Button.displayName = 'Button';

package/__inner__/cjs/components/ButtonNext/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const BUTTON_DEFAULT_SIZE = "m";
+export declare const BUTTON_DEFAULT_VARIANT = "contained";
+export declare const BUTTON_DEFAULT_COLOR = "primary";
+export declare const BUTTON_DEFAULT_TAG = "button";

package/__inner__/cjs/components/ButtonNext/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BUTTON_DEFAULT_TAG = exports.BUTTON_DEFAULT_COLOR = exports.BUTTON_DEFAULT_VARIANT = exports.BUTTON_DEFAULT_SIZE = void 0;
+exports.BUTTON_DEFAULT_SIZE = 'm';
+exports.BUTTON_DEFAULT_VARIANT = 'contained';
+exports.BUTTON_DEFAULT_COLOR = 'primary';
+exports.BUTTON_DEFAULT_TAG = 'button';

package/__inner__/cjs/components/ButtonNext/index.d.ts

@@ -0,0 +1 @@
+export * from './Button';

package/__inner__/cjs/components/ButtonNext/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Button"), exports);

package/__inner__/cjs/components/Card/Card.css

@@ -14,15 +14,15 @@
   }
 
   .Card_size_s {
-      --card-padding: var(--space-l);
+      --card-padding: var(--spacing-s);
     }
 
   .Card_size_m {
-      --card-padding: var(--space-xl);
+      --card-padding: var(--spacing-m);
     }
 
   .Card_size_l {
-      --card-padding: var(--space-2xl);
+      --card-padding: var(--spacing-l);
     }
 
   .Card_interactive {

package/__inner__/cjs/components/Chip/Chip.css

@@ -10,8 +10,8 @@
       text-transform: var(--typography-text-2xs-text_transform, none);
 
       --chip-min-width: 64px;
-      --chip-height: var(--space-xl);
-      --chip-padding-x: var(--space-m);
+      --chip-height: var(--spacing-m);
+      --chip-padding-x: var(--spacing-xs);
     }
 .Chip_size_s {
       font: var(--typography-text-s-font);
@@ -19,8 +19,8 @@
       text-transform: var(--typography-text-s-text_transform, none);
 
       --chip-min-width: 72px;
-      --chip-height: var(--space-2xl);
-      --chip-padding-x: var(--space-l);
+      --chip-height: var(--spacing-l);
+      --chip-padding-x: var(--spacing-s);
     }
 .Chip_size_m {
       font: var(--typography-text-m-font);
@@ -28,7 +28,7 @@
       text-transform: var(--typography-text-m-text_transform, none);
 
       --chip-min-width: 80px;
-      --chip-height: var(--space-3xl);
+      --chip-height: var(--spacing-xl);
       --chip-padding-x: 20px;
     }
 .Chip_size_l {
@@ -37,8 +37,8 @@
       text-transform: var(--typography-text-l-text_transform, none);
 
       --chip-min-width: 88px;
-      --chip-height: var(--space-4xl);
-      --chip-padding-x: var(--space-xl);
+      --chip-height: var(--spacing-2xl);
+      --chip-padding-x: var(--spacing-m);
     }
 .Chip_color_primary {
       --chip-bg-color: var(--color-background-action-light);
@@ -59,8 +59,9 @@
     color: var(--chip-text-color);
     padding: 0 var(--chip-padding-x);
     border-radius: var(--chip-border-radius);
-    gap: var(--space-s);
-    transition: border-color var(--transition-default),
+    gap: var(--spacing-2xs);
+    transition:
+      border-color var(--transition-default),
       color var(--transition-default),
       background-color var(--transition-default),
       box-shadow var(--transition-default);

package/__inner__/cjs/components/ChipNext/Chip.css

@@ -8,7 +8,7 @@
   padding: 0 var(--chip-padding-x);
   min-inline-size: var(--chip-min-width);
   color: var(--chip-text-color);
-  gap: var(--space-s);
+  gap: var(--spacing-2xs);
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -41,8 +41,8 @@
       text-transform: var(--typography-text-2xs-text_transform, none);
 
       --chip-min-width: 64px;
-      --chip-height: var(--space-xl);
-      --chip-padding-x: var(--space-m);
+      --chip-height: var(--spacing-m);
+      --chip-padding-x: var(--spacing-xs);
     }
 .ChipNext_size_s {
       font: var(--typography-text-s-font);
@@ -50,8 +50,8 @@
       text-transform: var(--typography-text-s-text_transform, none);
 
       --chip-min-width: 72px;
-      --chip-height: var(--space-2xl);
-      --chip-padding-x: var(--space-l);
+      --chip-height: var(--spacing-l);
+      --chip-padding-x: var(--spacing-s);
     }
 .ChipNext_size_m {
       font: var(--typography-text-m-font);
@@ -59,7 +59,7 @@
       text-transform: var(--typography-text-m-text_transform, none);
 
       --chip-min-width: 80px;
-      --chip-height: var(--space-3xl);
+      --chip-height: var(--spacing-xl);
       --chip-padding-x: 20px;
     }
 .ChipNext_size_l {
@@ -68,8 +68,8 @@
       text-transform: var(--typography-text-l-text_transform, none);
 
       --chip-min-width: 88px;
-      --chip-height: var(--space-4xl);
-      --chip-padding-x: var(--space-xl);
+      --chip-height: var(--spacing-2xl);
+      --chip-padding-x: var(--spacing-m);
     }
 .ChipNext_color_primary {
       --chip-bg-color: var(--color-background-action-light);

package/__inner__/cjs/components/Container/Container.css

@@ -25,41 +25,41 @@
     max-inline-size: 100%;
   }
 .Container_gutters_xs {
-    padding: 0 var(--space-xs);
+    padding: 0 var(--spacing-3xs);
   }
 .Container_gutters_s {
-    padding: 0 var(--space-s);
+    padding: 0 var(--spacing-2xs);
   }
 .Container_gutters_m {
-    padding: 0 var(--space-m);
+    padding: 0 var(--spacing-xs);
   }
 .Container_gutters_l {
-    padding: 0 var(--space-l);
+    padding: 0 var(--spacing-s);
   }
 .Container_gutters_xl {
-    padding: 0 var(--space-xl);
+    padding: 0 var(--spacing-m);
   }
 .Container_gutters_2xl {
-    padding: 0 var(--space-2xl);
+    padding: 0 var(--spacing-l);
   }
 @media (min-width: 0) {
       .Container_gutters_xs_xs {
-    padding: 0 var(--space-xs);
+    padding: 0 var(--spacing-3xs);
   }
       .Container_gutters_xs_s {
-    padding: 0 var(--space-s);
+    padding: 0 var(--spacing-2xs);
   }
       .Container_gutters_xs_m {
-    padding: 0 var(--space-m);
+    padding: 0 var(--spacing-xs);
   }
       .Container_gutters_xs_l {
-    padding: 0 var(--space-l);
+    padding: 0 var(--spacing-s);
   }
       .Container_gutters_xs_xl {
-    padding: 0 var(--space-xl);
+    padding: 0 var(--spacing-m);
   }
       .Container_gutters_xs_2xl {
-    padding: 0 var(--space-2xl);
+    padding: 0 var(--spacing-l);
   }
       .Container_maxWidth_xs_s {
     max-inline-size: var(--breakpoint-s);
@@ -76,22 +76,22 @@
   }
 @media (min-width: 640px) {
       .Container_gutters_s_xs {
-    padding: 0 var(--space-xs);
+    padding: 0 var(--spacing-3xs);
   }
       .Container_gutters_s_s {
-    padding: 0 var(--space-s);
+    padding: 0 var(--spacing-2xs);
   }
       .Container_gutters_s_m {
-    padding: 0 var(--space-m);
+    padding: 0 var(--spacing-xs);
   }
       .Container_gutters_s_l {
-    padding: 0 var(--space-l);
+    padding: 0 var(--spacing-s);
   }
       .Container_gutters_s_xl {
-    padding: 0 var(--space-xl);
+    padding: 0 var(--spacing-m);
   }
       .Container_gutters_s_2xl {
-    padding: 0 var(--space-2xl);
+    padding: 0 var(--spacing-l);
   }
       .Container_maxWidth_s_s {
     max-inline-size: var(--breakpoint-s);
@@ -108,22 +108,22 @@
   }
 @media (min-width: 1024px) {
       .Container_gutters_m_xs {
-    padding: 0 var(--space-xs);
+    padding: 0 var(--spacing-3xs);
   }
       .Container_gutters_m_s {
-    padding: 0 var(--space-s);
+    padding: 0 var(--spacing-2xs);
   }
       .Container_gutters_m_m {
-    padding: 0 var(--space-m);
+    padding: 0 var(--spacing-xs);
   }
       .Container_gutters_m_l {
-    padding: 0 var(--space-l);
+    padding: 0 var(--spacing-s);
   }
       .Container_gutters_m_xl {
-    padding: 0 var(--space-xl);
+    padding: 0 var(--spacing-m);
   }
       .Container_gutters_m_2xl {
-    padding: 0 var(--space-2xl);
+    padding: 0 var(--spacing-l);
   }
       .Container_maxWidth_m_s {
     max-inline-size: var(--breakpoint-s);
@@ -140,22 +140,22 @@
   }
 @media (min-width: 1280px) {
       .Container_gutters_l_xs {
-    padding: 0 var(--space-xs);
+    padding: 0 var(--spacing-3xs);
   }
       .Container_gutters_l_s {
-    padding: 0 var(--space-s);
+    padding: 0 var(--spacing-2xs);
   }
       .Container_gutters_l_m {
-    padding: 0 var(--space-m);
+    padding: 0 var(--spacing-xs);
   }
       .Container_gutters_l_l {
-    padding: 0 var(--space-l);
+    padding: 0 var(--spacing-s);
   }
       .Container_gutters_l_xl {
-    padding: 0 var(--space-xl);
+    padding: 0 var(--spacing-m);
   }
       .Container_gutters_l_2xl {
-    padding: 0 var(--space-2xl);
+    padding: 0 var(--spacing-l);
   }
       .Container_maxWidth_l_s {
     max-inline-size: var(--breakpoint-s);

package/__inner__/cjs/components/DataList/DataList.css

@@ -32,7 +32,7 @@
 }
 .DataList-animation-enter {
     opacity: 0;
-    transform: translate(0, calc(var(--space-s) * -1));
+    transform: translate(0, calc(var(--spacing-2xs) * -1));
     pointer-events: none;
   }
 .DataList-animation-enter-active {
@@ -57,11 +57,11 @@
     transition:
       opacity var(--transition-default),
       transform var(--transition-default);
-    transform: translate(0, calc(var(--space-s) * -1));
+    transform: translate(0, calc(var(--spacing-2xs) * -1));
     pointer-events: none;
   }
 .DataList-animation-exit-done {
     opacity: 0;
-    transform: translate(0, calc(var(--space-s) * -1));
+    transform: translate(0, calc(var(--spacing-2xs) * -1));
     pointer-events: none;
   }

package/__inner__/cjs/components/Drawer/Drawer.css

@@ -39,7 +39,7 @@
   }
 .Drawer-Subtitle {
     color: var(--color-content-secondary);
-    margin-block-start: var(--space-s);
+    margin-block-start: var(--spacing-2xs);
     padding-inline-end: var(--drawer-header-item-padding-right);
   }
 .Drawer-Body {
@@ -59,7 +59,7 @@
     display: flex;
     justify-content: flex-end;
     margin-block-start: auto;
-    gap: var(--space-s);
+    gap: var(--spacing-2xs);
   }
 .Drawer_variant_medium {
       --drawer-width: 480px;

package/__inner__/cjs/components/FieldControl/FieldControl.css

@@ -16,7 +16,7 @@
       --textfield-gutter-x: 12px;
       --textfield-input-height: 32px;
       --textfield-input-padding: 8px 0;
-      --textfield-input-gap: var(--space-s);
+      --textfield-input-gap: var(--spacing-2xs);
 
       font: var(--typography-text-2xs-font);
 
@@ -28,7 +28,7 @@
       --textfield-gutter-x: 12px;
       --textfield-input-height: 40px;
       --textfield-input-padding: 12px 0;
-      --textfield-input-gap: var(--space-s);
+      --textfield-input-gap: var(--spacing-2xs);
 
       font: var(--typography-text-xs-font);
 
@@ -40,7 +40,7 @@
       --textfield-gutter-x: 16px;
       --textfield-input-height: 48px;
       --textfield-input-padding: 14px 0;
-      --textfield-input-gap: var(--space-m);
+      --textfield-input-gap: var(--spacing-xs);
 
       font: var(--typography-text-s-font);
 
@@ -52,7 +52,7 @@
       --textfield-gutter-x: 20px;
       --textfield-input-height: 56px;
       --textfield-input-padding: 16px 0;
-      --textfield-input-gap: var(--space-m);
+      --textfield-input-gap: var(--spacing-xs);
 
       font: var(--typography-text-m-font);
 
@@ -64,7 +64,7 @@
       --textfield-gutter-x: 24px;
       --textfield-input-height: 64px;
       --textfield-input-padding: 18px 0;
-      --textfield-input-gap: var(--space-l);
+      --textfield-input-gap: var(--spacing-s);
 
       font: var(--typography-text-l-font);
 

package/__inner__/cjs/components/File/File.css

@@ -3,8 +3,8 @@
   font: var(--typography-text-s_1-font);
   letter-spacing: var(--typography-text-s_1-letter_spacing, 0);
   text-transform: var(--typography-text-s_1-text_transform, none);
-  inline-size: var(--space-3xl);
-  block-size: var(--space-3xl);
+  inline-size: var(--spacing-xl);
+  block-size: var(--spacing-xl);
   display: flex;
   align-items: center;
   justify-content: center;

package/__inner__/cjs/components/FilePicker/FilePicker.css

@@ -62,35 +62,35 @@
       --textfield-input-height: 32px;
       --textfield-input-font: var(--typography-text-2xs-font);
       --textfield-input-padding: 8px 0 8px;
-      --textfield-input-gap: var(--space-s);
+      --textfield-input-gap: var(--spacing-2xs);
     }
 .FilePicker_size_xs {
       --textfield-gutter-x: 12px;
       --textfield-input-height: 40px;
       --textfield-input-font: var(--typography-text-xs-font);
       --textfield-input-padding: 19px 0 4px;
-      --textfield-input-gap: var(--space-s);
+      --textfield-input-gap: var(--spacing-2xs);
     }
 .FilePicker_size_s {
       --textfield-gutter-x: 16px;
       --textfield-input-height: 48px;
       --textfield-input-font: var(--typography-text-s-font);
       --textfield-input-padding: 21px 0 6px;
-      --textfield-input-gap: var(--space-m);
+      --textfield-input-gap: var(--spacing-xs);
     }
 .FilePicker_size_m {
       --textfield-gutter-x: 20px;
       --textfield-input-height: 56px;
       --textfield-input-font: var(--typography-text-m-font);
       --textfield-input-padding: 24px 0 6px;
-      --textfield-input-gap: var(--space-m);
+      --textfield-input-gap: var(--spacing-xs);
     }
 .FilePicker_size_l {
       --textfield-gutter-x: 24px;
       --textfield-input-height: 64px;
       --textfield-input-font: var(--typography-text-l-font);
       --textfield-input-padding: 26px 0 6px;
-      --textfield-input-gap: var(--space-l);
+      --textfield-input-gap: var(--spacing-s);
     }
 .FilePicker_fullWidth {
     inline-size: 100%;

package/__inner__/cjs/components/FormControlLabel/FormControlLabel.css

@@ -19,35 +19,35 @@
       letter-spacing: var(--typography-text-3xs-letter_spacing, 0);
       text-transform: var(--typography-text-3xs-text_transform, none);
 
-      --form-control-label-gap: var(--space-s);
+      --form-control-label-gap: var(--spacing-2xs);
     }
 .FormControlLabel_size_xs {
       font: var(--typography-text-xs-font);
       letter-spacing: var(--typography-text-xs-letter_spacing, 0);
       text-transform: var(--typography-text-xs-text_transform, none);
 
-      --form-control-label-gap: var(--space-s);
+      --form-control-label-gap: var(--spacing-2xs);
     }
 .FormControlLabel_size_s {
       font: var(--typography-text-s-font);
       letter-spacing: var(--typography-text-s-letter_spacing, 0);
       text-transform: var(--typography-text-s-text_transform, none);
 
-      --form-control-label-gap: var(--space-s);
+      --form-control-label-gap: var(--spacing-2xs);
     }
 .FormControlLabel_size_m {
       font: var(--typography-text-m-font);
       letter-spacing: var(--typography-text-m-letter_spacing, 0);
       text-transform: var(--typography-text-m-text_transform, none);
 
-      --form-control-label-gap: var(--space-l);
+      --form-control-label-gap: var(--spacing-s);
     }
 .FormControlLabel_size_l {
       font: var(--typography-text-l-font);
       letter-spacing: var(--typography-text-l-letter_spacing, 0);
       text-transform: var(--typography-text-l-text_transform, none);
 
-      --form-control-label-gap: var(--space-l);
+      --form-control-label-gap: var(--spacing-s);
     }
 .FormControlLabel_align_top {
       align-items: flex-start;

package/__inner__/cjs/components/FormGroup/FormGroup.css

@@ -22,10 +22,10 @@
   .FormGroup_size_2xs,
     .FormGroup_size_xs,
     .FormGroup_size_s {
-      --form-group-gap: var(--space-m) var(--space-xl);
+      --form-group-gap: var(--spacing-xs) var(--spacing-m);
     }
 
   .FormGroup_size_m,
     .FormGroup_size_l {
-      --form-group-gap: var(--space-l) var(--space-2xl);
+      --form-group-gap: var(--spacing-s) var(--spacing-l);
     }

package/__inner__/cjs/components/FormTitle/FormTitle.css

@@ -3,29 +3,29 @@
       font: var(--typography-text-2xs_1-font);
       letter-spacing: var(--typography-text-2xs_1-letter_spacing, 0);
       text-transform: var(--typography-text-2xs_1-text_transform, none);
-      margin-block-end: var(--space-m);
+      margin-block-end: var(--spacing-xs);
     }
 .FormTitle_size_xs {
       font: var(--typography-text-xs_1-font);
       letter-spacing: var(--typography-text-xs_1-letter_spacing, 0);
       text-transform: var(--typography-text-xs_1-text_transform, none);
-      margin-block-end: var(--space-m);
+      margin-block-end: var(--spacing-xs);
     }
 .FormTitle_size_s {
       font: var(--typography-text-s_1-font);
       letter-spacing: var(--typography-text-s_1-letter_spacing, 0);
       text-transform: var(--typography-text-s_1-text_transform, none);
-      margin-block-end: var(--space-m);
+      margin-block-end: var(--spacing-xs);
     }
 .FormTitle_size_m {
       font: var(--typography-text-m_1-font);
       letter-spacing: var(--typography-text-m_1-letter_spacing, 0);
       text-transform: var(--typography-text-m_1-text_transform, none);
-      margin-block-end: var(--space-l);
+      margin-block-end: var(--spacing-s);
     }
 .FormTitle_size_l {
       font: var(--typography-text-l_1-font);
       letter-spacing: var(--typography-text-l_1-letter_spacing, 0);
       text-transform: var(--typography-text-l_1-text_transform, none);
-      margin-block-end: var(--space-l);
+      margin-block-end: var(--spacing-s);
     }

package/__inner__/cjs/components/IconButton/IconButton.d.ts

@@ -37,5 +37,8 @@ type IconButtonBaseProps = {
 };
 export type IconButtonProps<As extends ElementType = typeof ICON_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<IconButtonBaseProps, As>;
 export declare const cnIconButton: import("@bem-react/classname").ClassNameFormatter;
+/**
+ * @deprecated Компонент устарел. Для замены используйте компонент IconButtonNext
+ */
 export declare const IconButton: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<IconButtonBaseProps, "button">;
 export {};