@astral/ui 4.74.0 → 4.76.0

package/node/components/DonutChart/useLogic/hooks/useRenderWidth/useRenderWidth.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRenderWidth = void 0;
+const react_1 = require("react");
+/**
+ * Отслеживает ширину элемента и обновляет значение при resize.
+ * @returns Объект с ref для присоединения к элементу и текущей шириной в пикселях
+ */
+const useRenderWidth = () => {
+    const rootRef = (0, react_1.useRef)(null);
+    const [renderWidth, setRenderWidth] = (0, react_1.useState)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        const node = rootRef.current;
+        if (!node) {
+            return;
+        }
+        const initialWidth = node.getBoundingClientRect().width;
+        if (initialWidth > 0) {
+            setRenderWidth(initialWidth);
+        }
+        const resizeObserver = new ResizeObserver((entries) => {
+            const width = entries[0]?.contentRect.width ?? 0;
+            if (width > 0) {
+                setRenderWidth(width);
+            }
+        });
+        resizeObserver.observe(node);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    return { rootRef, renderWidth };
+};
+exports.useRenderWidth = useRenderWidth;

package/node/components/DonutChart/useLogic/index.d.ts

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

package/node/components/DonutChart/useLogic/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useLogic"), exports);

package/node/components/DonutChart/useLogic/useLogic.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { DonutChartProps } from '../types';
+export declare const useLogic: ({ value, maxValue, color, colorIntensity, }: DonutChartProps) => {
+    rootRef: import("react").RefObject<HTMLDivElement | null>;
+    svgViewBox: "0 0 100 100";
+    arcCx: number;
+    arcCy: number;
+    donutParams: {
+        arcR: number;
+        arcPath: string;
+        progressOffset: number;
+        cssVars: import("react").CSSProperties;
+    } | null;
+    meterAriaValue: import("./utils/getMeterAriaValue").MeterAriaValue;
+};

package/node/components/DonutChart/useLogic/useLogic.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const useTheme_1 = require("../../theme/hooks/useTheme");
+const constants_1 = require("../constants");
+const hooks_1 = require("./hooks");
+const getDonutChartCssVars_1 = require("./utils/getDonutChartCssVars");
+const getGeometry_1 = require("./utils/getGeometry");
+const getMeterAriaValue_1 = require("./utils/getMeterAriaValue");
+const getProgressCirclePath_1 = require("./utils/getProgressCirclePath");
+const getProgressOffset_1 = require("./utils/getProgressOffset");
+const getProgressPercent_1 = require("./utils/getProgressPercent");
+const useLogic = ({ value, maxValue, color = 'primary', colorIntensity = '700', }) => {
+    const theme = (0, useTheme_1.useTheme)();
+    const { rootRef, renderWidth } = (0, hooks_1.useRenderWidth)();
+    const progressPercent = (0, getProgressPercent_1.getProgressPercent)(value, maxValue);
+    const meterAriaValue = (0, getMeterAriaValue_1.getMeterAriaValue)(value, maxValue);
+    const donutParams = (0, react_1.useMemo)(() => {
+        if (renderWidth === null) {
+            return null;
+        }
+        const { stroke, radius, roundCapPercent } = (0, getGeometry_1.getGeometry)(renderWidth);
+        return {
+            arcR: radius,
+            arcPath: (0, getProgressCirclePath_1.getProgressCirclePath)(constants_1.DONUT_CHART_VIEWBOX_CENTER, constants_1.DONUT_CHART_VIEWBOX_CENTER, radius),
+            progressOffset: (0, getProgressOffset_1.getProgressOffset)(progressPercent, roundCapPercent),
+            cssVars: (0, getDonutChartCssVars_1.getDonutChartCssVars)(theme, {
+                color,
+                colorIntensity,
+                strokeWidth: stroke,
+            }),
+        };
+    }, [renderWidth, progressPercent, color, colorIntensity, theme]);
+    return {
+        rootRef,
+        svgViewBox: constants_1.DONUT_CHART_SVG_VIEWBOX,
+        arcCx: constants_1.DONUT_CHART_VIEWBOX_CENTER,
+        arcCy: constants_1.DONUT_CHART_VIEWBOX_CENTER,
+        donutParams,
+        meterAriaValue,
+    };
+};
+exports.useLogic = useLogic;

