@ozen-ui/kit 0.73.0 → 0.75.0

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

@@ -1,5 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DATE_PICKER_DEFAULT_MODE = exports.DATE_PICKER_DEFAULT_SIZE = void 0;
+exports.DATE_PICKER_DEFAULT_INITIAL_STEP = exports.DATE_PICKER_DEFAULT_STEPS = exports.DATE_PICKER_DEFAULT_MODE = exports.DATE_PICKER_DEFAULT_SIZE = void 0;
+var Calendar_1 = require("../Calendar");
 exports.DATE_PICKER_DEFAULT_SIZE = 'm';
 exports.DATE_PICKER_DEFAULT_MODE = 'date';
+exports.DATE_PICKER_DEFAULT_STEPS = Calendar_1.CALENDAR_DEFAULT_STEPS;
+exports.DATE_PICKER_DEFAULT_INITIAL_STEP = Calendar_1.CALENDAR_DEFAULT_INITIAL_STEP;

package/__inner__/cjs/components/DatePicker/types.d.ts

@@ -1,11 +1,11 @@
 import type { ChangeEvent, ComponentRef, ReactNode } from 'react';
 import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
 import type { WithDisplayName } from '../../types/react';
-import type { CalendarProps } from '../Calendar';
+import type { CalendarPropCalendars, CalendarProps, CalendarSteps } from '../Calendar';
 import type { FieldHintProps } from '../FieldHint';
 import type { FieldInputProps } from '../FieldInput';
 import type { FieldLabelProps } from '../FieldLabel';
-import type { InputProps, InputSizeVariant } from '../Input';
+import type { InputProps } from '../Input';
 import type { PopoverBaseProps } from '../Popover';
 import type { StackProps } from '../Stack';
 import type { DATE_PICKER_DEFAULT_MODE } from './constants';
@@ -19,7 +19,11 @@ export type DatePickerPropOnChange<MODE extends DatePickerModeVariant> = (date:
 type InputPropLabel = InputProps['label'];
 type InputPropRenderLeft = InputProps['renderLeft'];
 type InputPropRenderRight = InputProps['renderRight'];
-type InputPropPlaceholder = InputProps['placeholder'];
+type InputPropPlaceholderString = InputProps['placeholder'];
+type InputPropPlaceholderFunction = (steps: CalendarSteps) => InputPropPlaceholderString;
+export type InputPropPlaceholder = InputPropPlaceholderString | InputPropPlaceholderFunction;
+export declare const datePickerSizeVariant: readonly ["2xs", "xs", "s", "m", "l"];
+export type DatePickerSizeVariant = (typeof datePickerSizeVariant)[number];
 export type DatePickerPropLabel<MODE> = MODE extends Range ? [InputPropLabel?, InputPropLabel?] | InputPropLabel : InputPropLabel;
 export type DatePickerPropRenderLeft<MODE> = MODE extends Range ? [InputPropRenderLeft?, InputPropRenderLeft?] | InputPropRenderLeft : InputPropRenderLeft;
 export type DatePickerPropRenderRight<MODE> = MODE extends Range ? [InputPropRenderRight?, InputPropRenderRight?] | InputPropRenderRight : InputPropRenderRight;
@@ -96,7 +100,7 @@ export type DatePickerProps<MODE extends DatePickerModeVariant = typeof DATE_PIC
     /** Cвойства FieldHint */
     hintProps?: Omit<FieldHintProps, 'children'>;
     /** Размер компонента */
-    size?: InputSizeVariant;
+    size?: DatePickerSizeVariant;
     /** Если `true` растягивает поле на всю ширину */
     fullWidth?: boolean;
     /** Если `true` делает элемент обязательным к заполнению */
@@ -108,8 +112,8 @@ export type DatePickerProps<MODE extends DatePickerModeVariant = typeof DATE_PIC
     /** Свойства обертки для текстовых полей. Принимает свойства компонента [Stack](https://ozen-ui.bereke.tech/?path=/docs/components-stack--docs) */
     fieldsProps?: DatePickerPropFieldsProps<MODE>;
     /** Количество отображаемых календарей в компоненте: один или два */
-    calendars?: 1 | 2;
-} & Pick<CalendarProps, 'minDate' | 'maxDate' | 'exclude'> & Pick<InputProps, 'onKeyDown'>, 'div'>;
+    calendars?: CalendarPropCalendars;
+} & Pick<CalendarProps, 'minDate' | 'maxDate' | 'exclude' | 'steps' | 'initialStep'> & Pick<InputProps, 'onKeyDown'>, 'div'>;
 export type DatePickerComponent = WithDisplayName<(<MODE extends DatePickerModeVariant = typeof DATE_PICKER_DEFAULT_MODE>(props: DatePickerProps<MODE>) => ReactNode)>;
 export type DatePickerModeComponent<MODE extends DatePickerModeVariant> = WithDisplayName<(props: Omit<DatePickerProps<MODE>, 'mode'>) => ReactNode>;
 export {};

