@ozen-ui/kit 0.64.0 → 0.65.0

package/__inner__/esm/components/ChipGroup/types.d.ts

@@ -0,0 +1,33 @@
+import type { ElementType, MouseEvent, ReactNode } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
+import type { ChipColorVariant, ChipSizeVariant } from '../ChipNext';
+import type { FormGroupDirectionVariant, FormGroupProps } from '../FormGroup';
+import type { FormTitleProps } from '../FormTitle';
+import type { CHIP_GROUP_DEFAULT_AS } from './constants';
+export type ChipGroupValue = string[];
+export type ChipGroupOnChange = (value: ChipGroupValue, event: MouseEvent<HTMLElement>) => void;
+export type ChipGroupBaseProps = {
+    /** Значение по умолчанию (неконтролируемое состояние) */
+    defaultValue?: ChipGroupValue;
+    /** Текущее значение */
+    value?: ChipGroupValue;
+    /** Вариант представления компонента */
+    color?: ChipColorVariant;
+    /** Размер */
+    size?: ChipSizeVariant;
+    /** Содержимое компонента */
+    children?: ReactNode;
+    /** Направление */
+    direction?: FormGroupDirectionVariant;
+    /** Событие изменения состояния */
+    onChange?: ChipGroupOnChange;
+    /** Если `true` делает элементы неактивными */
+    disabled?: boolean;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
+    /** Свойства FormTitle */
+    titleProps?: FormTitleProps;
+    /** Свойства FormGroup */
+    groupProps?: FormGroupProps;
+};
+export type ChipGroupProps<As extends ElementType = typeof CHIP_GROUP_DEFAULT_AS> = PolymorphicComponentPropsWithoutRef<ChipGroupBaseProps, As>;

package/__inner__/esm/components/ChipGroup/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,5 +1,6 @@
 /* stylelint-disable */
 .ChipNext {
+  --chip-outline: var(--shadow-outline-focused);
   --chip-border-radius: 24px;
   --chip-text-wrap: nowrap;
   background-color: var(--chip-bg-color);
@@ -72,17 +73,53 @@
       --chip-padding-x: var(--spacing-m);
     }
 .ChipNext_color_primary {
-      --chip-bg-color: var(--color-background-action-light);
-      --chip-bg-color-hover: var(--color-background-action-light-hover);
-      --chip-bg-color-active: var(--color-background-action-light-pressed);
-      --chip-text-color: var(--color-content-action-dark);
-    }
+    --chip-bg-color: var(--color-background-action-light);
+    --chip-bg-color-hover: var(--color-background-action-light-hover);
+    --chip-bg-color-active: var(--color-background-action-light-pressed);
+    --chip-text-color: var(--color-content-action-dark);
+  }
 .ChipNext_color_secondary {
-      --chip-bg-color: var(--color-background-secondary);
-      --chip-bg-color-hover: var(--color-background-secondary-hover);
-      --chip-bg-color-active: var(--color-background-secondary-pressed);
-      --chip-text-color: var(--color-content-primary);
-    }
+    --chip-bg-color: var(--color-background-secondary);
+    --chip-bg-color-hover: var(--color-background-secondary-hover);
+    --chip-bg-color-active: var(--color-background-secondary-pressed);
+    --chip-text-color: var(--color-content-primary);
+  }
+.ChipNext_color_main {
+    --chip-bg-color: var(--color-background-main);
+    --chip-bg-color-hover: var(--color-background-main-hover);
+    --chip-bg-color-active: var(--color-background-main-pressed);
+    --chip-text-color: var(--color-content-primary);
+  }
+.ChipNext_color_overlay {
+    --chip-bg-color: var(--color-background-overlay);
+    --chip-bg-color-hover: var(--color-background-overlay);
+    --chip-bg-color-active: var(--color-background-overlay);
+    --chip-text-color: var(--color-content-action-on);
+  }
+.ChipNext_color_primary.ChipNext_checked {
+    --chip-bg-color: var(--color-background-action);
+    --chip-bg-color-hover: var(--color-background-action);
+    --chip-bg-color-active: var(--color-background-action);
+    --chip-text-color: var(--color-content-action-on);
+  }
+.ChipNext_color_primary.ChipNext_checked.ChipNext_disabled {
+    --chip-bg-color: var(--color-background-action-active-disabled);
+    --chip-bg-color-hover: var(--color-background-action-active-disabled);
+    --chip-bg-color-active: var(--color-background-action-active-disabled);
+    --chip-text-color: var(--color-content-primary-inverse);
+  }
+.ChipNext_color_secondary.ChipNext_checked, .ChipNext_color_main.ChipNext_checked, .ChipNext_color_overlay.ChipNext_checked {
+    --chip-bg-color: var(--color-background-action-secondary);
+    --chip-bg-color-hover: var(--color-background-action-secondary);
+    --chip-bg-color-active: var(--color-background-action-secondary);
+    --chip-text-color: var(--color-content-action-on);
+  }
+.ChipNext_color_secondary.ChipNext_checked.ChipNext_disabled, .ChipNext_color_main.ChipNext_checked.ChipNext_disabled, .ChipNext_color_overlay.ChipNext_checked.ChipNext_disabled {
+    --chip-bg-color: var(--color-background-action-secondary-active-disabled);
+    --chip-bg-color-hover: var(--color-background-action-secondary-active-disabled);
+    --chip-bg-color-active: var(--color-background-action-secondary-active-disabled);
+    --chip-text-color: var(--color-content-primary-inverse);
+  }
 .ChipNext:hover {
     --chip-bg-color: var(--chip-bg-color-hover);
   }