package/node/components/DonutChart/useLogic/utils/getDonutChartCssVars/getDonutChartCssVars.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties } from 'react';
+import type { Theme } from '../../../../theme/types';
+import type { DonutChartColor, DonutChartColorIntensity } from '../../../types';
+type GetDonutChartCssVarsParams = {
+    color: DonutChartColor;
+    colorIntensity: DonutChartColorIntensity;
+    strokeWidth: number;
+};
+/**
+ * Генерирует CSS переменные для стилизации DonutChart по теме и цвету.
+ * @param theme - Объект темы с палитрой цветов
+ * @param params - Параметры цвета, интенсивности и ширины stroke
+ * @returns CSS свойства для диаграммы
+ */
+export declare const getDonutChartCssVars: (theme: Theme, { color, colorIntensity, strokeWidth }: GetDonutChartCssVarsParams) => CSSProperties;
+export {};

package/node/components/DonutChart/useLogic/utils/getDonutChartCssVars/getDonutChartCssVars.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDonutChartCssVars = void 0;
+/**
+ * Генерирует CSS переменные для стилизации DonutChart по теме и цвету.
+ * @param theme - Объект темы с палитрой цветов
+ * @param params - Параметры цвета, интенсивности и ширины stroke
+ * @returns CSS свойства для диаграммы
+ */
+const getDonutChartCssVars = (theme, { color, colorIntensity, strokeWidth }) => ({
+    '--donut-chart-stroke-width': String(strokeWidth),
+    '--donut-chart-progress-color': theme.palette[color][colorIntensity],
+});
+exports.getDonutChartCssVars = getDonutChartCssVars;

package/node/components/DonutChart/useLogic/utils/getDonutChartCssVars/index.d.ts

@@ -0,0 +1 @@
+export { getDonutChartCssVars } from './getDonutChartCssVars';

package/node/components/DonutChart/useLogic/utils/getDonutChartCssVars/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDonutChartCssVars = void 0;
+var getDonutChartCssVars_1 = require("./getDonutChartCssVars");
+Object.defineProperty(exports, "getDonutChartCssVars", { enumerable: true, get: function () { return getDonutChartCssVars_1.getDonutChartCssVars; } });

package/node/components/DonutChart/useLogic/utils/getGeometry/getGeometry.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Вычисляет геометрию дуги в координатах viewBox по ширине контейнера.
+ * @param renderWidth - Ширина контейнера в пикселях
+ * @returns Геометрия дуги со stroke, радиусом и процентом round cap для расчетов
+ */
+export declare const getGeometry: (renderWidth: number) => {
+    stroke: number;
+    radius: number;
+    roundCapPercent: number;
+};

package/node/components/DonutChart/useLogic/utils/getGeometry/getGeometry.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGeometry = void 0;
+const constants_1 = require("../../../constants");
+/**
+ * Вычисляет геометрию дуги в координатах viewBox по ширине контейнера.
+ * @param renderWidth - Ширина контейнера в пикселях
+ * @returns Геометрия дуги со stroke, радиусом и процентом round cap для расчетов
+ */
+const getGeometry = (renderWidth) => {
+    const stroke = (constants_1.DONUT_CHART_STROKE_WIDTH * constants_1.DONUT_CHART_VIEWBOX) / renderWidth;
+    const radius = constants_1.DONUT_CHART_VIEWBOX_CENTER - stroke / 2;
+    const circumference = 2 * Math.PI * radius;
+    const roundCapPercent = (stroke / circumference) * 100;
+    return { stroke, radius, roundCapPercent };
+};
+exports.getGeometry = getGeometry;

package/node/components/DonutChart/useLogic/utils/getGeometry/index.d.ts

@@ -0,0 +1 @@
+export { getGeometry } from './getGeometry';

package/node/components/DonutChart/useLogic/utils/getGeometry/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGeometry = void 0;
+var getGeometry_1 = require("./getGeometry");
+Object.defineProperty(exports, "getGeometry", { enumerable: true, get: function () { return getGeometry_1.getGeometry; } });