package/__inner__/cjs/components/DatePicker/types.js

@@ -1,4 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.datePickerModeVariant = void 0;
+exports.datePickerSizeVariant = exports.datePickerModeVariant = void 0;
+var types_1 = require("../../types");
 exports.datePickerModeVariant = ['date', 'date-range'];
+exports.datePickerSizeVariant = types_1.formElementSizeVariant;

package/__inner__/cjs/components/DatePicker/utils/formatDateToString/formatDateToString.d.ts

@@ -1 +1,2 @@
-export declare const formatDateToString: (date: Date | undefined | null) => string;
+import type { CalendarSteps } from '../../../Calendar';
+export declare const formatDateToString: (date: Date | undefined | null, steps: CalendarSteps) => string;

package/__inner__/cjs/components/DatePicker/utils/formatDateToString/formatDateToString.js

@@ -1,13 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formatDateToString = void 0;
-var formatDateToString = function (date) {
+var formatDateToString = function (date, steps) {
     if (!date) {
         return '';
     }
-    var year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(date);
-    var month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(date);
-    var day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date);
-    return "".concat(day, ".").concat(month, ".").concat(year);
+    var hasYearsStep = steps.includes('years');
+    var hasMonthsStep = steps.includes('months');
+    var hasDaysStep = steps.includes('days');
+    var parts = [];
+    if (hasDaysStep) {
+        var day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date);
+        parts.push(day);
+    }
+    if (hasMonthsStep) {
+        var month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(date);
+        parts.push(month);
+    }
+    if (hasYearsStep) {
+        var year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(date);
+        parts.push(year);
+    }
+    return parts.join('.');
 };
 exports.formatDateToString = formatDateToString;

package/__inner__/cjs/components/DatePicker/utils/formatStringToDate/formatStringToDate.d.ts

@@ -1 +1,2 @@
-export declare const formatStringToDate: (value: string) => Date | null;
+import type { CalendarSteps } from '../../../Calendar';
+export declare const formatStringToDate: (value: string, steps: CalendarSteps) => Date | null;