@@ -90,19 +127,15 @@
     --chip-bg-color: var(--chip-bg-color-active);
   }
 .ChipNext:focus {
-    box-shadow: var(--shadow-outline-focused);
+    box-shadow: var(--chip-outline);
   }
 .ChipNext:focus:not(:focus-visible) {
     box-shadow: none;
   }
-.ChipNext_checked,
-  .ChipNext_checked:hover,
-  .ChipNext_checked:active {
-    --chip-bg-color: var(--color-background-action);
-    --chip-text-color: var(--color-content-action-on);
-  }
 .ChipNext_disabled {
     --chip-bg-color: var(--color-background-disabled);
+    --chip-bg-color-hover: var(--color-background-disabled);
+    --chip-bg-color-active: var(--color-background-disabled);
     --chip-text-color: var(--color-content-disabled);
     pointer-events: none;
   }

package/__inner__/esm/components/ChipNext/Chip.js

@@ -1,18 +1,43 @@
 import { __assign, __read, __rest } from "tslib";
 import './Chip.css';
-import React from 'react';
+import React, { useContext } from 'react';
+import { logger } from '@ozen-ui/logger';
+import { IS_DEV } from '../../constants/environment';
 import { useControlled } from '../../hooks/useControlled';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
 import { renderContent } from '../../utils/renderContent';