package/node/components/DonutChart/useLogic/utils/getMeterAriaValue/getMeterAriaValue.d.ts

@@ -0,0 +1,13 @@
+export type MeterAriaValue = {
+    min: number;
+    max: number;
+    now: number;
+    label: string;
+};
+/**
+ * Нормализует value/maxValue для ARIA role="meter" с проверкой границ.
+ * @param value - Текущее значение
+ * @param maxValue - Максимальное значение (должно быть положительным и конечным)
+ * @returns ARIA атрибуты с свойствами min, max, now для role="meter"
+ */
+export declare const getMeterAriaValue: (value: number, maxValue: number) => MeterAriaValue;

package/node/components/DonutChart/useLogic/utils/getMeterAriaValue/getMeterAriaValue.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMeterAriaValue = void 0;
+/**
+ * Нормализует value/maxValue для ARIA role="meter" с проверкой границ.
+ * @param value - Текущее значение
+ * @param maxValue - Максимальное значение (должно быть положительным и конечным)
+ * @returns ARIA атрибуты с свойствами min, max, now для role="meter"
+ */
+const getMeterAriaValue = (value, maxValue) => {
+    const min = 0;
+    if (!Number.isFinite(maxValue) || maxValue <= 0) {
+        return { min, max: 1, now: 0, label: '0 / 1' };
+    }
+    if (!Number.isFinite(value)) {
+        return { min, max: maxValue, now: 0, label: `0 / ${maxValue}` };
+    }
+    const now = Math.max(min, Math.min(maxValue, value));
+    return {
+        min,
+        max: maxValue,
+        now,
+        label: `${now} / ${maxValue}`,
+    };
+};
+exports.getMeterAriaValue = getMeterAriaValue;

package/node/components/DonutChart/useLogic/utils/getMeterAriaValue/index.d.ts

@@ -0,0 +1 @@
+export { getMeterAriaValue, type MeterAriaValue } from './getMeterAriaValue';

package/node/components/DonutChart/useLogic/utils/getMeterAriaValue/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMeterAriaValue = void 0;
+var getMeterAriaValue_1 = require("./getMeterAriaValue");
+Object.defineProperty(exports, "getMeterAriaValue", { enumerable: true, get: function () { return getMeterAriaValue_1.getMeterAriaValue; } });

package/node/components/DonutChart/useLogic/utils/getProgressCirclePath/getProgressCirclePath.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Строит `d` полного круга из двух полудуг.
+ * Без `Z` — открытый путь без шва, поэтому нет 1px-артефакта на стыке.
+ * @param cx - Центр по X
+ * @param cy - Центр по Y
+ * @param r - Радиус
+ * @returns Значение атрибута `d`
+ */
+export declare const getProgressCirclePath: (cx: number, cy: number, r: number) => string;

package/node/components/DonutChart/useLogic/utils/getProgressCirclePath/getProgressCirclePath.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProgressCirclePath = void 0;
+/** Точка на окружности по углу (0° — 3 часа, далее по часовой: y растёт вниз). */
+const polarToCartesian = (cx, cy, r, angleDeg) => {
+    const angleRad = (angleDeg * Math.PI) / 180;
+    return {
+        x: cx + r * Math.cos(angleRad),
+        y: cy + r * Math.sin(angleRad),
+    };
+};
+/**
+ * Строит `d` полного круга из двух полудуг.
+ * Без `Z` — открытый путь без шва, поэтому нет 1px-артефакта на стыке.
+ * @param cx - Центр по X
+ * @param cy - Центр по Y
+ * @param r - Радиус
+ * @returns Значение атрибута `d`
+ */
+const getProgressCirclePath = (cx, cy, r) => {
+    const start = polarToCartesian(cx, cy, r, 0);
+    const half = polarToCartesian(cx, cy, r, 180);
+    // Округляем координаты.
+    const f = (n) => Number(n.toFixed(3));
+    // Две полудуги (0°→180°→360°). Конец совпадает со стартом, но без `Z` —
+    // путь остаётся открытым, поэтому шва-стыка (источник 1px) не возникает.
+    return [
+        `M ${f(start.x)} ${f(start.y)}`,
+        `A ${f(r)} ${f(r)} 0 0 1 ${f(half.x)} ${f(half.y)}`,
+        `A ${f(r)} ${f(r)} 0 0 1 ${f(start.x)} ${f(start.y)}`,
+    ].join(' ');
+};
+exports.getProgressCirclePath = getProgressCirclePath;