package/__inner__/cjs/components/DatePicker/utils/formatStringToDate/formatStringToDate.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formatStringToDate = void 0;
-var tslib_1 = require("tslib");
-var formatStringToDate = function (value) {
-    var _a = tslib_1.__read(value.split('.'), 3), date = _a[0], month = _a[1], year = _a[2];
-    if (!(date && month && year)) {
+var parseDateString_1 = require("../parseDateString");
+var formatStringToDate = function (value, steps) {
+    var parsedDate = (0, parseDateString_1.parseDateString)(value, steps);
+    if (!parsedDate) {
         return null;
     }
-    return new Date(+year, +month - 1, +date);
+    var day = parsedDate.day, month = parsedDate.month, year = parsedDate.year;
+    return new Date(+year, +month - 1, +day);
 };
 exports.formatStringToDate = formatStringToDate;

package/__inner__/cjs/components/DatePicker/utils/getCommonCalendarProps/getCommonCalendarProps.js

@@ -4,13 +4,13 @@ exports.getCommonCalendarProps = void 0;
 var tslib_1 = require("tslib");
 var getCalendarSizeToFormElement_1 = require("../getCalendarSizeToFormElement");
 var getCommonCalendarProps = function (props) {
-    var minDate = props.minDate, maxDate = props.maxDate, exclude = props.exclude, _a = props.size, size = _a === void 0 ? 'm' : _a, ref = props.ref, calendarProps = props.calendarProps;
+    var minDate = props.minDate, maxDate = props.maxDate, exclude = props.exclude, _a = props.size, size = _a === void 0 ? 'm' : _a, ref = props.ref, calendarProps = props.calendarProps, steps = props.steps, initialStep = props.initialStep;
     /** Соотношение размера календаря к размеру элемента контроля */
     var calendarSize = (0, getCalendarSizeToFormElement_1.getCalendarSizeToFormElement)(size);
     /** Предотвращаем переход фокуса с текстового поля на интерактивные элементы календаря */
     var handleMouseDownCalendar = function (e) {
         e.preventDefault();
     };
-    return tslib_1.__assign(tslib_1.__assign({ minDate: minDate, maxDate: maxDate, exclude: exclude, size: calendarSize }, calendarProps), { ref: ref, onMouseDown: handleMouseDownCalendar });
+    return tslib_1.__assign(tslib_1.__assign({ minDate: minDate, maxDate: maxDate, exclude: exclude, size: calendarSize }, calendarProps), { ref: ref, onMouseDown: handleMouseDownCalendar, steps: steps, initialStep: initialStep });
 };
 exports.getCommonCalendarProps = getCommonCalendarProps;

package/__inner__/cjs/components/DatePicker/utils/index.d.ts

@@ -6,4 +6,6 @@ export * from './isInExclude';
 export * from './getCommonPopoverProps';
 export * from './getCommonCalendarProps';
 export * from './isValidDateString';
+export * from './maskPastedDate';
+export * from './parseDateString';
 export * from './useCalendarKeyboard';

package/__inner__/cjs/components/DatePicker/utils/index.js

@@ -9,4 +9,6 @@ tslib_1.__exportStar(require("./isInExclude"), exports);
 tslib_1.__exportStar(require("./getCommonPopoverProps"), exports);
 tslib_1.__exportStar(require("./getCommonCalendarProps"), exports);
 tslib_1.__exportStar(require("./isValidDateString"), exports);
+tslib_1.__exportStar(require("./maskPastedDate"), exports);
+tslib_1.__exportStar(require("./parseDateString"), exports);
 tslib_1.__exportStar(require("./useCalendarKeyboard"), exports);

package/__inner__/cjs/components/DatePicker/utils/isValidDateString/isValidDateString.d.ts

@@ -1 +1,2 @@
-export declare const isValidDateString: (value: string | null | undefined) => boolean;
+import type { CalendarSteps } from '../../../Calendar';
+export declare const isValidDateString: (value: string | null | undefined, steps: CalendarSteps) => boolean;

package/__inner__/cjs/components/DatePicker/utils/isValidDateString/isValidDateString.js

@@ -1,15 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isValidDateString = void 0;
-var tslib_1 = require("tslib");
-var date_1 = require("../../../../utils/date");
-var isNotNil_1 = require("../../../../utils/isNotNil");
-var isValidDateString = function (value) {
-    if (!(0, isNotNil_1.isNotNil)(value)) {
+var utils_1 = require("../../../../utils");
+var parseDateString_1 = require("../parseDateString");
+var isValidDateString = function (value, steps) {
+    if (!(0, utils_1.isNotNil)(value)) {
         return false;
     }
-    var _a = tslib_1.__read(value.split('.'), 3), date = _a[0], month = _a[1], year = _a[2];
-    return (value === '' ||
-        (value.length === 10 && (0, date_1.isValidDate)("".concat(year, "-").concat(month, "-").concat(date))));
+    if (value === '') {
+        return true;
+    }
+    var parsedDate = (0, parseDateString_1.parseDateString)(value, steps);
+    return !!parsedDate;
 };
 exports.isValidDateString = isValidDateString;

package/__inner__/cjs/components/DatePicker/utils/maskPastedDate/index.d.ts

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

package/__inner__/cjs/components/DatePicker/utils/maskPastedDate/index.js

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

package/__inner__/cjs/components/DatePicker/utils/maskPastedDate/maskPastedDate.d.ts

@@ -0,0 +1,6 @@
+import type { CalendarSteps } from '../../../Calendar';
+/**
+ * Функция для обработки вставленного значения.
+ * Умеет обрабатывать форматы DD.MM.YYYY/DDMMYYYY, либо сочетания вида DDMM/DD.MM.
+ */
+export declare const maskPastedDate: (value: string, steps: CalendarSteps) => string;

package/__inner__/cjs/components/DatePicker/utils/maskPastedDate/maskPastedDate.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.maskPastedDate = void 0;
+/**
+ * Функция для обработки вставленного значения.
+ * Умеет обрабатывать форматы DD.MM.YYYY/DDMMYYYY, либо сочетания вида DDMM/DD.MM.
+ */
+var maskPastedDate = function (value, steps) {
+    var digits = value.replace(/\D/g, '').slice(0, 8); // максимум 8 цифр
+    var hasYearsStep = steps.includes('years');
+    var hasMonthsStep = steps.includes('months');
+    var hasDaysStep = steps.includes('days');
+    // DD
+    if (hasDaysStep && !hasMonthsStep && !hasYearsStep) {
+        return digits.slice(0, 2);
+    }
+    // MM
+    if (!hasDaysStep && hasMonthsStep && !hasYearsStep) {
+        return digits.slice(0, 2);
+    }
+    // YYYY
+    if (!hasDaysStep && !hasMonthsStep && hasYearsStep) {
+        return digits.slice(0, 4);
+    }
+    // DD.MM.YYYY
+    if (hasDaysStep && hasMonthsStep && hasYearsStep) {
+        return "".concat(digits.slice(0, 2), ".").concat(digits.slice(2, 4), ".").concat(digits.slice(4, 8));
+    }
+    // DD.MM
+    if (hasDaysStep && hasMonthsStep && !hasYearsStep) {
+        return "".concat(digits.slice(0, 2), ".").concat(digits.slice(2, 4));
+    }
+    // DD.YYYY
+    if (hasDaysStep && !hasMonthsStep && hasYearsStep) {
+        return "".concat(digits.slice(0, 2), ".").concat(digits.slice(2, 6));
+    }
+    // MM.YYYY
+    if (!hasDaysStep && hasMonthsStep && hasYearsStep) {
+        return "".concat(digits.slice(0, 2), ".").concat(digits.slice(2, 6));
+    }
+    throw new Error('Не удалось сделать маску для значения');
+};
+exports.maskPastedDate = maskPastedDate;

package/__inner__/cjs/components/DatePicker/utils/parseDateString/index.d.ts

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

package/__inner__/cjs/components/DatePicker/utils/parseDateString/index.js

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

package/__inner__/cjs/components/DatePicker/utils/parseDateString/parseDateString.d.ts

@@ -0,0 +1,6 @@
+import type { CalendarSteps } from '../../../Calendar';
+export declare const parseDateString: (value: string | null | undefined, steps: CalendarSteps) => {
+    year: string;
+    month: string;
+    day: string;
+} | null;

package/__inner__/cjs/components/DatePicker/utils/parseDateString/parseDateString.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseDateString = void 0;
+var utils_1 = require("../../../../utils");
+var parseDateString = function (value, steps) {
+    if (!(0, utils_1.isNotNil)(value)) {
+        return null;
+    }
+    if (value === '') {
+        return null;
+    }
+    var hasYearsSteps = steps.includes('years');
+    var hasMonthsSteps = steps.includes('months');
+    var hasDaysSteps = steps.includes('days');
+    var splitted = value.split('.');
+    var day;
+    var month;
+    var year;
+    var offset = 0;
+    if (hasDaysSteps) {
+        day = splitted[offset];
+        offset += 1;
+    }
+    if (hasMonthsSteps) {
+        month = splitted[offset];
+        offset += 1;
+    }
+    if (hasYearsSteps) {
+        year = splitted[offset];
+    }
+    var parts = [];
+    if (hasYearsSteps) {
+        parts.push(year);
+    }
+    else {
+        var now = new Date();
+        parts.push(now.getFullYear().toString());
+    }
+    if (hasMonthsSteps) {
+        parts.push(month);
+    }
+    else {
+        // 3 месяц для кейса, где пользователь вводит 31 день месяца
+        parts.push('03');
+    }
+    if (hasDaysSteps) {
+        parts.push(day);
+    }
+    else {
+        parts.push('01');
+    }
+    var filteredParts = parts.filter(function (part) { return part !== undefined; });
+    if (filteredParts.length !== 3) {
+        return null;
+    }
+    var stringDate = filteredParts.join('-');
+    if (stringDate.length !== 10 || !(0, utils_1.isValidDate)(stringDate)) {
+        return null;
+    }
+    return {
+        year: parts[0],
+        month: parts[1],
+        day: parts[2],
+    };
+};
+exports.parseDateString = parseDateString;

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

@@ -1,5 +1,5 @@
 import './Grid.css';
-import type { ReactNode, ElementType } from 'react';
+import type { ReactNode, ElementType, ComponentRef } from 'react';
 import type { ResponsiveValue } from '../../types/ResponsiveValue';
 import { type PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 export declare const gridColsVariant: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
@@ -30,4 +30,5 @@ export type GridBaseProps = {
     className?: string;
 };
 export type GridProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithRef<GridBaseProps, As>;
+export type GridRef<As extends ElementType = 'div'> = ComponentRef<As>;
 export declare const Grid: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<GridBaseProps, "div", "as">;

package/__inner__/cjs/components/Grid/GridItem.d.ts

@@ -1,5 +1,5 @@
 import './Grid.css';
-import type { ReactNode, ElementType } from 'react';
+import type { ReactNode, ElementType, ComponentRef } from 'react';
 import type { ResponsiveValue } from '../../types/ResponsiveValue';
 import { type PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 export declare const gridItemColVariant: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
@@ -22,4 +22,5 @@ export type GridItemBaseProps = {
     className?: string;
 };
 export type GridItemProps<As extends ElementType = 'div'> = PolymorphicComponentPropsWithRef<GridItemBaseProps, As>;
+export type GridItemRef<As extends ElementType = 'div'> = ComponentRef<As>;
 export declare const GridItem: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<GridItemBaseProps, "div", "as">;

package/__inner__/cjs/components/ListCardItem/hooks/useListCardItemRatio.js

@@ -1,22 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useListCardItemRatio = void 0;
-var react_1 = require("react");
 var logger_1 = require("@ozen-ui/logger");
-var environment_1 = require("../../../constants/environment");
+var useDevEffect_1 = require("../../../hooks/useDevEffect");
 var useListCardItemRatio = function (contentTrailingRatio) {
-    if (environment_1.isDev) {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        (0, react_1.useEffect)(function () {
-            if (contentTrailingRatio < 0) {
-                logger_1.logger.error('Свойство «contentTrailingRatio» у компонента ListCardItem не может быть меньше 0');
-                return;
-            }
-            if (contentTrailingRatio > 1) {
-                logger_1.logger.error('Свойство «contentTrailingRatio» у компонента ListCardItem не может быть больше 1');
-            }
-        }, [contentTrailingRatio]);
-    }
+    (0, useDevEffect_1.useDevEffect)(function () {
+        if (contentTrailingRatio < 0) {
+            logger_1.logger.error('Свойство «contentTrailingRatio» у компонента ListCardItem не может быть меньше 0');
+            return;
+        }
+        if (contentTrailingRatio > 1) {
+            logger_1.logger.error('Свойство «contentTrailingRatio» у компонента ListCardItem не может быть больше 1');
+        }
+    }, [contentTrailingRatio]);
     var contentRatio = contentTrailingRatio * 100;
     var trailingRatio = 100 - contentRatio;
     return { content: contentRatio, trailing: trailingRatio };

package/__inner__/cjs/components/SectionMessage/SectionMessage.css

@@ -42,6 +42,12 @@
       --section-message-button-color: var(--color-content-error);
       --section-message-button-color-hover: var(--color-content-error-dark);
     }
+.SectionMessage_status_action {
+      --section-message-icon-color: var(--color-content-action);
+      --section-message-background-color: var(--color-background-action-light);
+      --section-message-button-color: var(--color-content-action);
+      --section-message-button-color-hover: var(--color-content-action-dark);
+    }
 .SectionMessage_size_xs {
       --section-message-padding: 12px;
       --section-message-column-gap: var(--spacing-2xs);

package/__inner__/cjs/components/SectionMessage/SectionMessage.js

@@ -6,18 +6,21 @@ require("./modules/SectionMessageButton/SectionMessageButton.css");
 require("./SectionMessage.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var useThemeProps_1 = require("../../hooks/useThemeProps");
-var classname_1 = require("../../utils/classname");
+var utils_1 = require("../../utils");
 var config_1 = require("./config");
 var constants_1 = require("./constants");
 var SectionMessageContext_1 = require("./SectionMessageContext");
-exports.cnSectionMessage = (0, classname_1.cn)('SectionMessage');
+exports.cnSectionMessage = (0, utils_1.cn)('SectionMessage');
 exports.SectionMessage = (0, react_1.forwardRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({
         props: inProps,
         name: 'SectionMessage',
     });
-    var _a = props.status, status = _a === void 0 ? constants_1.SECTION_MESSAGE_DEFAULT_STATUS : _a, _b = props.size, size = _b === void 0 ? constants_1.SECTION_MESSAGE_DEFAULT_SIZE : _b, _c = props.showIcon, showIcon = _c === void 0 ? true : _c, children = props.children, action = props.action, title = props.title, className = props.className, otherProps = tslib_1.__rest(props, ["status", "size", "showIcon", "children", "action", "title", "className"]);
-    var iconSize = size === 'm' || size === 'l' ? 'm' : 's';
+    var _a = props.status, status = _a === void 0 ? constants_1.SECTION_MESSAGE_DEFAULT_STATUS : _a, _b = props.size, size = _b === void 0 ? constants_1.SECTION_MESSAGE_DEFAULT_SIZE : _b, _c = props.showIcon, showIcon = _c === void 0 ? true : _c, iconProp = props.icon, children = props.children, action = props.action, title = props.title, className = props.className, otherProps = tslib_1.__rest(props, ["status", "size", "showIcon", "icon", "children", "action", "title", "className"]);
+    var icon = (0, utils_1.renderContent)({
+        content: iconProp !== null && iconProp !== void 0 ? iconProp : config_1.SECTION_MESSAGE_ICON_BY_STATUS[status],
+        props: { size: constants_1.SECTION_MESSAGE_SIZE_TO_ICON_SIZE[size] },
+    });
     var resolveAction = function (action) {
         var actionProps = {
             variant: 'function',
@@ -36,7 +39,7 @@ exports.SectionMessage = (0, react_1.forwardRef)(function (inProps, ref) {
             size: size,
         } },
         react_1.default.createElement("div", tslib_1.__assign({ className: (0, exports.cnSectionMessage)({ status: status, size: size }, [className]), role: "alert" }, otherProps, { ref: ref }),
-            showIcon && (react_1.default.createElement("div", { className: (0, exports.cnSectionMessage)('Icon') }, config_1.SECTION_MESSAGE_ICON_BY_STATUS[status][iconSize])),
+            showIcon && react_1.default.createElement("div", { className: (0, exports.cnSectionMessage)('Icon') }, icon),
             react_1.default.createElement("div", { className: (0, exports.cnSectionMessage)('Content') },
                 title && react_1.default.createElement("div", { className: (0, exports.cnSectionMessage)('Title') }, title),
                 children && (react_1.default.createElement("div", { className: (0, exports.cnSectionMessage)('Body') }, children)),

package/__inner__/cjs/components/SectionMessage/config.d.ts

@@ -1,3 +1,2 @@
-import type { ReactNode } from 'react';
-import type { SectionMessageStatusVariant } from './types';
-export declare const SECTION_MESSAGE_ICON_BY_STATUS: Readonly<Record<SectionMessageStatusVariant, Record<'s' | 'm', ReactNode>>>;
+import type { SectionMessageIconType, SectionMessageStatusVariant } from './types';
+export declare const SECTION_MESSAGE_ICON_BY_STATUS: Readonly<Record<SectionMessageStatusVariant, SectionMessageIconType>>;

package/__inner__/cjs/components/SectionMessage/config.js

@@ -1,28 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SECTION_MESSAGE_ICON_BY_STATUS = void 0;
-var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importDefault(require("react"));
 var icons_1 = require("@ozen-ui/icons");
 exports.SECTION_MESSAGE_ICON_BY_STATUS = {
-    neutral: {
-        m: react_1.default.createElement(icons_1.InfoCircleOutlineIcon, { size: "m" }),
-        s: react_1.default.createElement(icons_1.InfoCircleOutlineIcon, { size: "s" }),
-    },
-    info: {
-        m: react_1.default.createElement(icons_1.InfoCircleOutlineIcon, { size: "m" }),
-        s: react_1.default.createElement(icons_1.InfoCircleOutlineIcon, { size: "s" }),
-    },
-    warning: {
-        m: react_1.default.createElement(icons_1.WarningTriangleOutlineIcon, { size: "m" }),
-        s: react_1.default.createElement(icons_1.WarningTriangleOutlineIcon, { size: "s" }),
-    },
-    success: {
-        m: react_1.default.createElement(icons_1.CheckCircleOutlineIcon, { size: "m" }),
-        s: react_1.default.createElement(icons_1.CheckCircleOutlineIcon, { size: "s" }),
-    },
-    error: {
-        m: react_1.default.createElement(icons_1.WarningCircleOutlineIcon, { size: "m" }),
-        s: react_1.default.createElement(icons_1.WarningCircleOutlineIcon, { size: "s" }),
-    },
+    neutral: icons_1.InfoCircleOutlineIcon,
+    info: icons_1.InfoCircleOutlineIcon,
+    warning: icons_1.WarningTriangleOutlineIcon,
+    success: icons_1.CheckCircleOutlineIcon,
+    error: icons_1.WarningCircleOutlineIcon,
+    action: icons_1.InfoCircleOutlineIcon,
 };

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

@@ -1,2 +1,5 @@
+import type { IconSize } from '@ozen-ui/icons';
+import type { SectionMessageSizeVariant } from './types';
 export declare const SECTION_MESSAGE_DEFAULT_STATUS = "info";
 export declare const SECTION_MESSAGE_DEFAULT_SIZE = "m";
+export declare const SECTION_MESSAGE_SIZE_TO_ICON_SIZE: Readonly<Record<SectionMessageSizeVariant, IconSize>>;

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

@@ -1,5 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SECTION_MESSAGE_DEFAULT_SIZE = exports.SECTION_MESSAGE_DEFAULT_STATUS = void 0;
+exports.SECTION_MESSAGE_SIZE_TO_ICON_SIZE = exports.SECTION_MESSAGE_DEFAULT_SIZE = exports.SECTION_MESSAGE_DEFAULT_STATUS = void 0;
 exports.SECTION_MESSAGE_DEFAULT_STATUS = 'info';
 exports.SECTION_MESSAGE_DEFAULT_SIZE = 'm';
+exports.SECTION_MESSAGE_SIZE_TO_ICON_SIZE = {
+    xs: 's',
+    s: 's',
+    m: 'm',
+    l: 'm',
+};

package/__inner__/cjs/components/SectionMessage/types.d.ts

@@ -1,10 +1,13 @@
 import type { ComponentRef, ReactElement, ReactNode } from 'react';
+import type { IconProps } from '@ozen-ui/icons';
 import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
+import type { RenderContentType } from '../../utils';
 import type { ButtonProps } from '../ButtonNext';
-export declare const sectionMessageStatusVariant: readonly ["success", "error", "warning", "info", "neutral"];
+export declare const sectionMessageStatusVariant: readonly ["success", "error", "warning", "info", "neutral", "action"];
 export type SectionMessageStatusVariant = (typeof sectionMessageStatusVariant)[number];
 export declare const sectionMessageSizeVariant: readonly ["xs", "s", "m", "l"];
 export type SectionMessageSizeVariant = (typeof sectionMessageSizeVariant)[number];
+export type SectionMessageIconType = RenderContentType<IconProps>['content'];
 export type SectionMessageRef = ComponentRef<'div'>;
 export type SectionMessageProps = ExtendableComponentPropsWithRef<{
     /**
@@ -17,6 +20,8 @@ export type SectionMessageProps = ExtendableComponentPropsWithRef<{
      * @default true
      */
     showIcon?: boolean;
+    /** Кастомная иконка */
+    icon?: SectionMessageIconType;
     /**
      * Размер
      * @default m

package/__inner__/cjs/components/SectionMessage/types.js

@@ -7,5 +7,6 @@ exports.sectionMessageStatusVariant = [
     'warning',
     'info',
     'neutral',
+    'action',
 ];
 exports.sectionMessageSizeVariant = ['xs', 's', 'm', 'l'];

package/__inner__/cjs/components/Stack/Stack.css

@@ -9,6 +9,9 @@
 .Stack-Item {
     display: inline-block;
   }
+.Stack_display_block {
+    display: flex;
+  }
 .Stack_direction_row {
     flex-direction: row;
   }

package/__inner__/cjs/components/Stack/Stack.js

@@ -16,7 +16,7 @@ exports.Stack = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(f
         props: inProps,
         name: 'Stack',
     });
-    var _a = props.as, Tag = _a === void 0 ? constants_1.STACK_DEFAULT_TAG : _a, _b = props.direction, direction = _b === void 0 ? 'row' : _b, divider = props.divider, _c = props.shouldWrapChildren, shouldWrapChildren = _c === void 0 ? false : _c, fullWidth = props.fullWidth, children = props.children, align = props.align, justify = props.justify, gap = props.gap, wrap = props.wrap, className = props.className, other = tslib_1.__rest(props, ["as", "direction", "divider", "shouldWrapChildren", "fullWidth", "children", "align", "justify", "gap", "wrap", "className"]);
+    var _a = props.as, Tag = _a === void 0 ? constants_1.STACK_DEFAULT_TAG : _a, _b = props.direction, direction = _b === void 0 ? 'row' : _b, divider = props.divider, _c = props.shouldWrapChildren, shouldWrapChildren = _c === void 0 ? false : _c, _d = props.display, display = _d === void 0 ? constants_1.STACK_DEFAULT_DISPLAY : _d, fullWidth = props.fullWidth, children = props.children, align = props.align, justify = props.justify, gap = props.gap, wrap = props.wrap, className = props.className, other = tslib_1.__rest(props, ["as", "direction", "divider", "shouldWrapChildren", "display", "fullWidth", "children", "align", "justify", "gap", "wrap", "className"]);
     var childNodes = react_1.Children.toArray(children);
     if (!childNodes.length) {
         return null;
@@ -38,6 +38,7 @@ exports.Stack = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(f
             justify: justify,
             fullWidth: fullWidth,
             wrap: wrap,
+            display: display === 'inline' ? undefined : display,
         }), (0, utils_1.generateDirectionCn)(exports.cnStack, direction), (0, utils_1.generateGapCn)(exports.cnStack, gap), className), ref: ref }), resolveChildren()));
 });
 exports.Stack.displayName = 'Stack';

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

@@ -1 +1,2 @@
 export declare const STACK_DEFAULT_TAG = "div";
+export declare const STACK_DEFAULT_DISPLAY = "inline";

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

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.STACK_DEFAULT_TAG = void 0;
+exports.STACK_DEFAULT_DISPLAY = exports.STACK_DEFAULT_TAG = void 0;
 exports.STACK_DEFAULT_TAG = 'div';
+exports.STACK_DEFAULT_DISPLAY = 'inline';

package/__inner__/cjs/components/Stack/types.d.ts

@@ -3,6 +3,7 @@ import type { ResponsiveValue } from '../../types/ResponsiveValue';
 import type { PolymorphicComponentPropsWithRef } from '../../utils/polymorphicComponentWithRef';
 import type { STACK_DEFAULT_TAG } from './constants';
 export declare const stackGapVariant: readonly ["0", "xs", "s", "m", "l", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl"];
+export declare const stackDisplayVariant: readonly ["inline", "block"];
 export declare const stackDirectionVariant: readonly ["row", "column", "rowReverse", "columnReverse"];
 export declare const stackAlignVariant: readonly ["center", "start", "end", "baseline"];
 export declare const stackJustifyVariant: readonly ["start", "center", "end", "spaceBetween", "spaceAround"];
@@ -10,9 +11,12 @@ export type StackGapVariant = (typeof stackGapVariant)[number];
 export type StackDirectionVariant = (typeof stackDirectionVariant)[number];
 export type StackAlignVariant = (typeof stackAlignVariant)[number];
 export type StackJustifyVariant = (typeof stackJustifyVariant)[number];
+export type StackDisplayVariant = (typeof stackDisplayVariant)[number];
 export type StackBaseProps = {
     /** Направление */
     direction?: ResponsiveValue<StackDirectionVariant>;
+    /** Display */
+    display?: StackDisplayVariant;
     /** Выравнивание */
     align?: StackAlignVariant;
     /** Пространство между элементами */