+import { ChipGroupContext } from '../ChipGroup/ChipGroupContext';
 import { CHIP_DEFAULT_TAG, CHIP_DEFAULT_SIZE, CHIP_DEFAULT_VARIANT, CHIP_DEFAULT_DISABLED, } from './constants';
 export var cnChip = cn('ChipNext');
 export var Chip = polymorphicComponentWithRef(function (inProps, ref) {
-    var _a = useThemeProps({ name: 'ChipNext', props: inProps }), _b = _a.size, size = _b === void 0 ? CHIP_DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? CHIP_DEFAULT_VARIANT : _c, _d = _a.disabled, disabled = _d === void 0 ? CHIP_DEFAULT_DISABLED : _d, iconLeft = _a.iconLeft, iconRight = _a.iconRight, multiline = _a.multiline, className = _a.className, children = _a.children, onClick = _a.onClick, checkedProp = _a.checked, _e = _a.as, Tag = _e === void 0 ? CHIP_DEFAULT_TAG : _e, dataTestId = _a["data-testid"], other = __rest(_a, ["size", "color", "disabled", "iconLeft", "iconRight", "multiline", "className", "children", "onClick", "checked", "as", 'data-testid']);
+    var _a = useThemeProps({ name: 'ChipNext', props: inProps }), _b = _a.size, sizeProp = _b === void 0 ? CHIP_DEFAULT_SIZE : _b, _c = _a.color, colorProp = _c === void 0 ? CHIP_DEFAULT_VARIANT : _c, _d = _a.disabled, disabledProp = _d === void 0 ? CHIP_DEFAULT_DISABLED : _d, iconLeft = _a.iconLeft, iconRight = _a.iconRight, multiline = _a.multiline, className = _a.className, children = _a.children, onClick = _a.onClick, checkedProp = _a.checked, _e = _a.as, Tag = _e === void 0 ? CHIP_DEFAULT_TAG : _e, value = _a.value, dataTestId = _a["data-testid"], other = __rest(_a, ["size", "color", "disabled", "iconLeft", "iconRight", "multiline", "className", "children", "onClick", "checked", "as", "value", 'data-testid']);
+    var checked = checkedProp;
+    var size = sizeProp;
+    var disabled = disabledProp;
+    var color = colorProp;
+    var chipGroup = useContext(ChipGroupContext);
+    if (chipGroup) {
+        if (IS_DEV && value === undefined) {
+            logger.error('Отсутствует параметр "value" для Chip, находящегося в ChipGroup.');
+        }
+        if (checked === undefined && chipGroup.value) {
+            checked = chipGroup === null || chipGroup === void 0 ? void 0 : chipGroup.value.includes(value);
+        }
+        if (inProps.size === undefined && chipGroup.size) {
+            size = chipGroup.size;
+        }
+        if (inProps.disabled === undefined && chipGroup.disabled !== undefined) {
+            disabled = chipGroup.disabled;
+        }
+        if (inProps.color === undefined && chipGroup.color) {
+            color = chipGroup.color;
+        }
+    }
     var _f = __read(useControlled({
-        value: checkedProp,
+        value: checked,
         defaultValue: false,
         name: 'ChipNext',
         state: 'open',
@@ -21,8 +46,10 @@ export var Chip = polymorphicComponentWithRef(function (inProps, ref) {
         if (disabled) {
             return;
         }
-        setCheckedState(!checkedState);
-        onClick === null || onClick === void 0 ? void 0 : onClick(event, { checked: !checkedState });
+        var newCheckedState = !checkedState;
+        setCheckedState(newCheckedState);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event, { checked: newCheckedState, value: value });
+        chipGroup === null || chipGroup === void 0 ? void 0 : chipGroup.onClick(event, { checked: newCheckedState, value: value });
     };
     var renderIcon = function (content) {
         return renderContent({

package/__inner__/esm/components/ChipNext/types.d.ts

@@ -3,11 +3,15 @@ import type { IconProps } from '@ozen-ui/icons';
 import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 import type { RenderContentType } from '../../utils/renderContent';
 import type { CHIP_DEFAULT_TAG } from './constants';
+export declare const chipColorVariant: readonly ["primary", "secondary", "main", "overlay"];
+export type ChipColorVariant = (typeof chipColorVariant)[number];
 export declare const chipSizeVariant: readonly ["xs", "s", "m", "l"];
-export declare const chipColorVariant: readonly ["primary", "secondary"];
 export type ChipSizeVariant = (typeof chipSizeVariant)[number];
-export type ChipColorVariant = (typeof chipColorVariant)[number];
 export type ChipIcon = RenderContentType<IconProps>['content'];
+export type ChipOnClick = (event: MouseEvent<HTMLElement>, payload: {
+    checked: boolean;
+    value: string | undefined;
+}) => void;
 export type ChipBaseProps = {
     /** Размер компонента */
     size?: ChipSizeVariant;
@@ -18,9 +22,9 @@ export type ChipBaseProps = {
     /** Если `true` делает элемент выбранным */
     checked?: boolean;
     /** Обработчик нажатия */
-    onClick?: (e: MouseEvent<HTMLElement>, payload: {
-        checked: boolean;
-    }) => void;
+    onClick?: ChipOnClick;
+    /** Значение chip */
+    value?: string;
     /** Иконка слева */
     iconLeft?: ChipIcon;
     /** Иконка справа */

package/__inner__/esm/components/ChipNext/types.js

@@ -1,2 +1,9 @@
+// ---- COLOR ----
+export var chipColorVariant = [
+    'primary',
+    'secondary',
+    'main',
+    'overlay',
+];
+// ---- SIZE ----
 export var chipSizeVariant = ['xs', 's', 'm', 'l'];
-export var chipColorVariant = ['primary', 'secondary'];

package/__inner__/esm/components/FormGroup/types.d.ts

@@ -13,5 +13,7 @@ export type FormGroupBaseProps = {
     children?: ReactNode;
     /** Направление */
     direction?: FormGroupDirectionVariant;
+    /** data-атрибут для тестирования */
+    'data-testid'?: string;
 };
 export type FormGroupProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<FormGroupBaseProps, As>;

package/__inner__/esm/components/FormTitle/FormTitle.d.ts

@@ -5,6 +5,7 @@ import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphi
 export type FormTitleBaseProps = {
     /** Размер — влияет на размер шрифта и отступы заголовка */
     size?: FormElementSizeVariant;
+    'data-testid'?: string;
 };
 export type FormTitleProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithoutRef<FormTitleBaseProps, As>;
 export declare const cnFormTitle: import("@bem-react/classname").ClassNameFormatter;

package/__inner__/esm/components/IconButtonNext/types.d.ts

@@ -8,6 +8,7 @@ export declare const iconButtonColorVariant: readonly ["primary", "secondary", "
 export declare const iconButtonVariant: readonly ["contained", "contained-additional", "ghost", "function", "floating"];
 export type IconButtonVariant = (typeof iconButtonVariant)[number];
 export type IconButtonColorVariant = (typeof iconButtonColorVariant)[number];
+export type IconButtonSize = FormElementSizeVariant;
 export type IconButtonIcon = RenderContentType<IconProps>['content'];
 export type IconButtonBaseProps = {
     /** Иконка */
@@ -15,7 +16,7 @@ export type IconButtonBaseProps = {
     /** Вариант представления компонента */
     variant?: IconButtonVariant;
     /** Размер */
-    size?: FormElementSizeVariant;
+    size?: IconButtonSize;
     /** Основной цвет компонента */
     color?: IconButtonColorVariant;
     /** Цвет иконки кнопки */
@@ -30,6 +31,8 @@ export type IconButtonBaseProps = {
     className?: string;
     /** Если `true` делает компонент круглым  */
     rounded?: boolean;
+    /** Идентификатор компонента для тестов */
+    'data-testid'?: string;
     children?: never;
 };
 export type IconButtonProps<As extends ElementType = typeof ICON_BUTTON_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<IconButtonBaseProps, As>;

package/__inner__/esm/components/IconButtonNext/utils.d.ts

@@ -1,5 +1,5 @@
-import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { LoaderSizeVariant } from '../Loader';
+import type { IconButtonSize } from './types';
 export declare const loaderSizeMapper: {
-    [key in FormElementSizeVariant]: LoaderSizeVariant;
+    [key in IconButtonSize]: LoaderSizeVariant;
 };

package/__inner__/esm/components/InputOTP/constants.d.ts

@@ -2,7 +2,7 @@ import type { StackGapVariant } from '../Stack';
 import type { InputOTPAutoCompleteMode, InputOTPSizeVariant } from './types';
 export declare const INPUT_OTP_DEFAULT_TAG = "div";
 export declare const INPUT_OTP_DEFAULT_AUTO_COMPLETE_MODE: InputOTPAutoCompleteMode;
-export declare const INPUT_OTP_DEFAULT_DISABLE_STROKE = false;
+export declare const INPUT_OTP_DEFAULT_DISABLE_STROKE: boolean;
 export declare const INPUT_OTP_DEFAULT_SIZE: InputOTPSizeVariant;
 export declare const INPUT_OTP_SPACING_BY_SIZE: Readonly<Record<InputOTPSizeVariant, StackGapVariant>>;
 export declare const INPUT_OTP_DEFAULT_FINISH_BEHAVIOR: ({ isFullFilled }: import("./types").InputOTPFinishBehaviorContext) => boolean;

package/__inner__/esm/components/TagNext/types.d.ts

@@ -5,7 +5,7 @@ import type { PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphi
 import type { RenderContentType } from '../../utils/renderContent';
 import type { TAG_DEFAULT_TAG } from './constants';
 export declare const tagVariant: readonly ["primary", "secondary"];
-export declare const tagColorVariant: readonly ["neutral", "action", "error", "warning", "success", "info"];
+export declare const tagColorVariant: readonly ["neutral", "action", "error", "warning", "success", "info", "uncolored"];
 export type TagVariant = (typeof tagVariant)[number];
 export type TagColor = (typeof tagColorVariant)[number];
 export type TagIcon = RenderContentType<IconProps>['content'];

package/__inner__/esm/components/TagNext/types.js

@@ -6,4 +6,5 @@ export var tagColorVariant = [
     'warning',
     'success',
     'info',
+    'uncolored',
 ];

package/__inner__/esm/components/ThemeProvider/types.d.ts

@@ -16,7 +16,8 @@ import type { CardProps } from '../Card';
 import type { CheckboxProps } from '../Checkbox';
 import type { CheckboxGroupProps } from '../CheckboxGroup';
 import type { ChipProps } from '../Chip';
-import type { ChipProps as ChiPropsNext } from '../ChipNext';
+import type { ChipGroupProps } from '../ChipGroup';
+import type { ChipProps as ChipNextProps } from '../ChipNext';
 import type { CollapseProps } from '../Collapse';
 import type { ContainerProps } from '../Container';
 import type { DataListProps } from '../DataList';
@@ -56,6 +57,7 @@ import type { TableContainerProps, TableProps, TableCaptionProps, TableCellProps
 import type { TagProps } from '../Tag';
 import type { TagProps as TagPropsNext } from '../TagNext';
 import type { TextareaProps } from '../Textarea';
+import type { TitleProps } from '../Title';
 import type { ToggleProps } from '../Toggle';
 import type { TooltipProps } from '../Tooltip';
 import type { TypographyProps } from '../Typography';
@@ -91,7 +93,8 @@ export type Theme = {
         Checkbox?: Partial<CheckboxProps>;
         CheckboxGroup?: Partial<CheckboxGroupProps>;
         Chip?: Partial<ChipProps>;
-        ChipNext?: Partial<ChiPropsNext>;
+        ChipNext?: Partial<ChipNextProps>;
+        ChipGroup?: Partial<ChipGroupProps>;
         Collapse?: Partial<CollapseProps>;
         Container?: Partial<ContainerProps>;
         DataList?: Partial<DataListProps>;
@@ -140,6 +143,7 @@ export type Theme = {
         Tag?: Partial<TagProps>;
         TagNext?: Partial<TagPropsNext>;
         Textarea?: Partial<TextareaProps>;
+        Title?: Partial<TitleProps>;
         Toggle?: Partial<ToggleProps>;
         Tooltip?: Partial<TooltipProps>;
         Typography?: Partial<TypographyProps>;

package/__inner__/esm/components/Title/Title.d.ts

@@ -0,0 +1,4 @@
+import './modules/tag/TitleTag.css';
+import type { TitleBaseProps } from './types';
+export declare const cnTitle: import("@bem-react/classname").ClassNameFormatter;
+export declare const Title: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<TitleBaseProps, "div">;

package/__inner__/esm/components/Title/Title.js

@@ -0,0 +1,24 @@
+import { __assign, __rest } from "tslib";
+import './modules/tag/TitleTag.css';
+import React from 'react';
+import { useThemeProps } from '../../hooks/useThemeProps';
+import { cn } from '../../utils/classname';
+import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
+import { TitleVariant } from './components';
+import { TITLE_DEFAULT_SIZE, TITLE_DEFAULT_TAG, TITLE_DEFAULT_VARIANT, } from './constants';
+import { TitleContext } from './TitleContext';
+export var cnTitle = cn('Title');
+export var Title = polymorphicComponentWithRef(function (inProps, ref) {
+    var props = useThemeProps({
+        props: inProps,
+        name: 'Title',
+    });
+    var _a = props.size, size = _a === void 0 ? TITLE_DEFAULT_SIZE : _a, classNameProp = props.className, _b = props.as, as = _b === void 0 ? TITLE_DEFAULT_TAG : _b, _c = props.variant, variant = _c === void 0 ? TITLE_DEFAULT_VARIANT : _c, other = __rest(props, ["size", "className", "as", "variant"]);
+    var className = cnTitle('', [classNameProp]);
+    return (React.createElement(TitleContext.Provider, { value: {
+            size: size,
+            variant: variant,
+        } },
+        React.createElement(TitleVariant, __assign({}, other, { ref: ref, as: as, className: className, size: size, variant: variant }))));
+});
+Title.displayName = 'Title';

package/__inner__/esm/components/Title/TitleContext.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { TitleVariant, TitleSizeVariant } from './entities';
+export type TitleContextValue = {
+    variant: TitleVariant;
+    size: TitleSizeVariant;
+};
+export declare const TitleContext: React.Context<TitleContextValue>;
+export declare const useTitleContext: () => TitleContextValue;

package/__inner__/esm/components/Title/TitleContext.js

@@ -0,0 +1,12 @@
+import React, { useContext } from 'react';
+import { IS_DEV } from '../../constants/environment';
+import { TITLE_DEFAULT_SIZE, TITLE_DEFAULT_VARIANT } from './constants';
+export var TitleContext = React.createContext({
+    variant: TITLE_DEFAULT_VARIANT,
+    size: TITLE_DEFAULT_SIZE,
+});
+export var useTitleContext = function () { return useContext(TitleContext); };
+// Именованный провайдер
+if (IS_DEV) {
+    TitleContext.displayName = 'TitleContext';
+}

package/__inner__/esm/components/Title/components/index.d.ts

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

package/__inner__/esm/components/Title/components/index.js

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

package/__inner__/esm/components/Title/components/variant/TitleVariant.d.ts

@@ -0,0 +1,2 @@
+import type { TitleVariantBaseProps } from './types';
+export declare const TitleVariant: import("../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<TitleVariantBaseProps, "div">;

package/__inner__/esm/components/Title/components/variant/TitleVariant.js

@@ -0,0 +1,21 @@
+import { __assign, __rest } from "tslib";
+import React from 'react';
+import { logger } from '@ozen-ui/logger';
+import { IS_DEV } from '../../../../constants/environment';
+import { polymorphicComponentWithRef } from '../../../../utils/polymorphicComponentWithRef';
+import { titleVariant } from '../../entities';
+import { TitleMain } from './main';
+import { TitleSecondary } from './secondary';
+export var TitleVariant = polymorphicComponentWithRef(function (_a, ref) {
+    var variant = _a.variant, as = _a.as, other = __rest(_a, ["variant", "as"]);
+    if (variant === 'main') {
+        return React.createElement(TitleMain, __assign({}, other, { as: as, ref: ref }));
+    }
+    if (variant === 'secondary') {
+        return React.createElement(TitleSecondary, __assign({}, other, { as: as, ref: ref }));
+    }
+    if (IS_DEV) {
+        logger.error("\u0423 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 'Title' \u043D\u0435\u0442 \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u0430 '".concat(variant, "'. \u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u044B: [").concat(titleVariant.join(', '), "]'"));
+    }
+    return null;
+});

package/__inner__/esm/components/Title/components/variant/index.d.ts

@@ -0,0 +1,4 @@
+export * from './main';
+export * from './secondary';
+export * from './TitleVariant';
+export * from './types';

package/__inner__/esm/components/Title/components/variant/index.js

@@ -0,0 +1,4 @@
+export * from './main';
+export * from './secondary';
+export * from './TitleVariant';
+export * from './types';

package/__inner__/esm/components/Title/components/variant/main/TitleMain.css

@@ -0,0 +1,38 @@
+/* stylelint-disable */
+.TitleMain {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-xs);
+}
+.TitleMain_defaultMargin {
+    margin-block: var(--title-main-default-margin-block);
+  }
+.TitleMain_defaultMargin .TitleMain-Label {
+      block-size: 1em;
+    }
+.TitleMain_size_s {
+      --title-main-default-margin-block: 12px 16px;
+    }
+.TitleMain_size_s .TitleMain-Content {
+        font: var(--typography-heading-xl-font);
+        letter-spacing: var(--typography-heading-xl-letter_spacing, 0);
+        text-transform: var(--typography-heading-xl-text_transform, none);
+      }
+.TitleMain_size_m {
+      --title-main-default-margin-block: 16px 24px;
+    }
+.TitleMain_size_m .TitleMain-Content {
+        font: var(--typography-heading-2xl-font);
+        letter-spacing: var(--typography-heading-2xl-letter_spacing, 0);
+        text-transform: var(--typography-heading-2xl-text_transform, none);
+      }
+.TitleMain-ContentContainer {
+    color: var(--color-content-tertiary);
+  }
+.TitleMain-Content {
+    color: var(--color-content-primary);
+  }
+.TitleMain-Label {
+    cursor: default;
+  }

package/__inner__/esm/components/Title/components/variant/main/TitleMain.d.ts

@@ -0,0 +1,4 @@
+import './TitleMain.css';
+import type { TitleMainBaseProps } from './types';
+export declare const cnTitleMain: import("@bem-react/classname").ClassNameFormatter;
+export declare const TitleMain: import("../../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<TitleMainBaseProps, "div">;

package/__inner__/esm/components/Title/components/variant/main/TitleMain.js

@@ -0,0 +1,32 @@
+import { __assign, __rest } from "tslib";
+import './TitleMain.css';
+import React from 'react';
+import { cn } from '../../../../../utils/classname';
+import { getIconSizeToFormElement } from '../../../../../utils/getIconSizeToFormElement';
+import { polymorphicComponentWithRef } from '../../../../../utils/polymorphicComponentWithRef';
+import { renderContent } from '../../../../../utils/renderContent';
+import { BreadcrumbItem, Breadcrumbs } from '../../../../Breadcrumbs';
+import { Stack } from '../../../../Stack';
+import { TITLE_DEFAULT_TAG } from '../../../constants';
+import { TITLE_MAIN_LABEL_SIZE_MAP } from './config';
+export var cnTitleMain = cn('TitleMain');
+export var TitleMain = polymorphicComponentWithRef(function (_a, ref) {
+    var size = _a.size, className = _a.className, _b = _a.as, Tag = _b === void 0 ? TITLE_DEFAULT_TAG : _b, children = _a.children, renderLeft = _a.renderLeft, renderRight = _a.renderRight, label = _a.label, defaultMarginProp = _a.defaultMargin, other = __rest(_a, ["size", "className", "as", "children", "renderLeft", "renderRight", "label", "defaultMargin"]);
+    var defaultMargin = defaultMarginProp === undefined ? !!label : defaultMarginProp;
+    var renderIcon = function (content) {
+        return renderContent({
+            content: content,
+            props: {
+                size: getIconSizeToFormElement(size),
+            },
+        });
+    };
+    return (React.createElement(Tag, __assign({ className: cnTitleMain({ size: size, defaultMargin: defaultMargin }, [className]) }, other, { ref: ref }),
+        (label || defaultMargin) && (React.createElement(Breadcrumbs, { size: TITLE_MAIN_LABEL_SIZE_MAP[size], className: cnTitleMain('LabelContainer') },
+            React.createElement(BreadcrumbItem, { as: "span", className: cnTitleMain('Label') }, label))),
+        React.createElement(Stack, { gap: "s", align: "center", className: cnTitleMain('ContentContainer') },
+            renderIcon(renderLeft),
+            React.createElement("span", { className: cnTitleMain('Content') }, children),
+            renderIcon(renderRight))));
+});
+TitleMain.displayName = 'TitleMain';

package/__inner__/esm/components/Title/components/variant/main/config.d.ts

@@ -0,0 +1,3 @@
+import type { BreadcrumbsSizeVariant } from '../../../../Breadcrumbs';
+import type { TitleSizeVariant } from '../../../entities';
+export declare const TITLE_MAIN_LABEL_SIZE_MAP: Readonly<Record<TitleSizeVariant, BreadcrumbsSizeVariant>>;

package/__inner__/esm/components/Title/components/variant/main/config.js

@@ -0,0 +1,4 @@
+export var TITLE_MAIN_LABEL_SIZE_MAP = {
+    s: 'xs',
+    m: 's',
+};

package/__inner__/esm/components/Title/components/variant/main/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TitleMain';
+export * from './types';

package/__inner__/esm/components/Title/components/variant/main/index.js

@@ -0,0 +1,2 @@
+export * from './TitleMain';
+export * from './types';

package/__inner__/esm/components/Title/components/variant/main/types.d.ts

@@ -0,0 +1,13 @@
+import type { ElementType } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../../../../utils/polymorphicComponentWithRef';
+import type { TITLE_DEFAULT_TAG } from '../../../constants';
+import type { TitleIcon, TitleSizeVariant } from '../../../entities';
+export type TitleMainBaseProps = {
+    size: TitleSizeVariant;
+    label?: string;
+    renderLeft?: TitleIcon;
+    renderRight?: TitleIcon;
+    defaultMargin?: boolean;
+    'data-testid'?: string;
+};
+export type TitleMainProps<As extends ElementType = typeof TITLE_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<TitleMainBaseProps, As>;

package/__inner__/esm/components/Title/components/variant/main/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/Title/components/variant/secondary/TitleSecondary.css

@@ -0,0 +1,26 @@
+/* stylelint-disable */
+.TitleSecondary {
+  display: inline-block;
+  color: var(--color-content-secondary);
+}
+.TitleSecondary_size_s {
+      --title-secondary-default-margin-block: 24px 12px;
+
+      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);
+    }
+.TitleSecondary_size_m {
+      --title-secondary-default-margin-block: 32px 16px;
+
+      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);
+    }
+.TitleSecondary_defaultMargin {
+    margin-block: var(--title-secondary-default-margin-block);
+  }

package/__inner__/esm/components/Title/components/variant/secondary/TitleSecondary.d.ts

@@ -0,0 +1,4 @@
+import './TitleSecondary.css';
+import type { TitleSecondaryBaseProps } from './types';
+export declare const cnTitleSecondary: import("@bem-react/classname").ClassNameFormatter;
+export declare const TitleSecondary: import("../../../../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<TitleSecondaryBaseProps, "div">;

package/__inner__/esm/components/Title/components/variant/secondary/TitleSecondary.js

@@ -0,0 +1,12 @@
+import { __assign, __rest } from "tslib";
+import './TitleSecondary.css';
+import React from 'react';
+import { cn } from '../../../../../utils/classname';
+import { polymorphicComponentWithRef } from '../../../../../utils/polymorphicComponentWithRef';
+import { TITLE_DEFAULT_TAG } from '../../../constants';
+export var cnTitleSecondary = cn('TitleSecondary');
+export var TitleSecondary = polymorphicComponentWithRef(function (_a, ref) {
+    var size = _a.size, className = _a.className, _b = _a.as, Tag = _b === void 0 ? TITLE_DEFAULT_TAG : _b, children = _a.children, defaultMargin = _a.defaultMargin, other = __rest(_a, ["size", "className", "as", "children", "defaultMargin"]);
+    return (React.createElement(Tag, __assign({ className: cnTitleSecondary({ size: size, defaultMargin: defaultMargin }, [className]) }, other, { ref: ref }), children));
+});
+TitleSecondary.displayName = 'TitleSecondary';

package/__inner__/esm/components/Title/components/variant/secondary/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TitleSecondary';
+export * from './types';

package/__inner__/esm/components/Title/components/variant/secondary/index.js

@@ -0,0 +1,2 @@
+export * from './TitleSecondary';
+export * from './types';