package/node/components/DonutChart/useLogic/utils/getProgressCirclePath/index.d.ts

@@ -0,0 +1 @@
+export { getProgressCirclePath } from './getProgressCirclePath';

package/node/components/DonutChart/useLogic/utils/getProgressCirclePath/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProgressCirclePath = void 0;
+var getProgressCirclePath_1 = require("./getProgressCirclePath");
+Object.defineProperty(exports, "getProgressCirclePath", { enumerable: true, get: function () { return getProgressCirclePath_1.getProgressCirclePath; } });

package/node/components/DonutChart/useLogic/utils/getProgressOffset/getProgressOffset.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Вычисляет stroke-dashoffset для SVG дуги с компенсацией round linecap.
+ * Выше 90% слегка уменьшает дисплей-процент, чтобы кэп не переливал за 100%.
+ * @param percent - Процент прогресса (0–100)
+ * @param roundCapPercent - Визуальная ширина round cap в процентах от окружности
+ * @returns Значение offset от 0 (полностью видно) до 1 (скрыто)
+ */
+export declare const getProgressOffset: (percent: number, roundCapPercent: number) => number;

package/node/components/DonutChart/useLogic/utils/getProgressOffset/getProgressOffset.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProgressOffset = void 0;
+/** С какого процента начинаем компенсировать round linecap у конца дуги */
+const ROUND_CAP_RAMP_START = 90;
+/**
+ * Вычисляет stroke-dashoffset для SVG дуги с компенсацией round linecap.
+ * Выше 90% слегка уменьшает дисплей-процент, чтобы кэп не переливал за 100%.
+ * @param percent - Процент прогресса (0–100)
+ * @param roundCapPercent - Визуальная ширина round cap в процентах от окружности
+ * @returns Значение offset от 0 (полностью видно) до 1 (скрыто)
+ */
+const getProgressOffset = (percent, roundCapPercent) => {
+    if (percent >= 100) {
+        return 0;
+    }
+    if (percent <= 0) {
+        return 1;
+    }
+    const roundCapRampProgress = Math.max(0, (percent - ROUND_CAP_RAMP_START) / (100 - ROUND_CAP_RAMP_START));
+    const displayPercent = percent - roundCapPercent * roundCapRampProgress;
+    const offset = 1 - displayPercent / 100;
+    return Math.round(offset * 1000) / 1000;
+};
+exports.getProgressOffset = getProgressOffset;

package/node/components/DonutChart/useLogic/utils/getProgressOffset/index.d.ts

@@ -0,0 +1 @@
+export { getProgressOffset } from './getProgressOffset';

package/node/components/DonutChart/useLogic/utils/getProgressOffset/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProgressOffset = void 0;
+var getProgressOffset_1 = require("./getProgressOffset");
+Object.defineProperty(exports, "getProgressOffset", { enumerable: true, get: function () { return getProgressOffset_1.getProgressOffset; } });

package/node/components/DonutChart/useLogic/utils/getProgressPercent/getProgressPercent.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Преобразует value/maxValue в целый процент 0–100.
+ * Дробная часть отбрасывается вниз, некорректные значения дают 0.
+ * @param value - Текущее значение
+ * @param maxValue - Максимальное значение (должно быть положительным и конечным)
+ * @returns Целый процент от 0 до 100
+ */
+export declare const getProgressPercent: (value: number, maxValue: number) => number;

package/node/components/DonutChart/useLogic/utils/getProgressPercent/getProgressPercent.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProgressPercent = void 0;
+/**
+ * Преобразует value/maxValue в целый процент 0–100.
+ * Дробная часть отбрасывается вниз, некорректные значения дают 0.
+ * @param value - Текущее значение
+ * @param maxValue - Максимальное значение (должно быть положительным и конечным)
+ * @returns Целый процент от 0 до 100
+ */
+const getProgressPercent = (value, maxValue) => {
+    if (!Number.isFinite(maxValue) || maxValue <= 0) {
+        return 0;
+    }
+    if (!Number.isFinite(value)) {
+        return 0;
+    }
+    return Math.max(0, Math.min(100, Math.floor((value / maxValue) * 100)));
+};
+exports.getProgressPercent = getProgressPercent;

package/node/components/DonutChart/useLogic/utils/getProgressPercent/index.d.ts

@@ -0,0 +1 @@
+export { getProgressPercent } from './getProgressPercent';

package/node/components/DonutChart/useLogic/utils/getProgressPercent/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProgressPercent = void 0;
+var getProgressPercent_1 = require("./getProgressPercent");
+Object.defineProperty(exports, "getProgressPercent", { enumerable: true, get: function () { return getProgressPercent_1.getProgressPercent; } });

package/node/components/DonutChart/useLogic/utils/index.d.ts

@@ -0,0 +1,6 @@
+export { getMeterAriaValue } from './getMeterAriaValue';
+export { getDonutChartCssVars } from './getDonutChartCssVars';
+export { getGeometry } from './getGeometry';
+export { getProgressCirclePath } from './getProgressCirclePath';
+export { getProgressOffset } from './getProgressOffset';
+export { getProgressPercent } from './getProgressPercent';

package/node/components/DonutChart/useLogic/utils/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProgressPercent = exports.getProgressOffset = exports.getProgressCirclePath = exports.getGeometry = exports.getDonutChartCssVars = exports.getMeterAriaValue = void 0;
+var getMeterAriaValue_1 = require("./getMeterAriaValue");
+Object.defineProperty(exports, "getMeterAriaValue", { enumerable: true, get: function () { return getMeterAriaValue_1.getMeterAriaValue; } });
+var getDonutChartCssVars_1 = require("./getDonutChartCssVars");
+Object.defineProperty(exports, "getDonutChartCssVars", { enumerable: true, get: function () { return getDonutChartCssVars_1.getDonutChartCssVars; } });
+var getGeometry_1 = require("./getGeometry");
+Object.defineProperty(exports, "getGeometry", { enumerable: true, get: function () { return getGeometry_1.getGeometry; } });
+var getProgressCirclePath_1 = require("./getProgressCirclePath");
+Object.defineProperty(exports, "getProgressCirclePath", { enumerable: true, get: function () { return getProgressCirclePath_1.getProgressCirclePath; } });
+var getProgressOffset_1 = require("./getProgressOffset");
+Object.defineProperty(exports, "getProgressOffset", { enumerable: true, get: function () { return getProgressOffset_1.getProgressOffset; } });
+var getProgressPercent_1 = require("./getProgressPercent");
+Object.defineProperty(exports, "getProgressPercent", { enumerable: true, get: function () { return getProgressPercent_1.getProgressPercent; } });

package/node/components/ExpansionPanel/Summary/styles.d.ts

@@ -13,6 +13,6 @@ export declare const Title: import("@emotion/styled/dist/declarations/src/types"
 export declare const StyledChevron: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     isActive?: boolean | undefined;
     className?: string | undefined;
-} & Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").SvgIconProps>, "classes" | "children" | "ref"> & {
+} & Omit<import("../..").WithoutEmotionSpecific<import("../..").SvgIconProps>, "classes" | "children" | "ref"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/node/components/MenuOrganization/OrganizationButton/styles.d.ts

@@ -12,7 +12,7 @@ export declare const StyledButton: import("@emotion/styled/dist/declarations/src
 export declare const StyledChevron: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     isActive?: boolean | undefined;
     className?: string | undefined;
-} & Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").SvgIconProps>, "classes" | "children" | "ref"> & {
+} & Omit<import("../..").WithoutEmotionSpecific<import("../..").SvgIconProps>, "classes" | "children" | "ref"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const Container: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{

package/node/components/NewStepper/StepIcon/StepIcon.js

@@ -7,6 +7,7 @@ const StepErrorFillMd_1 = require("../../../icons/StepErrorFillMd");
 const StepSuccessFillMd_1 = require("../../../icons/StepSuccessFillMd");
 const cva_1 = require("../../utils/cva");
 const constants_1 = require("./constants");
+const useLogic_1 = require("./useLogic");
 const stepIcon = (0, cva_1.cva)(constants_1.stepIconClassnames.root, {
     variants: {
         isActive: {
@@ -24,10 +25,11 @@ const stepIcon = (0, cva_1.cva)(constants_1.stepIconClassnames.root, {
     },
 });
 const StepIcon = ({ icon: Icon, isActive, isCompleted, isError, isWarning, }) => {
+    const { isShowError } = (0, useLogic_1.useLogic)({ isError, isActive, isCompleted });
     if (Icon) {
         return ((0, jsx_runtime_1.jsx)(Icon, { isActive: isActive, isCompleted: isCompleted, isError: isError, isWarning: isWarning, className: stepIcon({ isActive, isCompleted, isError, isWarning }) }));
     }
-    if (isError && !isActive) {
+    if (isShowError) {
         return (0, jsx_runtime_1.jsx)(StepErrorFillMd_1.StepErrorFillMd, { className: stepIcon({ isError: true }) });
     }
     if (isCompleted) {

package/node/components/NewStepper/StepIcon/useLogic/index.d.ts

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

package/node/components/NewStepper/StepIcon/useLogic/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useLogic"), exports);

package/node/components/NewStepper/StepIcon/useLogic/useLogic.d.ts

@@ -0,0 +1,8 @@
+export type UseLogicParams = {
+    isActive?: boolean;
+    isCompleted?: boolean;
+    isError?: boolean;
+};
+export declare const useLogic: ({ isError, isActive, isCompleted, }: UseLogicParams) => {
+    isShowError: boolean | undefined;
+};

package/node/components/NewStepper/StepIcon/useLogic/useLogic.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const useLogic = ({ isError, isActive, isCompleted, }) => {
+    const isShowError = (isError && !isActive) || (isError && isCompleted && isActive);
+    return {
+        isShowError,
+    };
+};
+exports.useLogic = useLogic;

package/node/components/PageContent/PageContent.js

@@ -3,13 +3,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const PageContext_1 = require("../PageContext");
 const PageLayoutFooter_1 = require("../PageLayoutFooter");
 const classNames_1 = require("../utils/classNames");
+const cva_1 = require("../utils/cva");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
-const useLogic_1 = require("./useLogic");
+const contentCva = (0, cva_1.cva)(constants_1.pageContentClassnames.content, {
+    variants: {
+        isUnconstrained: {
+            true: constants_1.pageContentClassnames.isUnconstrained,
+        },
+        hasHeader: {
+            true: constants_1.pageContentClassnames.contentHasHeader,
+        },
+        hasAside: {
+            true: constants_1.pageContentClassnames.hasAside,
+        },
+    },
+});
 exports.PageContent = (0, react_1.forwardRef)((props, forwardedRef) => {
-    const { hasAside, contentClassnames } = (0, useLogic_1.useLogic)(props);
-    const { className, children, isFullHeight = true, footer, scrollRef, header, } = props;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, constants_1.pageContentClassnames.pageContent), ref: forwardedRef, "$isFullHeight": isFullHeight, "$isSeparatorShown": hasAside || Boolean(header), children: [header && header, (0, jsx_runtime_1.jsx)(styles_1.Content, { ref: scrollRef, className: contentClassnames, "$hasAside": hasAside || Boolean(header), children: children }), footer && !(0, react_1.isValidElement)(footer) && ((0, jsx_runtime_1.jsx)(PageLayoutFooter_1.PageLayoutFooter, { ...footer })), (0, react_1.isValidElement)(footer) && footer] }));
+    const { hasAside } = (0, react_1.useContext)(PageContext_1.PageContext);
+    const { className, children, isFullHeight = true, footer, scrollRef, header, isUnconstrained = false, } = props;
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, constants_1.pageContentClassnames.pageContent), ref: forwardedRef, "$isFullHeight": isFullHeight, "$isSeparatorShown": hasAside || Boolean(header), children: [header && header, (0, jsx_runtime_1.jsx)(styles_1.Content, { ref: scrollRef, className: contentCva({
+                    isUnconstrained,
+                    hasHeader: Boolean(header),
+                    hasAside,
+                }), children: children }), footer && !(0, react_1.isValidElement)(footer) && ((0, jsx_runtime_1.jsx)(PageLayoutFooter_1.PageLayoutFooter, { ...footer })), (0, react_1.isValidElement)(footer) && footer] }));
 });

package/node/components/PageContent/PageContentHeader/Description/Description.js

@@ -4,9 +4,10 @@ exports.Description = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Skeleton_1 = require("../../../Skeleton");
 const Typography_1 = require("../../../Typography");
+const styles_1 = require("./styles");
 const Description = ({ className, description, isLoading, }) => {
     if (!description && isLoading) {
-        return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { className: className, height: 20, width: 300 });
+        return ((0, jsx_runtime_1.jsx)(styles_1.SkeletonWrapper, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { className: className, height: 16, width: 300, variant: "rounded" }) }));
     }
     if (typeof description === 'string') {
         return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { className: className, variant: "body1", children: description }));

package/node/components/PageContent/PageContentHeader/Description/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const SkeletonWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/node/components/PageContent/PageContentHeader/Description/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonWrapper = void 0;
+const styled_1 = require("../../../styled");
+exports.SkeletonWrapper = styled_1.styled.div `
+  display: flex;
+
+  padding: ${({ theme }) => theme.spacing(1, 0)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;

package/node/components/PageContent/PageContentHeader/PageContentHeader.js

@@ -2,11 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageContentHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_dom_1 = require("react-dom");
 const constants_1 = require("./constants");
 const Description_1 = require("./Description");
+const PageContentHeaderContext_1 = require("./PageContentHeaderContext");
 const styles_1 = require("./styles");
 const Title_1 = require("./Title");
+const useLogic_1 = require("./useLogic");
 const PageContentHeader = ({ title, description, actions, children, isLoading, }) => {
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: constants_1.pageContentHeaderClassnames.pageContentHeader, children: [(0, jsx_runtime_1.jsxs)(styles_1.TitleBlock, { children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { title: title, isLoading: isLoading, children: children }), (0, jsx_runtime_1.jsx)(Description_1.Description, { className: constants_1.pageContentHeaderClassnames.description, description: description, isLoading: isLoading })] }), actions && actions] }));
+    const { pageHeaderContainer, isMobile } = (0, useLogic_1.useLogic)();
+    const content = ((0, jsx_runtime_1.jsx)(PageContentHeaderContext_1.PageContentHeaderProvider, { title: title, description: description, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: constants_1.pageContentHeaderClassnames.pageContentHeader, children: [(0, jsx_runtime_1.jsxs)(styles_1.TitleBlock, { children: [(0, jsx_runtime_1.jsx)(Title_1.Title, { title: title, isLoading: isLoading, children: children }), (0, jsx_runtime_1.jsx)(Description_1.Description, { className: constants_1.pageContentHeaderClassnames.description, description: description, isLoading: isLoading })] }), actions] }) }));
+    // В мобильной версии pageContentHeader отображается внутри PageHeader страницы
+    if (isMobile && pageHeaderContainer) {
+        return (0, react_dom_1.createPortal)(content, pageHeaderContainer);
+    }
+    return content;
 };
 exports.PageContentHeader = PageContentHeader;

package/node/components/PageContent/PageContentHeader/PageContentHeaderActions/MobilePageContentHeaderActions/MobilePageContentHeaderActions.d.ts

@@ -0,0 +1,3 @@
+import { type ElementType } from 'react';
+import { type PageContentHeaderActionsProps } from '../types';
+export declare const MobilePageContentHeaderActions: <TMainActionComponent extends ElementType = ElementType, TSecondaryActionComponent extends ElementType = ElementType>(props: PageContentHeaderActionsProps<TMainActionComponent, TSecondaryActionComponent>) => import("react/jsx-runtime").JSX.Element;