@alfalab/core-components-steps 3.0.4 → 3.0.5-alfasans

package/components/step/Component.js

@@ -21,6 +21,7 @@ var Step = function (_a) {
     var children = _a.children, stepNumber = _a.stepNumber, isSelected = _a.isSelected, disabled = _a.disabled, ordered = _a.ordered, isPositive = _a.isPositive, isError = _a.isError, isCriticalError = _a.isCriticalError, isWarning = _a.isWarning, isWaiting = _a.isWaiting, customStepIndicator = _a.customStepIndicator, isStepCompleted = _a.isStepCompleted, onClick = _a.onClick, interactive = _a.interactive, isVerticalAlign = _a.isVerticalAlign, isNotLastStep = _a.isNotLastStep, fullWidth = _a.fullWidth, _g = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _g === void 0 ? 24 : _g, completedDashColor = _a.completedDashColor, dataTestId = _a.dataTestId;
     var stepRef = React.useRef(null);
     var focused = hooks.useFocus(stepRef, 'keyboard')[0];
+    var isFullWidth = fullWidth && isVerticalAlign;
     var handleButtonClick = function () {
         if (!disabled && interactive && onClick) {
             onClick(stepNumber);
@@ -87,7 +88,7 @@ var Step = function (_a) {
             _b[index_module.focused] = focused,
             _b[index_module.vertical] = isVerticalAlign,
             _b[index_module.interactive] = interactive,
-            _b[index_module.fullWidth] = fullWidth && isVerticalAlign,
+            _b[index_module.fullWidth] = isFullWidth,
             _b[index_module.horizontal] = !isVerticalAlign,
             _b)), onClick: handleButtonClick, onKeyDown: handleKeyDown },
         React__default.default.createElement("div", { className: cn__default.default(index_module.indicator, (_c = {},
@@ -102,10 +103,11 @@ var Step = function (_a) {
             isNotLastStep && isVerticalAlign && renderDash()),
         React__default.default.createElement("div", { className: cn__default.default(index_module.textWrapper, index_module["gap-".concat(minSpaceBetweenSteps)], (_e = {},
                 _e[index_module.vertical] = isVerticalAlign,
+                _e[index_module.fullWidth] = isFullWidth,
                 _e)) },
             React__default.default.createElement("div", { className: cn__default.default(index_module.text, (_f = {},
                     _f[index_module.interactive] = interactive,
-                    _f[index_module.fullWidth] = fullWidth && isVerticalAlign,
+                    _f[index_module.fullWidth] = isFullWidth,
                     _f)), onClick: handleTextClick }, children)),
         isNotLastStep && !isVerticalAlign && renderDash()));
 };

package/components/step/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../src/components/step/Component.tsx"],"sourcesContent":["import React, { type FC, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { Badge } from '@alfalab/core-components-badge';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type CommonProps } from '../../types/common-props';\nimport { StepIndicator, type StepIndicatorProps } from '../step-indicator';\n\nimport styles from './index.module.css';\n\ninterface StepProps extends CommonProps {\n    /**\n     * Номер шага\n     */\n    stepNumber: number;\n\n    /**\n     * Маркер того, что текущий шаг выбран\n     */\n    isSelected: boolean;\n\n    /**\n     * Маркер того, что текущий шаг доступен для клика\n     */\n    disabled: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Positive\"\n     */\n    isPositive: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Error\"\n     */\n    isError: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"isCriticalError\"\n     */\n    isCriticalError: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Warning\"\n     */\n    isWarning: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Waiting\"\n     */\n    isWaiting: boolean;\n\n    /**\n     * Маркер того, что текущий шаг нужно пометить как завершенный\n     */\n    isStepCompleted: boolean;\n\n    /**\n     * Свойства кастомного индикатора текущего шага\n     */\n    customStepIndicator?: StepIndicatorProps | null;\n\n    /**\n     * Указывает, является ли текущий шаг последним в списке\n     */\n    isNotLastStep?: boolean;\n\n    /**\n     * Обработчик нажатия на текущей шаг\n     * @param stepNumber - номер шага\n     */\n    onClick: (stepNumber: number) => void;\n}\n\nexport const Step: FC<StepProps> = ({\n    children,\n    stepNumber,\n    isSelected,\n    disabled,\n    ordered,\n    isPositive,\n    isError,\n    isCriticalError,\n    isWarning,\n    isWaiting,\n    customStepIndicator,\n    isStepCompleted,\n    onClick,\n    interactive,\n    isVerticalAlign,\n    isNotLastStep,\n    fullWidth,\n    minSpaceBetweenSteps = 24,\n    completedDashColor,\n    dataTestId,\n}) => {\n    const stepRef = useRef<HTMLDivElement>(null);\n\n    const [focused] = useFocus(stepRef, 'keyboard');\n\n    const handleButtonClick = () => {\n        if (!disabled && interactive && onClick) {\n            onClick(stepNumber);\n        }\n    };\n\n    const handleTextClick = (e: React.MouseEvent<HTMLElement>) => {\n        if (!interactive) {\n            e.stopPropagation();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (event.key === 'Enter') {\n            handleButtonClick();\n        }\n    };\n\n    const getStepIndicator = () => {\n        if (customStepIndicator) {\n            return <Badge view='icon' size='l' {...customStepIndicator} />;\n        }\n        if (isCriticalError) {\n            return <StepIndicator view='negative-cross' />;\n        }\n        if (isError) {\n            return <StepIndicator view='negative-alert' />;\n        }\n        if (isWarning) {\n            return <StepIndicator view='attention-alert' />;\n        }\n        if (isWaiting) {\n            return <StepIndicator view='neutral-operation' />;\n        }\n        if (isPositive) {\n            return <StepIndicator view='positive-checkmark' />;\n        }\n        if (isStepCompleted) {\n            return (\n                <StepIndicator view='positive-checkmark' className={styles.completedIndicator} />\n            );\n        }\n        if (!ordered) {\n            return (\n                <div className={styles.checkbox}>\n                    <span className={styles.dot} />\n                </div>\n            );\n        }\n\n        return stepNumber;\n    };\n\n    const getCustomDashColor = () => {\n        if (isStepCompleted && completedDashColor) {\n            return {\n                borderColor: completedDashColor,\n            };\n        }\n\n        return {};\n    };\n\n    const renderDash = () => (\n        <div\n            className={cn(styles.dash, {\n                [styles.vertical]: isVerticalAlign,\n                [styles.completed]: isStepCompleted,\n            })}\n            style={{\n                ...getCustomDashColor(),\n            }}\n        />\n    );\n\n    return (\n        <div\n            data-test-id={getDataTestId(dataTestId, 'step')}\n            role='button'\n            tabIndex={0}\n            ref={stepRef}\n            className={cn(styles.step, {\n                [styles.completed]: isStepCompleted,\n                [styles.error]: isError,\n                [styles.selected]: isSelected,\n                [styles.disabled]: disabled,\n                [styles.focused]: focused,\n                [styles.vertical]: isVerticalAlign,\n                [styles.interactive]: interactive,\n                [styles.fullWidth]: fullWidth && isVerticalAlign,\n                [styles.horizontal]: !isVerticalAlign,\n            })}\n            onClick={handleButtonClick}\n            onKeyDown={handleKeyDown}\n        >\n            <div\n                className={cn(styles.indicator, {\n                    [styles.vertical]: isVerticalAlign,\n                    [styles.interactive]: interactive,\n                })}\n            >\n                <div\n                    className={cn(styles.option, {\n                        [styles.unordered]: !ordered,\n                        [styles.vertical]: isVerticalAlign,\n                        [styles.error]: isError,\n                    })}\n                >\n                    {getStepIndicator()}\n                </div>\n                {isNotLastStep && isVerticalAlign && renderDash()}\n            </div>\n            <div\n                className={cn(styles.textWrapper, styles[`gap-${minSpaceBetweenSteps}`], {\n                    [styles.vertical]: isVerticalAlign,\n                })}\n            >\n                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n                <div\n                    className={cn(styles.text, {\n                        [styles.interactive]: interactive,\n                        [styles.fullWidth]: fullWidth && isVerticalAlign,\n                    })}\n                    onClick={handleTextClick}\n                >\n                    {children}\n                </div>\n            </div>\n            {isNotLastStep && !isVerticalAlign && renderDash()}\n        </div>\n    );\n};\n"],"names":["useRef","useFocus","React","Badge","__assign","StepIndicator","styles","cn","getDataTestId"],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../../src/components/step/Component.tsx"],"sourcesContent":["import React, { type FC, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { Badge } from '@alfalab/core-components-badge';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type CommonProps } from '../../types/common-props';\nimport { StepIndicator, type StepIndicatorProps } from '../step-indicator';\n\nimport styles from './index.module.css';\n\ninterface StepProps extends CommonProps {\n    /**\n     * Номер шага\n     */\n    stepNumber: number;\n\n    /**\n     * Маркер того, что текущий шаг выбран\n     */\n    isSelected: boolean;\n\n    /**\n     * Маркер того, что текущий шаг доступен для клика\n     */\n    disabled: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Positive\"\n     */\n    isPositive: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Error\"\n     */\n    isError: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"isCriticalError\"\n     */\n    isCriticalError: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Warning\"\n     */\n    isWarning: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Waiting\"\n     */\n    isWaiting: boolean;\n\n    /**\n     * Маркер того, что текущий шаг нужно пометить как завершенный\n     */\n    isStepCompleted: boolean;\n\n    /**\n     * Свойства кастомного индикатора текущего шага\n     */\n    customStepIndicator?: StepIndicatorProps | null;\n\n    /**\n     * Указывает, является ли текущий шаг последним в списке\n     */\n    isNotLastStep?: boolean;\n\n    /**\n     * Обработчик нажатия на текущей шаг\n     * @param stepNumber - номер шага\n     */\n    onClick: (stepNumber: number) => void;\n}\n\nexport const Step: FC<StepProps> = ({\n    children,\n    stepNumber,\n    isSelected,\n    disabled,\n    ordered,\n    isPositive,\n    isError,\n    isCriticalError,\n    isWarning,\n    isWaiting,\n    customStepIndicator,\n    isStepCompleted,\n    onClick,\n    interactive,\n    isVerticalAlign,\n    isNotLastStep,\n    fullWidth,\n    minSpaceBetweenSteps = 24,\n    completedDashColor,\n    dataTestId,\n}) => {\n    const stepRef = useRef<HTMLDivElement>(null);\n\n    const [focused] = useFocus(stepRef, 'keyboard');\n\n    const isFullWidth = fullWidth && isVerticalAlign;\n\n    const handleButtonClick = () => {\n        if (!disabled && interactive && onClick) {\n            onClick(stepNumber);\n        }\n    };\n\n    const handleTextClick = (e: React.MouseEvent<HTMLElement>) => {\n        if (!interactive) {\n            e.stopPropagation();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (event.key === 'Enter') {\n            handleButtonClick();\n        }\n    };\n\n    const getStepIndicator = () => {\n        if (customStepIndicator) {\n            return <Badge view='icon' size='l' {...customStepIndicator} />;\n        }\n        if (isCriticalError) {\n            return <StepIndicator view='negative-cross' />;\n        }\n        if (isError) {\n            return <StepIndicator view='negative-alert' />;\n        }\n        if (isWarning) {\n            return <StepIndicator view='attention-alert' />;\n        }\n        if (isWaiting) {\n            return <StepIndicator view='neutral-operation' />;\n        }\n        if (isPositive) {\n            return <StepIndicator view='positive-checkmark' />;\n        }\n        if (isStepCompleted) {\n            return (\n                <StepIndicator view='positive-checkmark' className={styles.completedIndicator} />\n            );\n        }\n        if (!ordered) {\n            return (\n                <div className={styles.checkbox}>\n                    <span className={styles.dot} />\n                </div>\n            );\n        }\n\n        return stepNumber;\n    };\n\n    const getCustomDashColor = () => {\n        if (isStepCompleted && completedDashColor) {\n            return {\n                borderColor: completedDashColor,\n            };\n        }\n\n        return {};\n    };\n\n    const renderDash = () => (\n        <div\n            className={cn(styles.dash, {\n                [styles.vertical]: isVerticalAlign,\n                [styles.completed]: isStepCompleted,\n            })}\n            style={{\n                ...getCustomDashColor(),\n            }}\n        />\n    );\n\n    return (\n        <div\n            data-test-id={getDataTestId(dataTestId, 'step')}\n            role='button'\n            tabIndex={0}\n            ref={stepRef}\n            className={cn(styles.step, {\n                [styles.completed]: isStepCompleted,\n                [styles.error]: isError,\n                [styles.selected]: isSelected,\n                [styles.disabled]: disabled,\n                [styles.focused]: focused,\n                [styles.vertical]: isVerticalAlign,\n                [styles.interactive]: interactive,\n                [styles.fullWidth]: isFullWidth,\n                [styles.horizontal]: !isVerticalAlign,\n            })}\n            onClick={handleButtonClick}\n            onKeyDown={handleKeyDown}\n        >\n            <div\n                className={cn(styles.indicator, {\n                    [styles.vertical]: isVerticalAlign,\n                    [styles.interactive]: interactive,\n                })}\n            >\n                <div\n                    className={cn(styles.option, {\n                        [styles.unordered]: !ordered,\n                        [styles.vertical]: isVerticalAlign,\n                        [styles.error]: isError,\n                    })}\n                >\n                    {getStepIndicator()}\n                </div>\n                {isNotLastStep && isVerticalAlign && renderDash()}\n            </div>\n            <div\n                className={cn(styles.textWrapper, styles[`gap-${minSpaceBetweenSteps}`], {\n                    [styles.vertical]: isVerticalAlign,\n                    [styles.fullWidth]: isFullWidth,\n                })}\n            >\n                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n                <div\n                    className={cn(styles.text, {\n                        [styles.interactive]: interactive,\n                        [styles.fullWidth]: isFullWidth,\n                    })}\n                    onClick={handleTextClick}\n                >\n                    {children}\n                </div>\n            </div>\n            {isNotLastStep && !isVerticalAlign && renderDash()}\n        </div>\n    );\n};\n"],"names":["useRef","useFocus","React","Badge","__assign","StepIndicator","styles","cn","getDataTestId"],"mappings":"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"}

package/components/step/index.css

@@ -23,8 +23,9 @@
     --gap-16: var(--gap-m);
 }
 :root {
-    --font-family-system:
-        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
+    --font-family-alfasans:
+        'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Helvetica, sans-serif;
 }
 :root {
     --focus-color: var(--color-light-status-info);
@@ -33,44 +34,45 @@
     --steps-option-svg-color: var(--color-light-status-positive);
     --steps-dash-border: 2px solid var(--color-light-status-positive);
 }
-.steps__step_1fw7g {
+.steps__step_1pdbf {
     display: flex;
     outline: none;
 }
-.steps__step_1fw7g.steps__horizontal_1fw7g {
+.steps__step_1pdbf.steps__horizontal_1pdbf {
         flex-grow: 1;
     }
-.steps__step_1fw7g:not(.steps__vertical_1fw7g) {
+.steps__step_1pdbf:not(.steps__vertical_1pdbf) {
         align-items: center;
     }
-.steps__step_1fw7g:last-of-type .steps__textWrapper_1fw7g.steps__vertical_1fw7g {
+.steps__step_1pdbf:last-of-type .steps__textWrapper_1pdbf.steps__vertical_1pdbf {
         margin-bottom: var(--gap-0);
     }
-.steps__step_1fw7g.steps__interactive_1fw7g:not(.steps__disabled_1fw7g):hover {
+.steps__step_1pdbf.steps__interactive_1pdbf:not(.steps__disabled_1pdbf):hover {
     cursor: pointer;
 }
-.steps__step_1fw7g.steps__disabled_1fw7g:hover .steps__text_1fw7g {
+.steps__step_1pdbf.steps__disabled_1pdbf:hover .steps__text_1pdbf {
         background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
         background: initial;
     }
-.steps__step_1fw7g.steps__disabled_1fw7g .steps__indicator_1fw7g {
+.steps__step_1pdbf.steps__disabled_1pdbf .steps__indicator_1pdbf {
         cursor: inherit;
     }
-.steps__indicator_1fw7g {
+.steps__indicator_1pdbf {
     cursor: pointer;
     display: flex;
     align-items: center;
     margin-right: var(--gap-4);
 }
-.steps__indicator_1fw7g.steps__vertical_1fw7g {
+.steps__indicator_1pdbf.steps__vertical_1pdbf {
         flex-direction: column;
         margin-right: var(--gap-8);
     }
-.steps__option_1fw7g {
+.steps__option_1pdbf {
     font-size: 14px;
     line-height: 20px;
     font-weight: 700;
-    font-family: var(--font-family-system);
+    letter-spacing: 0.47px;
+    font-family: var(--font-family-alfasans);
 
     display: flex;
     align-items: center;
@@ -81,19 +83,19 @@
     height: 24px;
     border-radius: var(--border-radius-circle);
 }
-.steps__option_1fw7g.steps__vertical_1fw7g {
+.steps__option_1pdbf.steps__vertical_1pdbf {
         margin-top: var(--gap-8);
     }
-.steps__dash_1fw7g {
+.steps__dash_1pdbf {
     flex: 1 1 auto;
     min-width: 24px;
     border-top: 2px solid var(--color-light-neutral-translucent-300);
     margin-right: var(--gap-8);
 }
-.steps__dash_1fw7g.steps__completed_1fw7g {
+.steps__dash_1pdbf.steps__completed_1pdbf {
         border-top: var(--steps-dash-border);
     }
-.steps__dash_1fw7g.steps__vertical_1fw7g {
+.steps__dash_1pdbf.steps__vertical_1pdbf {
         min-width: 0;
         min-width: initial;
         min-height: 8px;
@@ -102,23 +104,27 @@
         border-left: 2px solid var(--color-light-neutral-translucent-300);
         border-top: none;
     }
-.steps__dash_1fw7g.steps__completed_1fw7g.steps__vertical_1fw7g {
+.steps__dash_1pdbf.steps__completed_1pdbf.steps__vertical_1pdbf {
         border-left: var(--steps-dash-border);
     }
-.steps__textWrapper_1fw7g.steps__vertical_1fw7g {
+.steps__textWrapper_1pdbf.steps__vertical_1pdbf {
         min-height: 48px;
     }
-.steps__textWrapper_1fw7g.steps__vertical_1fw7g.steps__gap-24_1fw7g {
+.steps__textWrapper_1pdbf.steps__vertical_1pdbf.steps__gap-24_1pdbf {
             margin-bottom: var(--gap-8);
         }
-.steps__textWrapper_1fw7g.steps__vertical_1fw7g.steps__gap-32_1fw7g {
+.steps__textWrapper_1pdbf.steps__vertical_1pdbf.steps__gap-32_1pdbf {
             margin-bottom: var(--gap-16);
         }
-.steps__text_1fw7g {
+.steps__textWrapper_1pdbf.steps__vertical_1pdbf.steps__fullWidth_1pdbf {
+            width: 100%;
+        }
+.steps__text_1pdbf {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
-    font-family: var(--font-family-system);
+    letter-spacing: -0.24px;
+    font-family: var(--font-family-alfasans);
 
     transition: background 0.2s;
     padding: var(--gap-8);
@@ -126,25 +132,26 @@
     border-radius: var(--gap-8);
     height: -moz-min-content;
     height: min-content;
+    box-sizing: border-box;
 }
-.steps__text_1fw7g.steps__interactive_1fw7g:not(.steps__disabled_1fw7g):hover {
+.steps__text_1pdbf.steps__interactive_1pdbf:not(.steps__disabled_1pdbf):hover {
             background: var(--color-light-transparent-default-hover);
         }
-.steps__text_1fw7g.steps__interactive_1fw7g:not(.steps__disabled_1fw7g):active {
+.steps__text_1pdbf.steps__interactive_1pdbf:not(.steps__disabled_1pdbf):active {
             background: var(--color-light-transparent-default-press);
         }
-.steps__focused_1fw7g {
+.steps__focused_1pdbf {
     outline: var(--gap-2) solid var(--focus-color);
     outline-offset: var(--gap-2);
 }
-.steps__selected_1fw7g .steps__text_1fw7g {
+.steps__selected_1pdbf .steps__text_1pdbf {
         color: var(--color-light-text-primary);
     }
-.steps__selected_1fw7g .steps__option_1fw7g {
+.steps__selected_1pdbf .steps__option_1pdbf {
         color: var(--color-light-text-primary-inverted);
         background: var(--color-light-neutral-translucent-1300);
     }
-.steps__checkbox_1fw7g {
+.steps__checkbox_1pdbf {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -153,25 +160,25 @@
     height: 20px;
     border: 2px solid var(--color-light-neutral-translucent-300);
 }
-.steps__dot_1fw7g {
+.steps__dot_1pdbf {
     width: 10px;
     height: 10px;
     border-radius: var(--border-radius-circle);
     background: var(--color-light-neutral-translucent-300);
 }
-.steps__selected_1fw7g .steps__checkbox_1fw7g {
+.steps__selected_1pdbf .steps__checkbox_1pdbf {
     border: 2px solid var(--color-light-neutral-translucent-1300);
 }
-.steps__selected_1fw7g .steps__checkbox_1fw7g .steps__dot_1fw7g {
+.steps__selected_1pdbf .steps__checkbox_1pdbf .steps__dot_1pdbf {
         background: var(--color-light-neutral-translucent-1300);
     }
-.steps__option_1fw7g:not(.steps__error_1fw7g).steps__unordered_1fw7g {
+.steps__option_1pdbf:not(.steps__error_1pdbf).steps__unordered_1pdbf {
     background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
     background: initial;
 }
-.steps__completedIndicator_1fw7g[class*='positive-checkmark'] {
+.steps__completedIndicator_1pdbf[class*='positive-checkmark'] {
     background-color: var(--steps-option-svg-color);
 }
-.steps__fullWidth_1fw7g {
+.steps__fullWidth_1pdbf {
     width: 100%;
 }

package/components/step/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"step":"steps__step_1fw7g","horizontal":"steps__horizontal_1fw7g","vertical":"steps__vertical_1fw7g","textWrapper":"steps__textWrapper_1fw7g","interactive":"steps__interactive_1fw7g","disabled":"steps__disabled_1fw7g","text":"steps__text_1fw7g","indicator":"steps__indicator_1fw7g","option":"steps__option_1fw7g","dash":"steps__dash_1fw7g","completed":"steps__completed_1fw7g","gap-24":"steps__gap-24_1fw7g","gap-32":"steps__gap-32_1fw7g","focused":"steps__focused_1fw7g","selected":"steps__selected_1fw7g","checkbox":"steps__checkbox_1fw7g","dot":"steps__dot_1fw7g","error":"steps__error_1fw7g","unordered":"steps__unordered_1fw7g","completedIndicator":"steps__completedIndicator_1fw7g","fullWidth":"steps__fullWidth_1fw7g"};
+var styles = {"step":"steps__step_1pdbf","horizontal":"steps__horizontal_1pdbf","vertical":"steps__vertical_1pdbf","textWrapper":"steps__textWrapper_1pdbf","interactive":"steps__interactive_1pdbf","disabled":"steps__disabled_1pdbf","text":"steps__text_1pdbf","indicator":"steps__indicator_1pdbf","option":"steps__option_1pdbf","dash":"steps__dash_1pdbf","completed":"steps__completed_1pdbf","gap-24":"steps__gap-24_1pdbf","gap-32":"steps__gap-32_1pdbf","fullWidth":"steps__fullWidth_1pdbf","focused":"steps__focused_1pdbf","selected":"steps__selected_1pdbf","checkbox":"steps__checkbox_1pdbf","dot":"steps__dot_1pdbf","error":"steps__error_1pdbf","unordered":"steps__unordered_1pdbf","completedIndicator":"steps__completedIndicator_1pdbf"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/step/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/step/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n:root {\n    --steps-option-svg-color: var(--color-light-status-positive);\n    --steps-dash-border: 2px solid var(--color-light-status-positive);\n}\n\n.step {\n    display: flex;\n    outline: none;\n\n    &.horizontal {\n        flex-grow: 1;\n    }\n\n    &:not(.vertical) {\n        align-items: center;\n    }\n\n    &:last-of-type .textWrapper.vertical {\n        margin-bottom: var(--gap-0);\n    }\n}\n\n.step.interactive:not(.disabled):hover {\n    cursor: pointer;\n}\n\n.step.disabled:hover {\n    & .text {\n        background: unset;\n    }\n}\n\n.step.disabled {\n    & .indicator {\n        cursor: unset;\n    }\n}\n\n.indicator {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    margin-right: var(--gap-4);\n\n    &.vertical {\n        flex-direction: column;\n        margin-right: var(--gap-8);\n    }\n}\n\n.option {\n    @mixin accent_primary_small;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-light-text-primary);\n    background: var(--color-light-neutral-translucent-300);\n    min-width: 24px;\n    height: 24px;\n    border-radius: var(--border-radius-circle);\n\n    &.vertical {\n        margin-top: var(--gap-8);\n    }\n}\n\n.dash {\n    flex: 1 1 auto;\n    min-width: 24px;\n    border-top: 2px solid var(--color-light-neutral-translucent-300);\n    margin-right: var(--gap-8);\n\n    &.completed {\n        border-top: var(--steps-dash-border);\n    }\n\n    &.vertical {\n        min-width: unset;\n        min-height: 8px;\n        margin-right: var(--gap-0);\n        margin-top: var(--gap-8);\n        border-left: 2px solid var(--color-light-neutral-translucent-300);\n        border-top: none;\n    }\n\n    &.completed.vertical {\n        border-left: var(--steps-dash-border);\n    }\n}\n\n.textWrapper {\n    &.vertical {\n        min-height: 48px;\n\n        &.gap-24 {\n            margin-bottom: var(--gap-8);\n        }\n\n        &.gap-32 {\n            margin-bottom: var(--gap-16);\n        }\n    }\n}\n\n.text {\n    @mixin paragraph_primary_medium;\n\n    transition: background 0.2s;\n    padding: var(--gap-8);\n    color: var(--color-light-text-primary);\n    border-radius: var(--gap-8);\n    height: min-content;\n\n    &.interactive:not(.disabled) {\n        &:hover {\n            background: var(--color-light-transparent-default-hover);\n        }\n\n        &:active {\n            background: var(--color-light-transparent-default-press);\n        }\n    }\n}\n\n.focused {\n    outline: var(--gap-2) solid var(--focus-color);\n    outline-offset: var(--gap-2);\n}\n\n.selected {\n    & .text {\n        color: var(--color-light-text-primary);\n    }\n\n    & .option {\n        color: var(--color-light-text-primary-inverted);\n        background: var(--color-light-neutral-translucent-1300);\n    }\n}\n\n.checkbox {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: var(--border-radius-circle);\n    width: 20px;\n    height: 20px;\n    border: 2px solid var(--color-light-neutral-translucent-300);\n}\n\n.dot {\n    width: 10px;\n    height: 10px;\n    border-radius: var(--border-radius-circle);\n    background: var(--color-light-neutral-translucent-300);\n}\n\n.selected .checkbox {\n    border: 2px solid var(--color-light-neutral-translucent-1300);\n\n    & .dot {\n        background: var(--color-light-neutral-translucent-1300);\n    }\n}\n\n.option:not(.error).unordered {\n    background: unset;\n}\n\n.completedIndicator[class*='positive-checkmark'] {\n    background-color: var(--steps-option-svg-color);\n}\n\n.fullWidth {\n    width: 100%;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,MAAM,CAAC,mBAAmB,CAAC,YAAY,CAAC,yBAAyB,CAAC,UAAU,CAAC,uBAAuB,CAAC,aAAa,CAAC,0BAA0B,CAAC,aAAa,CAAC,0BAA0B,CAAC,UAAU,CAAC,uBAAuB,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,CAAC,wBAAwB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,CAAC,wBAAwB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,SAAS,CAAC,sBAAsB,CAAC,UAAU,CAAC,uBAAuB,CAAC,UAAU,CAAC,uBAAuB,CAAC,KAAK,CAAC,kBAAkB,CAAC,OAAO,CAAC,oBAAoB,CAAC,WAAW,CAAC,wBAAwB,CAAC,oBAAoB,CAAC,iCAAiC,CAAC,WAAW,CAAC,wBAAwB,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/step/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n:root {\n    --steps-option-svg-color: var(--color-light-status-positive);\n    --steps-dash-border: 2px solid var(--color-light-status-positive);\n}\n\n.step {\n    display: flex;\n    outline: none;\n\n    &.horizontal {\n        flex-grow: 1;\n    }\n\n    &:not(.vertical) {\n        align-items: center;\n    }\n\n    &:last-of-type .textWrapper.vertical {\n        margin-bottom: var(--gap-0);\n    }\n}\n\n.step.interactive:not(.disabled):hover {\n    cursor: pointer;\n}\n\n.step.disabled:hover {\n    & .text {\n        background: unset;\n    }\n}\n\n.step.disabled {\n    & .indicator {\n        cursor: unset;\n    }\n}\n\n.indicator {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    margin-right: var(--gap-4);\n\n    &.vertical {\n        flex-direction: column;\n        margin-right: var(--gap-8);\n    }\n}\n\n.option {\n    @mixin accent_primary_small;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-light-text-primary);\n    background: var(--color-light-neutral-translucent-300);\n    min-width: 24px;\n    height: 24px;\n    border-radius: var(--border-radius-circle);\n\n    &.vertical {\n        margin-top: var(--gap-8);\n    }\n}\n\n.dash {\n    flex: 1 1 auto;\n    min-width: 24px;\n    border-top: 2px solid var(--color-light-neutral-translucent-300);\n    margin-right: var(--gap-8);\n\n    &.completed {\n        border-top: var(--steps-dash-border);\n    }\n\n    &.vertical {\n        min-width: unset;\n        min-height: 8px;\n        margin-right: var(--gap-0);\n        margin-top: var(--gap-8);\n        border-left: 2px solid var(--color-light-neutral-translucent-300);\n        border-top: none;\n    }\n\n    &.completed.vertical {\n        border-left: var(--steps-dash-border);\n    }\n}\n\n.textWrapper {\n    &.vertical {\n        min-height: 48px;\n\n        &.gap-24 {\n            margin-bottom: var(--gap-8);\n        }\n\n        &.gap-32 {\n            margin-bottom: var(--gap-16);\n        }\n\n        &.fullWidth {\n            width: 100%;\n        }\n    }\n}\n\n.text {\n    @mixin paragraph_primary_medium;\n\n    transition: background 0.2s;\n    padding: var(--gap-8);\n    color: var(--color-light-text-primary);\n    border-radius: var(--gap-8);\n    height: min-content;\n    box-sizing: border-box;\n\n    &.interactive:not(.disabled) {\n        &:hover {\n            background: var(--color-light-transparent-default-hover);\n        }\n\n        &:active {\n            background: var(--color-light-transparent-default-press);\n        }\n    }\n}\n\n.focused {\n    outline: var(--gap-2) solid var(--focus-color);\n    outline-offset: var(--gap-2);\n}\n\n.selected {\n    & .text {\n        color: var(--color-light-text-primary);\n    }\n\n    & .option {\n        color: var(--color-light-text-primary-inverted);\n        background: var(--color-light-neutral-translucent-1300);\n    }\n}\n\n.checkbox {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: var(--border-radius-circle);\n    width: 20px;\n    height: 20px;\n    border: 2px solid var(--color-light-neutral-translucent-300);\n}\n\n.dot {\n    width: 10px;\n    height: 10px;\n    border-radius: var(--border-radius-circle);\n    background: var(--color-light-neutral-translucent-300);\n}\n\n.selected .checkbox {\n    border: 2px solid var(--color-light-neutral-translucent-1300);\n\n    & .dot {\n        background: var(--color-light-neutral-translucent-1300);\n    }\n}\n\n.option:not(.error).unordered {\n    background: unset;\n}\n\n.completedIndicator[class*='positive-checkmark'] {\n    background-color: var(--steps-option-svg-color);\n}\n\n.fullWidth {\n    width: 100%;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,MAAM,CAAC,mBAAmB,CAAC,YAAY,CAAC,yBAAyB,CAAC,UAAU,CAAC,uBAAuB,CAAC,aAAa,CAAC,0BAA0B,CAAC,aAAa,CAAC,0BAA0B,CAAC,UAAU,CAAC,uBAAuB,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,CAAC,wBAAwB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,mBAAmB,CAAC,WAAW,CAAC,wBAAwB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,QAAQ,CAAC,qBAAqB,CAAC,WAAW,CAAC,wBAAwB,CAAC,SAAS,CAAC,sBAAsB,CAAC,UAAU,CAAC,uBAAuB,CAAC,UAAU,CAAC,uBAAuB,CAAC,KAAK,CAAC,kBAAkB,CAAC,OAAO,CAAC,oBAAoB,CAAC,WAAW,CAAC,wBAAwB,CAAC,oBAAoB,CAAC,iCAAiC,CAAC;;;;"}

package/components/step-indicator/index.css

@@ -1,6 +1,6 @@
 :root {
     --gap-0: 0px;
 }
-.steps__component_1s7m6.steps__component_1s7m6 {
+.steps__component_111zn.steps__component_111zn {
     padding: var(--gap-0);
 }

package/components/step-indicator/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"steps__component_1s7m6"};
+var styles = {"component":"steps__component_111zn"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/cssm/components/step/Component.js

@@ -22,6 +22,7 @@ var Step = function (_a) {
     var children = _a.children, stepNumber = _a.stepNumber, isSelected = _a.isSelected, disabled = _a.disabled, ordered = _a.ordered, isPositive = _a.isPositive, isError = _a.isError, isCriticalError = _a.isCriticalError, isWarning = _a.isWarning, isWaiting = _a.isWaiting, customStepIndicator = _a.customStepIndicator, isStepCompleted = _a.isStepCompleted, onClick = _a.onClick, interactive = _a.interactive, isVerticalAlign = _a.isVerticalAlign, isNotLastStep = _a.isNotLastStep, fullWidth = _a.fullWidth, _g = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _g === void 0 ? 24 : _g, completedDashColor = _a.completedDashColor, dataTestId = _a.dataTestId;
     var stepRef = React.useRef(null);
     var focused = hooks.useFocus(stepRef, 'keyboard')[0];
+    var isFullWidth = fullWidth && isVerticalAlign;
     var handleButtonClick = function () {
         if (!disabled && interactive && onClick) {
             onClick(stepNumber);
@@ -88,7 +89,7 @@ var Step = function (_a) {
             _b[styles__default.default.focused] = focused,
             _b[styles__default.default.vertical] = isVerticalAlign,
             _b[styles__default.default.interactive] = interactive,
-            _b[styles__default.default.fullWidth] = fullWidth && isVerticalAlign,
+            _b[styles__default.default.fullWidth] = isFullWidth,
             _b[styles__default.default.horizontal] = !isVerticalAlign,
             _b)), onClick: handleButtonClick, onKeyDown: handleKeyDown },
         React__default.default.createElement("div", { className: cn__default.default(styles__default.default.indicator, (_c = {},
@@ -103,10 +104,11 @@ var Step = function (_a) {
             isNotLastStep && isVerticalAlign && renderDash()),
         React__default.default.createElement("div", { className: cn__default.default(styles__default.default.textWrapper, styles__default.default["gap-".concat(minSpaceBetweenSteps)], (_e = {},
                 _e[styles__default.default.vertical] = isVerticalAlign,
+                _e[styles__default.default.fullWidth] = isFullWidth,
                 _e)) },
             React__default.default.createElement("div", { className: cn__default.default(styles__default.default.text, (_f = {},
                     _f[styles__default.default.interactive] = interactive,
-                    _f[styles__default.default.fullWidth] = fullWidth && isVerticalAlign,
+                    _f[styles__default.default.fullWidth] = isFullWidth,
                     _f)), onClick: handleTextClick }, children)),
         isNotLastStep && !isVerticalAlign && renderDash()));
 };

package/cssm/components/step/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/step/Component.tsx"],"sourcesContent":["import React, { type FC, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { Badge } from '@alfalab/core-components-badge';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type CommonProps } from '../../types/common-props';\nimport { StepIndicator, type StepIndicatorProps } from '../step-indicator';\n\nimport styles from './index.module.css';\n\ninterface StepProps extends CommonProps {\n    /**\n     * Номер шага\n     */\n    stepNumber: number;\n\n    /**\n     * Маркер того, что текущий шаг выбран\n     */\n    isSelected: boolean;\n\n    /**\n     * Маркер того, что текущий шаг доступен для клика\n     */\n    disabled: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Positive\"\n     */\n    isPositive: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Error\"\n     */\n    isError: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"isCriticalError\"\n     */\n    isCriticalError: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Warning\"\n     */\n    isWarning: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Waiting\"\n     */\n    isWaiting: boolean;\n\n    /**\n     * Маркер того, что текущий шаг нужно пометить как завершенный\n     */\n    isStepCompleted: boolean;\n\n    /**\n     * Свойства кастомного индикатора текущего шага\n     */\n    customStepIndicator?: StepIndicatorProps | null;\n\n    /**\n     * Указывает, является ли текущий шаг последним в списке\n     */\n    isNotLastStep?: boolean;\n\n    /**\n     * Обработчик нажатия на текущей шаг\n     * @param stepNumber - номер шага\n     */\n    onClick: (stepNumber: number) => void;\n}\n\nexport const Step: FC<StepProps> = ({\n    children,\n    stepNumber,\n    isSelected,\n    disabled,\n    ordered,\n    isPositive,\n    isError,\n    isCriticalError,\n    isWarning,\n    isWaiting,\n    customStepIndicator,\n    isStepCompleted,\n    onClick,\n    interactive,\n    isVerticalAlign,\n    isNotLastStep,\n    fullWidth,\n    minSpaceBetweenSteps = 24,\n    completedDashColor,\n    dataTestId,\n}) => {\n    const stepRef = useRef<HTMLDivElement>(null);\n\n    const [focused] = useFocus(stepRef, 'keyboard');\n\n    const handleButtonClick = () => {\n        if (!disabled && interactive && onClick) {\n            onClick(stepNumber);\n        }\n    };\n\n    const handleTextClick = (e: React.MouseEvent<HTMLElement>) => {\n        if (!interactive) {\n            e.stopPropagation();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (event.key === 'Enter') {\n            handleButtonClick();\n        }\n    };\n\n    const getStepIndicator = () => {\n        if (customStepIndicator) {\n            return <Badge view='icon' size='l' {...customStepIndicator} />;\n        }\n        if (isCriticalError) {\n            return <StepIndicator view='negative-cross' />;\n        }\n        if (isError) {\n            return <StepIndicator view='negative-alert' />;\n        }\n        if (isWarning) {\n            return <StepIndicator view='attention-alert' />;\n        }\n        if (isWaiting) {\n            return <StepIndicator view='neutral-operation' />;\n        }\n        if (isPositive) {\n            return <StepIndicator view='positive-checkmark' />;\n        }\n        if (isStepCompleted) {\n            return (\n                <StepIndicator view='positive-checkmark' className={styles.completedIndicator} />\n            );\n        }\n        if (!ordered) {\n            return (\n                <div className={styles.checkbox}>\n                    <span className={styles.dot} />\n                </div>\n            );\n        }\n\n        return stepNumber;\n    };\n\n    const getCustomDashColor = () => {\n        if (isStepCompleted && completedDashColor) {\n            return {\n                borderColor: completedDashColor,\n            };\n        }\n\n        return {};\n    };\n\n    const renderDash = () => (\n        <div\n            className={cn(styles.dash, {\n                [styles.vertical]: isVerticalAlign,\n                [styles.completed]: isStepCompleted,\n            })}\n            style={{\n                ...getCustomDashColor(),\n            }}\n        />\n    );\n\n    return (\n        <div\n            data-test-id={getDataTestId(dataTestId, 'step')}\n            role='button'\n            tabIndex={0}\n            ref={stepRef}\n            className={cn(styles.step, {\n                [styles.completed]: isStepCompleted,\n                [styles.error]: isError,\n                [styles.selected]: isSelected,\n                [styles.disabled]: disabled,\n                [styles.focused]: focused,\n                [styles.vertical]: isVerticalAlign,\n                [styles.interactive]: interactive,\n                [styles.fullWidth]: fullWidth && isVerticalAlign,\n                [styles.horizontal]: !isVerticalAlign,\n            })}\n            onClick={handleButtonClick}\n            onKeyDown={handleKeyDown}\n        >\n            <div\n                className={cn(styles.indicator, {\n                    [styles.vertical]: isVerticalAlign,\n                    [styles.interactive]: interactive,\n                })}\n            >\n                <div\n                    className={cn(styles.option, {\n                        [styles.unordered]: !ordered,\n                        [styles.vertical]: isVerticalAlign,\n                        [styles.error]: isError,\n                    })}\n                >\n                    {getStepIndicator()}\n                </div>\n                {isNotLastStep && isVerticalAlign && renderDash()}\n            </div>\n            <div\n                className={cn(styles.textWrapper, styles[`gap-${minSpaceBetweenSteps}`], {\n                    [styles.vertical]: isVerticalAlign,\n                })}\n            >\n                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n                <div\n                    className={cn(styles.text, {\n                        [styles.interactive]: interactive,\n                        [styles.fullWidth]: fullWidth && isVerticalAlign,\n                    })}\n                    onClick={handleTextClick}\n                >\n                    {children}\n                </div>\n            </div>\n            {isNotLastStep && !isVerticalAlign && renderDash()}\n        </div>\n    );\n};\n"],"names":["useRef","useFocus","React","Badge","__assign","StepIndicator","styles","cn","getDataTestId"],"mappings":"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"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/step/Component.tsx"],"sourcesContent":["import React, { type FC, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { Badge } from '@alfalab/core-components-badge';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type CommonProps } from '../../types/common-props';\nimport { StepIndicator, type StepIndicatorProps } from '../step-indicator';\n\nimport styles from './index.module.css';\n\ninterface StepProps extends CommonProps {\n    /**\n     * Номер шага\n     */\n    stepNumber: number;\n\n    /**\n     * Маркер того, что текущий шаг выбран\n     */\n    isSelected: boolean;\n\n    /**\n     * Маркер того, что текущий шаг доступен для клика\n     */\n    disabled: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Positive\"\n     */\n    isPositive: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Error\"\n     */\n    isError: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"isCriticalError\"\n     */\n    isCriticalError: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Warning\"\n     */\n    isWarning: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Waiting\"\n     */\n    isWaiting: boolean;\n\n    /**\n     * Маркер того, что текущий шаг нужно пометить как завершенный\n     */\n    isStepCompleted: boolean;\n\n    /**\n     * Свойства кастомного индикатора текущего шага\n     */\n    customStepIndicator?: StepIndicatorProps | null;\n\n    /**\n     * Указывает, является ли текущий шаг последним в списке\n     */\n    isNotLastStep?: boolean;\n\n    /**\n     * Обработчик нажатия на текущей шаг\n     * @param stepNumber - номер шага\n     */\n    onClick: (stepNumber: number) => void;\n}\n\nexport const Step: FC<StepProps> = ({\n    children,\n    stepNumber,\n    isSelected,\n    disabled,\n    ordered,\n    isPositive,\n    isError,\n    isCriticalError,\n    isWarning,\n    isWaiting,\n    customStepIndicator,\n    isStepCompleted,\n    onClick,\n    interactive,\n    isVerticalAlign,\n    isNotLastStep,\n    fullWidth,\n    minSpaceBetweenSteps = 24,\n    completedDashColor,\n    dataTestId,\n}) => {\n    const stepRef = useRef<HTMLDivElement>(null);\n\n    const [focused] = useFocus(stepRef, 'keyboard');\n\n    const isFullWidth = fullWidth && isVerticalAlign;\n\n    const handleButtonClick = () => {\n        if (!disabled && interactive && onClick) {\n            onClick(stepNumber);\n        }\n    };\n\n    const handleTextClick = (e: React.MouseEvent<HTMLElement>) => {\n        if (!interactive) {\n            e.stopPropagation();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (event.key === 'Enter') {\n            handleButtonClick();\n        }\n    };\n\n    const getStepIndicator = () => {\n        if (customStepIndicator) {\n            return <Badge view='icon' size='l' {...customStepIndicator} />;\n        }\n        if (isCriticalError) {\n            return <StepIndicator view='negative-cross' />;\n        }\n        if (isError) {\n            return <StepIndicator view='negative-alert' />;\n        }\n        if (isWarning) {\n            return <StepIndicator view='attention-alert' />;\n        }\n        if (isWaiting) {\n            return <StepIndicator view='neutral-operation' />;\n        }\n        if (isPositive) {\n            return <StepIndicator view='positive-checkmark' />;\n        }\n        if (isStepCompleted) {\n            return (\n                <StepIndicator view='positive-checkmark' className={styles.completedIndicator} />\n            );\n        }\n        if (!ordered) {\n            return (\n                <div className={styles.checkbox}>\n                    <span className={styles.dot} />\n                </div>\n            );\n        }\n\n        return stepNumber;\n    };\n\n    const getCustomDashColor = () => {\n        if (isStepCompleted && completedDashColor) {\n            return {\n                borderColor: completedDashColor,\n            };\n        }\n\n        return {};\n    };\n\n    const renderDash = () => (\n        <div\n            className={cn(styles.dash, {\n                [styles.vertical]: isVerticalAlign,\n                [styles.completed]: isStepCompleted,\n            })}\n            style={{\n                ...getCustomDashColor(),\n            }}\n        />\n    );\n\n    return (\n        <div\n            data-test-id={getDataTestId(dataTestId, 'step')}\n            role='button'\n            tabIndex={0}\n            ref={stepRef}\n            className={cn(styles.step, {\n                [styles.completed]: isStepCompleted,\n                [styles.error]: isError,\n                [styles.selected]: isSelected,\n                [styles.disabled]: disabled,\n                [styles.focused]: focused,\n                [styles.vertical]: isVerticalAlign,\n                [styles.interactive]: interactive,\n                [styles.fullWidth]: isFullWidth,\n                [styles.horizontal]: !isVerticalAlign,\n            })}\n            onClick={handleButtonClick}\n            onKeyDown={handleKeyDown}\n        >\n            <div\n                className={cn(styles.indicator, {\n                    [styles.vertical]: isVerticalAlign,\n                    [styles.interactive]: interactive,\n                })}\n            >\n                <div\n                    className={cn(styles.option, {\n                        [styles.unordered]: !ordered,\n                        [styles.vertical]: isVerticalAlign,\n                        [styles.error]: isError,\n                    })}\n                >\n                    {getStepIndicator()}\n                </div>\n                {isNotLastStep && isVerticalAlign && renderDash()}\n            </div>\n            <div\n                className={cn(styles.textWrapper, styles[`gap-${minSpaceBetweenSteps}`], {\n                    [styles.vertical]: isVerticalAlign,\n                    [styles.fullWidth]: isFullWidth,\n                })}\n            >\n                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n                <div\n                    className={cn(styles.text, {\n                        [styles.interactive]: interactive,\n                        [styles.fullWidth]: isFullWidth,\n                    })}\n                    onClick={handleTextClick}\n                >\n                    {children}\n                </div>\n            </div>\n            {isNotLastStep && !isVerticalAlign && renderDash()}\n        </div>\n    );\n};\n"],"names":["useRef","useFocus","React","Badge","__assign","StepIndicator","styles","cn","getDataTestId"],"mappings":";;;;;;;;;;;;;;;;;;;AA2EO,IAAM,IAAI,GAAkB,UAAC,EAqBnC,EAAA;;AApBG,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,mBAAmB,GAAA,EAAA,CAAA,mBAAA,EACnB,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,EAAyB,GAAA,EAAA,CAAA,oBAAA,EAAzB,oBAAoB,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACzB,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAClB,UAAU,GAAA,EAAA,CAAA,UAAA;AAEV,IAAA,IAAM,OAAO,GAAGA,YAAM,CAAiB,IAAI,CAAC;IAErC,IAAA,OAAO,GAAIC,cAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,CAAA,CAAA,CAAjC;AAEd,IAAA,IAAM,WAAW,GAAG,SAAS,IAAI,eAAe;AAEhD,IAAA,IAAM,iBAAiB,GAAG,YAAA;AACtB,QAAA,IAAI,CAAC,QAAQ,IAAI,WAAW,IAAI,OAAO,EAAE;YACrC,OAAO,CAAC,UAAU,CAAC;;AAE3B,KAAC;IAED,IAAM,eAAe,GAAG,UAAC,CAAgC,EAAA;QACrD,IAAI,CAAC,WAAW,EAAE;YACd,CAAC,CAAC,eAAe,EAAE;;AAE3B,KAAC;IAED,IAAM,aAAa,GAAG,UAAC,KAA0B,EAAA;AAC7C,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;AACvB,YAAA,iBAAiB,EAAE;;AAE3B,KAAC;AAED,IAAA,IAAM,gBAAgB,GAAG,YAAA;QACrB,IAAI,mBAAmB,EAAE;AACrB,YAAA,OAAOC,sBAAC,CAAA,aAAA,CAAAC,YAAK,EAACC,cAAA,CAAA,EAAA,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,GAAG,EAAK,EAAA,mBAAmB,EAAI;;QAElE,IAAI,eAAe,EAAE;AACjB,YAAA,OAAOF,qCAACG,uBAAa,EAAA,EAAC,IAAI,EAAC,gBAAgB,GAAG;;QAElD,IAAI,OAAO,EAAE;AACT,YAAA,OAAOH,qCAACG,uBAAa,EAAA,EAAC,IAAI,EAAC,gBAAgB,GAAG;;QAElD,IAAI,SAAS,EAAE;AACX,YAAA,OAAOH,qCAACG,uBAAa,EAAA,EAAC,IAAI,EAAC,iBAAiB,GAAG;;QAEnD,IAAI,SAAS,EAAE;AACX,YAAA,OAAOH,qCAACG,uBAAa,EAAA,EAAC,IAAI,EAAC,mBAAmB,GAAG;;QAErD,IAAI,UAAU,EAAE;AACZ,YAAA,OAAOH,qCAACG,uBAAa,EAAA,EAAC,IAAI,EAAC,oBAAoB,GAAG;;QAEtD,IAAI,eAAe,EAAE;AACjB,YAAA,QACIH,sBAAA,CAAA,aAAA,CAACG,uBAAa,EAAA,EAAC,IAAI,EAAC,oBAAoB,EAAC,SAAS,EAAEC,uBAAM,CAAC,kBAAkB,EAAA,CAAI;;QAGzF,IAAI,CAAC,OAAO,EAAE;AACV,YAAA,QACIJ,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEI,uBAAM,CAAC,QAAQ,EAAA;gBAC3BJ,sBAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAEI,uBAAM,CAAC,GAAG,EAAI,CAAA,CAC7B;;AAId,QAAA,OAAO,UAAU;AACrB,KAAC;AAED,IAAA,IAAM,kBAAkB,GAAG,YAAA;AACvB,QAAA,IAAI,eAAe,IAAI,kBAAkB,EAAE;YACvC,OAAO;AACH,gBAAA,WAAW,EAAE,kBAAkB;aAClC;;AAGL,QAAA,OAAO,EAAE;AACb,KAAC;AAED,IAAA,IAAM,UAAU,GAAG,YAAA;;QAAM,QACrBJ,8CACI,SAAS,EAAEK,mBAAE,CAACD,uBAAM,CAAC,IAAI,GAAA,EAAA,GAAA,EAAA;AACrB,gBAAA,EAAA,CAACA,uBAAM,CAAC,QAAQ,CAAA,GAAG,eAAe;AAClC,gBAAA,EAAA,CAACA,uBAAM,CAAC,SAAS,CAAA,GAAG,eAAe;AACrC,gBAAA,EAAA,EAAA,EACF,KAAK,EAAAF,cAAA,CAAA,EAAA,EACE,kBAAkB,EAAE,IAE7B;AATmB,KAUxB;IAED,QACIF,sBACkB,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,cAAA,EAAAM,kBAAa,CAAC,UAAU,EAAE,MAAM,CAAC,EAC/C,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,OAAO,EACZ,SAAS,EAAED,mBAAE,CAACD,uBAAM,CAAC,IAAI,GAAA,EAAA,GAAA,EAAA;AACrB,YAAA,EAAA,CAACA,uBAAM,CAAC,SAAS,CAAA,GAAG,eAAe;AACnC,YAAA,EAAA,CAACA,uBAAM,CAAC,KAAK,CAAA,GAAG,OAAO;AACvB,YAAA,EAAA,CAACA,uBAAM,CAAC,QAAQ,CAAA,GAAG,UAAU;AAC7B,YAAA,EAAA,CAACA,uBAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC3B,YAAA,EAAA,CAACA,uBAAM,CAAC,OAAO,CAAA,GAAG,OAAO;AACzB,YAAA,EAAA,CAACA,uBAAM,CAAC,QAAQ,CAAA,GAAG,eAAe;AAClC,YAAA,EAAA,CAACA,uBAAM,CAAC,WAAW,CAAA,GAAG,WAAW;AACjC,YAAA,EAAA,CAACA,uBAAM,CAAC,SAAS,CAAA,GAAG,WAAW;AAC/B,YAAA,EAAA,CAACA,uBAAM,CAAC,UAAU,CAAA,GAAG,CAAC,eAAe;AACvC,YAAA,EAAA,EAAA,EACF,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EAAE,aAAa,EAAA;AAExB,QAAAJ,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEK,mBAAE,CAACD,uBAAM,CAAC,SAAS,GAAA,EAAA,GAAA,EAAA;AAC1B,gBAAA,EAAA,CAACA,uBAAM,CAAC,QAAQ,CAAA,GAAG,eAAe;AAClC,gBAAA,EAAA,CAACA,uBAAM,CAAC,WAAW,CAAA,GAAG,WAAW;AACnC,gBAAA,EAAA,EAAA,EAAA;AAEF,YAAAJ,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEK,mBAAE,CAACD,uBAAM,CAAC,MAAM,GAAA,EAAA,GAAA,EAAA;AACvB,oBAAA,EAAA,CAACA,uBAAM,CAAC,SAAS,CAAA,GAAG,CAAC,OAAO;AAC5B,oBAAA,EAAA,CAACA,uBAAM,CAAC,QAAQ,CAAA,GAAG,eAAe;AAClC,oBAAA,EAAA,CAACA,uBAAM,CAAC,KAAK,CAAA,GAAG,OAAO;wBACzB,EAED,EAAA,gBAAgB,EAAE,CACjB;AACL,YAAA,aAAa,IAAI,eAAe,IAAI,UAAU,EAAE,CAC/C;AACN,QAAAJ,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEK,mBAAE,CAACD,uBAAM,CAAC,WAAW,EAAEA,uBAAM,CAAC,MAAO,CAAA,MAAA,CAAA,oBAAoB,CAAE,CAAC,GAAA,EAAA,GAAA,EAAA;AACnE,gBAAA,EAAA,CAACA,uBAAM,CAAC,QAAQ,CAAA,GAAG,eAAe;AAClC,gBAAA,EAAA,CAACA,uBAAM,CAAC,SAAS,CAAA,GAAG,WAAW;AACjC,gBAAA,EAAA,EAAA,EAAA;AAGF,YAAAJ,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAEK,mBAAE,CAACD,uBAAM,CAAC,IAAI,GAAA,EAAA,GAAA,EAAA;AACrB,oBAAA,EAAA,CAACA,uBAAM,CAAC,WAAW,CAAA,GAAG,WAAW;AACjC,oBAAA,EAAA,CAACA,uBAAM,CAAC,SAAS,CAAA,GAAG,WAAW;AACjC,oBAAA,EAAA,EAAA,EACF,OAAO,EAAE,eAAe,EAEvB,EAAA,QAAQ,CACP,CACJ;QACL,aAAa,IAAI,CAAC,eAAe,IAAI,UAAU,EAAE,CAChD;AAEd;;;;"}

package/cssm/components/step/index.module.css

@@ -23,8 +23,9 @@
     --gap-16: var(--gap-m);
 }
 :root {
-    --font-family-system:
-        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
+    --font-family-alfasans:
+        'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Helvetica, sans-serif;
 }
 :root {
     --focus-color: var(--color-light-status-info);
@@ -70,7 +71,8 @@
     font-size: 14px;
     line-height: 20px;
     font-weight: 700;
-    font-family: var(--font-family-system);
+    letter-spacing: 0.47px;
+    font-family: var(--font-family-alfasans);
 
     display: flex;
     align-items: center;
@@ -114,11 +116,15 @@
 .textWrapper.vertical.gap-32 {
             margin-bottom: var(--gap-16);
         }
+.textWrapper.vertical.fullWidth {
+            width: 100%;
+        }
 .text {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
-    font-family: var(--font-family-system);
+    letter-spacing: -0.24px;
+    font-family: var(--font-family-alfasans);
 
     transition: background 0.2s;
     padding: var(--gap-8);
@@ -126,6 +132,7 @@
     border-radius: var(--gap-8);
     height: -moz-min-content;
     height: min-content;
+    box-sizing: border-box;
 }
 .text.interactive:not(.disabled):hover {
             background: var(--color-light-transparent-default-hover);

package/esm/components/step/Component.js

@@ -12,6 +12,7 @@ var Step = function (_a) {
     var children = _a.children, stepNumber = _a.stepNumber, isSelected = _a.isSelected, disabled = _a.disabled, ordered = _a.ordered, isPositive = _a.isPositive, isError = _a.isError, isCriticalError = _a.isCriticalError, isWarning = _a.isWarning, isWaiting = _a.isWaiting, customStepIndicator = _a.customStepIndicator, isStepCompleted = _a.isStepCompleted, onClick = _a.onClick, interactive = _a.interactive, isVerticalAlign = _a.isVerticalAlign, isNotLastStep = _a.isNotLastStep, fullWidth = _a.fullWidth, _g = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _g === void 0 ? 24 : _g, completedDashColor = _a.completedDashColor, dataTestId = _a.dataTestId;
     var stepRef = useRef(null);
     var focused = useFocus(stepRef, 'keyboard')[0];
+    var isFullWidth = fullWidth && isVerticalAlign;
     var handleButtonClick = function () {
         if (!disabled && interactive && onClick) {
             onClick(stepNumber);
@@ -78,7 +79,7 @@ var Step = function (_a) {
             _b[styles.focused] = focused,
             _b[styles.vertical] = isVerticalAlign,
             _b[styles.interactive] = interactive,
-            _b[styles.fullWidth] = fullWidth && isVerticalAlign,
+            _b[styles.fullWidth] = isFullWidth,
             _b[styles.horizontal] = !isVerticalAlign,
             _b)), onClick: handleButtonClick, onKeyDown: handleKeyDown },
         React.createElement("div", { className: cn(styles.indicator, (_c = {},
@@ -93,10 +94,11 @@ var Step = function (_a) {
             isNotLastStep && isVerticalAlign && renderDash()),
         React.createElement("div", { className: cn(styles.textWrapper, styles["gap-".concat(minSpaceBetweenSteps)], (_e = {},
                 _e[styles.vertical] = isVerticalAlign,
+                _e[styles.fullWidth] = isFullWidth,
                 _e)) },
             React.createElement("div", { className: cn(styles.text, (_f = {},
                     _f[styles.interactive] = interactive,
-                    _f[styles.fullWidth] = fullWidth && isVerticalAlign,
+                    _f[styles.fullWidth] = isFullWidth,
                     _f)), onClick: handleTextClick }, children)),
         isNotLastStep && !isVerticalAlign && renderDash()));
 };

package/esm/components/step/Component.js.map

@@ -1 +1 @@
-{"version":3,"file":"Component.js","sources":["../../../src/components/step/Component.tsx"],"sourcesContent":["import React, { type FC, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { Badge } from '@alfalab/core-components-badge';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type CommonProps } from '../../types/common-props';\nimport { StepIndicator, type StepIndicatorProps } from '../step-indicator';\n\nimport styles from './index.module.css';\n\ninterface StepProps extends CommonProps {\n    /**\n     * Номер шага\n     */\n    stepNumber: number;\n\n    /**\n     * Маркер того, что текущий шаг выбран\n     */\n    isSelected: boolean;\n\n    /**\n     * Маркер того, что текущий шаг доступен для клика\n     */\n    disabled: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Positive\"\n     */\n    isPositive: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Error\"\n     */\n    isError: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"isCriticalError\"\n     */\n    isCriticalError: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Warning\"\n     */\n    isWarning: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Waiting\"\n     */\n    isWaiting: boolean;\n\n    /**\n     * Маркер того, что текущий шаг нужно пометить как завершенный\n     */\n    isStepCompleted: boolean;\n\n    /**\n     * Свойства кастомного индикатора текущего шага\n     */\n    customStepIndicator?: StepIndicatorProps | null;\n\n    /**\n     * Указывает, является ли текущий шаг последним в списке\n     */\n    isNotLastStep?: boolean;\n\n    /**\n     * Обработчик нажатия на текущей шаг\n     * @param stepNumber - номер шага\n     */\n    onClick: (stepNumber: number) => void;\n}\n\nexport const Step: FC<StepProps> = ({\n    children,\n    stepNumber,\n    isSelected,\n    disabled,\n    ordered,\n    isPositive,\n    isError,\n    isCriticalError,\n    isWarning,\n    isWaiting,\n    customStepIndicator,\n    isStepCompleted,\n    onClick,\n    interactive,\n    isVerticalAlign,\n    isNotLastStep,\n    fullWidth,\n    minSpaceBetweenSteps = 24,\n    completedDashColor,\n    dataTestId,\n}) => {\n    const stepRef = useRef<HTMLDivElement>(null);\n\n    const [focused] = useFocus(stepRef, 'keyboard');\n\n    const handleButtonClick = () => {\n        if (!disabled && interactive && onClick) {\n            onClick(stepNumber);\n        }\n    };\n\n    const handleTextClick = (e: React.MouseEvent<HTMLElement>) => {\n        if (!interactive) {\n            e.stopPropagation();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (event.key === 'Enter') {\n            handleButtonClick();\n        }\n    };\n\n    const getStepIndicator = () => {\n        if (customStepIndicator) {\n            return <Badge view='icon' size='l' {...customStepIndicator} />;\n        }\n        if (isCriticalError) {\n            return <StepIndicator view='negative-cross' />;\n        }\n        if (isError) {\n            return <StepIndicator view='negative-alert' />;\n        }\n        if (isWarning) {\n            return <StepIndicator view='attention-alert' />;\n        }\n        if (isWaiting) {\n            return <StepIndicator view='neutral-operation' />;\n        }\n        if (isPositive) {\n            return <StepIndicator view='positive-checkmark' />;\n        }\n        if (isStepCompleted) {\n            return (\n                <StepIndicator view='positive-checkmark' className={styles.completedIndicator} />\n            );\n        }\n        if (!ordered) {\n            return (\n                <div className={styles.checkbox}>\n                    <span className={styles.dot} />\n                </div>\n            );\n        }\n\n        return stepNumber;\n    };\n\n    const getCustomDashColor = () => {\n        if (isStepCompleted && completedDashColor) {\n            return {\n                borderColor: completedDashColor,\n            };\n        }\n\n        return {};\n    };\n\n    const renderDash = () => (\n        <div\n            className={cn(styles.dash, {\n                [styles.vertical]: isVerticalAlign,\n                [styles.completed]: isStepCompleted,\n            })}\n            style={{\n                ...getCustomDashColor(),\n            }}\n        />\n    );\n\n    return (\n        <div\n            data-test-id={getDataTestId(dataTestId, 'step')}\n            role='button'\n            tabIndex={0}\n            ref={stepRef}\n            className={cn(styles.step, {\n                [styles.completed]: isStepCompleted,\n                [styles.error]: isError,\n                [styles.selected]: isSelected,\n                [styles.disabled]: disabled,\n                [styles.focused]: focused,\n                [styles.vertical]: isVerticalAlign,\n                [styles.interactive]: interactive,\n                [styles.fullWidth]: fullWidth && isVerticalAlign,\n                [styles.horizontal]: !isVerticalAlign,\n            })}\n            onClick={handleButtonClick}\n            onKeyDown={handleKeyDown}\n        >\n            <div\n                className={cn(styles.indicator, {\n                    [styles.vertical]: isVerticalAlign,\n                    [styles.interactive]: interactive,\n                })}\n            >\n                <div\n                    className={cn(styles.option, {\n                        [styles.unordered]: !ordered,\n                        [styles.vertical]: isVerticalAlign,\n                        [styles.error]: isError,\n                    })}\n                >\n                    {getStepIndicator()}\n                </div>\n                {isNotLastStep && isVerticalAlign && renderDash()}\n            </div>\n            <div\n                className={cn(styles.textWrapper, styles[`gap-${minSpaceBetweenSteps}`], {\n                    [styles.vertical]: isVerticalAlign,\n                })}\n            >\n                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n                <div\n                    className={cn(styles.text, {\n                        [styles.interactive]: interactive,\n                        [styles.fullWidth]: fullWidth && isVerticalAlign,\n                    })}\n                    onClick={handleTextClick}\n                >\n                    {children}\n                </div>\n            </div>\n            {isNotLastStep && !isVerticalAlign && renderDash()}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;AA2EO,IAAM,IAAI,GAAkB,UAAC,EAqBnC,EAAA;;AApBG,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,mBAAmB,GAAA,EAAA,CAAA,mBAAA,EACnB,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,EAAyB,GAAA,EAAA,CAAA,oBAAA,EAAzB,oBAAoB,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACzB,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAClB,UAAU,GAAA,EAAA,CAAA,UAAA;AAEV,IAAA,IAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC;IAErC,IAAA,OAAO,GAAI,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,CAAA,CAAA,CAAjC;AAEd,IAAA,IAAM,iBAAiB,GAAG,YAAA;AACtB,QAAA,IAAI,CAAC,QAAQ,IAAI,WAAW,IAAI,OAAO,EAAE;YACrC,OAAO,CAAC,UAAU,CAAC;;AAE3B,KAAC;IAED,IAAM,eAAe,GAAG,UAAC,CAAgC,EAAA;QACrD,IAAI,CAAC,WAAW,EAAE;YACd,CAAC,CAAC,eAAe,EAAE;;AAE3B,KAAC;IAED,IAAM,aAAa,GAAG,UAAC,KAA0B,EAAA;AAC7C,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;AACvB,YAAA,iBAAiB,EAAE;;AAE3B,KAAC;AAED,IAAA,IAAM,gBAAgB,GAAG,YAAA;QACrB,IAAI,mBAAmB,EAAE;AACrB,YAAA,OAAO,KAAC,CAAA,aAAA,CAAA,KAAK,EAAC,QAAA,CAAA,EAAA,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,GAAG,EAAK,EAAA,mBAAmB,EAAI;;QAElE,IAAI,eAAe,EAAE;AACjB,YAAA,OAAO,oBAAC,aAAa,EAAA,EAAC,IAAI,EAAC,gBAAgB,GAAG;;QAElD,IAAI,OAAO,EAAE;AACT,YAAA,OAAO,oBAAC,aAAa,EAAA,EAAC,IAAI,EAAC,gBAAgB,GAAG;;QAElD,IAAI,SAAS,EAAE;AACX,YAAA,OAAO,oBAAC,aAAa,EAAA,EAAC,IAAI,EAAC,iBAAiB,GAAG;;QAEnD,IAAI,SAAS,EAAE;AACX,YAAA,OAAO,oBAAC,aAAa,EAAA,EAAC,IAAI,EAAC,mBAAmB,GAAG;;QAErD,IAAI,UAAU,EAAE;AACZ,YAAA,OAAO,oBAAC,aAAa,EAAA,EAAC,IAAI,EAAC,oBAAoB,GAAG;;QAEtD,IAAI,eAAe,EAAE;AACjB,YAAA,QACI,KAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EAAC,IAAI,EAAC,oBAAoB,EAAC,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAAA,CAAI;;QAGzF,IAAI,CAAC,OAAO,EAAE;AACV,YAAA,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAA;gBAC3B,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,GAAG,EAAI,CAAA,CAC7B;;AAId,QAAA,OAAO,UAAU;AACrB,KAAC;AAED,IAAA,IAAM,kBAAkB,GAAG,YAAA;AACvB,QAAA,IAAI,eAAe,IAAI,kBAAkB,EAAE;YACvC,OAAO;AACH,gBAAA,WAAW,EAAE,kBAAkB;aAClC;;AAGL,QAAA,OAAO,EAAE;AACb,KAAC;AAED,IAAA,IAAM,UAAU,GAAG,YAAA;;QAAM,QACrB,6BACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,GAAA,EAAA,GAAA,EAAA;AACrB,gBAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,eAAe;AAClC,gBAAA,EAAA,CAAC,MAAM,CAAC,SAAS,CAAA,GAAG,eAAe;AACrC,gBAAA,EAAA,EAAA,EACF,KAAK,EAAA,QAAA,CAAA,EAAA,EACE,kBAAkB,EAAE,IAE7B;AATmB,KAUxB;IAED,QACI,KACkB,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,cAAA,EAAA,aAAa,CAAC,UAAU,EAAE,MAAM,CAAC,EAC/C,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,GAAA,EAAA,GAAA,EAAA;AACrB,YAAA,EAAA,CAAC,MAAM,CAAC,SAAS,CAAA,GAAG,eAAe;AACnC,YAAA,EAAA,CAAC,MAAM,CAAC,KAAK,CAAA,GAAG,OAAO;AACvB,YAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,UAAU;AAC7B,YAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC3B,YAAA,EAAA,CAAC,MAAM,CAAC,OAAO,CAAA,GAAG,OAAO;AACzB,YAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,eAAe;AAClC,YAAA,EAAA,CAAC,MAAM,CAAC,WAAW,CAAA,GAAG,WAAW;AACjC,YAAA,EAAA,CAAC,MAAM,CAAC,SAAS,CAAG,GAAA,SAAS,IAAI,eAAe;AAChD,YAAA,EAAA,CAAC,MAAM,CAAC,UAAU,CAAA,GAAG,CAAC,eAAe;AACvC,YAAA,EAAA,EAAA,EACF,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EAAE,aAAa,EAAA;AAExB,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,GAAA,EAAA,GAAA,EAAA;AAC1B,gBAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,eAAe;AAClC,gBAAA,EAAA,CAAC,MAAM,CAAC,WAAW,CAAA,GAAG,WAAW;AACnC,gBAAA,EAAA,EAAA,EAAA;AAEF,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,GAAA,EAAA,GAAA,EAAA;AACvB,oBAAA,EAAA,CAAC,MAAM,CAAC,SAAS,CAAA,GAAG,CAAC,OAAO;AAC5B,oBAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,eAAe;AAClC,oBAAA,EAAA,CAAC,MAAM,CAAC,KAAK,CAAA,GAAG,OAAO;wBACzB,EAED,EAAA,gBAAgB,EAAE,CACjB;AACL,YAAA,aAAa,IAAI,eAAe,IAAI,UAAU,EAAE,CAC/C;AACN,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,MAAO,CAAA,MAAA,CAAA,oBAAoB,CAAE,CAAC,GAAA,EAAA,GAAA,EAAA;AACnE,gBAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,eAAe;AACpC,gBAAA,EAAA,EAAA,EAAA;AAGF,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,GAAA,EAAA,GAAA,EAAA;AACrB,oBAAA,EAAA,CAAC,MAAM,CAAC,WAAW,CAAA,GAAG,WAAW;AACjC,oBAAA,EAAA,CAAC,MAAM,CAAC,SAAS,CAAG,GAAA,SAAS,IAAI,eAAe;AAClD,oBAAA,EAAA,EAAA,EACF,OAAO,EAAE,eAAe,EAEvB,EAAA,QAAQ,CACP,CACJ;QACL,aAAa,IAAI,CAAC,eAAe,IAAI,UAAU,EAAE,CAChD;AAEd;;;;"}
+{"version":3,"file":"Component.js","sources":["../../../src/components/step/Component.tsx"],"sourcesContent":["import React, { type FC, useRef } from 'react';\nimport cn from 'classnames';\n\nimport { Badge } from '@alfalab/core-components-badge';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport { useFocus } from '@alfalab/hooks';\n\nimport { type CommonProps } from '../../types/common-props';\nimport { StepIndicator, type StepIndicatorProps } from '../step-indicator';\n\nimport styles from './index.module.css';\n\ninterface StepProps extends CommonProps {\n    /**\n     * Номер шага\n     */\n    stepNumber: number;\n\n    /**\n     * Маркер того, что текущий шаг выбран\n     */\n    isSelected: boolean;\n\n    /**\n     * Маркер того, что текущий шаг доступен для клика\n     */\n    disabled: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Positive\"\n     */\n    isPositive: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Error\"\n     */\n    isError: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"isCriticalError\"\n     */\n    isCriticalError: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Warning\"\n     */\n    isWarning: boolean;\n\n    /**\n     * Маркер того, что текущий шаг находится в состоянии \"Waiting\"\n     */\n    isWaiting: boolean;\n\n    /**\n     * Маркер того, что текущий шаг нужно пометить как завершенный\n     */\n    isStepCompleted: boolean;\n\n    /**\n     * Свойства кастомного индикатора текущего шага\n     */\n    customStepIndicator?: StepIndicatorProps | null;\n\n    /**\n     * Указывает, является ли текущий шаг последним в списке\n     */\n    isNotLastStep?: boolean;\n\n    /**\n     * Обработчик нажатия на текущей шаг\n     * @param stepNumber - номер шага\n     */\n    onClick: (stepNumber: number) => void;\n}\n\nexport const Step: FC<StepProps> = ({\n    children,\n    stepNumber,\n    isSelected,\n    disabled,\n    ordered,\n    isPositive,\n    isError,\n    isCriticalError,\n    isWarning,\n    isWaiting,\n    customStepIndicator,\n    isStepCompleted,\n    onClick,\n    interactive,\n    isVerticalAlign,\n    isNotLastStep,\n    fullWidth,\n    minSpaceBetweenSteps = 24,\n    completedDashColor,\n    dataTestId,\n}) => {\n    const stepRef = useRef<HTMLDivElement>(null);\n\n    const [focused] = useFocus(stepRef, 'keyboard');\n\n    const isFullWidth = fullWidth && isVerticalAlign;\n\n    const handleButtonClick = () => {\n        if (!disabled && interactive && onClick) {\n            onClick(stepNumber);\n        }\n    };\n\n    const handleTextClick = (e: React.MouseEvent<HTMLElement>) => {\n        if (!interactive) {\n            e.stopPropagation();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (event.key === 'Enter') {\n            handleButtonClick();\n        }\n    };\n\n    const getStepIndicator = () => {\n        if (customStepIndicator) {\n            return <Badge view='icon' size='l' {...customStepIndicator} />;\n        }\n        if (isCriticalError) {\n            return <StepIndicator view='negative-cross' />;\n        }\n        if (isError) {\n            return <StepIndicator view='negative-alert' />;\n        }\n        if (isWarning) {\n            return <StepIndicator view='attention-alert' />;\n        }\n        if (isWaiting) {\n            return <StepIndicator view='neutral-operation' />;\n        }\n        if (isPositive) {\n            return <StepIndicator view='positive-checkmark' />;\n        }\n        if (isStepCompleted) {\n            return (\n                <StepIndicator view='positive-checkmark' className={styles.completedIndicator} />\n            );\n        }\n        if (!ordered) {\n            return (\n                <div className={styles.checkbox}>\n                    <span className={styles.dot} />\n                </div>\n            );\n        }\n\n        return stepNumber;\n    };\n\n    const getCustomDashColor = () => {\n        if (isStepCompleted && completedDashColor) {\n            return {\n                borderColor: completedDashColor,\n            };\n        }\n\n        return {};\n    };\n\n    const renderDash = () => (\n        <div\n            className={cn(styles.dash, {\n                [styles.vertical]: isVerticalAlign,\n                [styles.completed]: isStepCompleted,\n            })}\n            style={{\n                ...getCustomDashColor(),\n            }}\n        />\n    );\n\n    return (\n        <div\n            data-test-id={getDataTestId(dataTestId, 'step')}\n            role='button'\n            tabIndex={0}\n            ref={stepRef}\n            className={cn(styles.step, {\n                [styles.completed]: isStepCompleted,\n                [styles.error]: isError,\n                [styles.selected]: isSelected,\n                [styles.disabled]: disabled,\n                [styles.focused]: focused,\n                [styles.vertical]: isVerticalAlign,\n                [styles.interactive]: interactive,\n                [styles.fullWidth]: isFullWidth,\n                [styles.horizontal]: !isVerticalAlign,\n            })}\n            onClick={handleButtonClick}\n            onKeyDown={handleKeyDown}\n        >\n            <div\n                className={cn(styles.indicator, {\n                    [styles.vertical]: isVerticalAlign,\n                    [styles.interactive]: interactive,\n                })}\n            >\n                <div\n                    className={cn(styles.option, {\n                        [styles.unordered]: !ordered,\n                        [styles.vertical]: isVerticalAlign,\n                        [styles.error]: isError,\n                    })}\n                >\n                    {getStepIndicator()}\n                </div>\n                {isNotLastStep && isVerticalAlign && renderDash()}\n            </div>\n            <div\n                className={cn(styles.textWrapper, styles[`gap-${minSpaceBetweenSteps}`], {\n                    [styles.vertical]: isVerticalAlign,\n                    [styles.fullWidth]: isFullWidth,\n                })}\n            >\n                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n                <div\n                    className={cn(styles.text, {\n                        [styles.interactive]: interactive,\n                        [styles.fullWidth]: isFullWidth,\n                    })}\n                    onClick={handleTextClick}\n                >\n                    {children}\n                </div>\n            </div>\n            {isNotLastStep && !isVerticalAlign && renderDash()}\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;AA2EO,IAAM,IAAI,GAAkB,UAAC,EAqBnC,EAAA;;AApBG,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,mBAAmB,GAAA,EAAA,CAAA,mBAAA,EACnB,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,EAAyB,GAAA,EAAA,CAAA,oBAAA,EAAzB,oBAAoB,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACzB,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAClB,UAAU,GAAA,EAAA,CAAA,UAAA;AAEV,IAAA,IAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC;IAErC,IAAA,OAAO,GAAI,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,CAAA,CAAA,CAAjC;AAEd,IAAA,IAAM,WAAW,GAAG,SAAS,IAAI,eAAe;AAEhD,IAAA,IAAM,iBAAiB,GAAG,YAAA;AACtB,QAAA,IAAI,CAAC,QAAQ,IAAI,WAAW,IAAI,OAAO,EAAE;YACrC,OAAO,CAAC,UAAU,CAAC;;AAE3B,KAAC;IAED,IAAM,eAAe,GAAG,UAAC,CAAgC,EAAA;QACrD,IAAI,CAAC,WAAW,EAAE;YACd,CAAC,CAAC,eAAe,EAAE;;AAE3B,KAAC;IAED,IAAM,aAAa,GAAG,UAAC,KAA0B,EAAA;AAC7C,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;AACvB,YAAA,iBAAiB,EAAE;;AAE3B,KAAC;AAED,IAAA,IAAM,gBAAgB,GAAG,YAAA;QACrB,IAAI,mBAAmB,EAAE;AACrB,YAAA,OAAO,KAAC,CAAA,aAAA,CAAA,KAAK,EAAC,QAAA,CAAA,EAAA,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,GAAG,EAAK,EAAA,mBAAmB,EAAI;;QAElE,IAAI,eAAe,EAAE;AACjB,YAAA,OAAO,oBAAC,aAAa,EAAA,EAAC,IAAI,EAAC,gBAAgB,GAAG;;QAElD,IAAI,OAAO,EAAE;AACT,YAAA,OAAO,oBAAC,aAAa,EAAA,EAAC,IAAI,EAAC,gBAAgB,GAAG;;QAElD,IAAI,SAAS,EAAE;AACX,YAAA,OAAO,oBAAC,aAAa,EAAA,EAAC,IAAI,EAAC,iBAAiB,GAAG;;QAEnD,IAAI,SAAS,EAAE;AACX,YAAA,OAAO,oBAAC,aAAa,EAAA,EAAC,IAAI,EAAC,mBAAmB,GAAG;;QAErD,IAAI,UAAU,EAAE;AACZ,YAAA,OAAO,oBAAC,aAAa,EAAA,EAAC,IAAI,EAAC,oBAAoB,GAAG;;QAEtD,IAAI,eAAe,EAAE;AACjB,YAAA,QACI,KAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EAAC,IAAI,EAAC,oBAAoB,EAAC,SAAS,EAAE,MAAM,CAAC,kBAAkB,EAAA,CAAI;;QAGzF,IAAI,CAAC,OAAO,EAAE;AACV,YAAA,QACI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAA;gBAC3B,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,GAAG,EAAI,CAAA,CAC7B;;AAId,QAAA,OAAO,UAAU;AACrB,KAAC;AAED,IAAA,IAAM,kBAAkB,GAAG,YAAA;AACvB,QAAA,IAAI,eAAe,IAAI,kBAAkB,EAAE;YACvC,OAAO;AACH,gBAAA,WAAW,EAAE,kBAAkB;aAClC;;AAGL,QAAA,OAAO,EAAE;AACb,KAAC;AAED,IAAA,IAAM,UAAU,GAAG,YAAA;;QAAM,QACrB,6BACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,GAAA,EAAA,GAAA,EAAA;AACrB,gBAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,eAAe;AAClC,gBAAA,EAAA,CAAC,MAAM,CAAC,SAAS,CAAA,GAAG,eAAe;AACrC,gBAAA,EAAA,EAAA,EACF,KAAK,EAAA,QAAA,CAAA,EAAA,EACE,kBAAkB,EAAE,IAE7B;AATmB,KAUxB;IAED,QACI,KACkB,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,cAAA,EAAA,aAAa,CAAC,UAAU,EAAE,MAAM,CAAC,EAC/C,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,GAAA,EAAA,GAAA,EAAA;AACrB,YAAA,EAAA,CAAC,MAAM,CAAC,SAAS,CAAA,GAAG,eAAe;AACnC,YAAA,EAAA,CAAC,MAAM,CAAC,KAAK,CAAA,GAAG,OAAO;AACvB,YAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,UAAU;AAC7B,YAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,QAAQ;AAC3B,YAAA,EAAA,CAAC,MAAM,CAAC,OAAO,CAAA,GAAG,OAAO;AACzB,YAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,eAAe;AAClC,YAAA,EAAA,CAAC,MAAM,CAAC,WAAW,CAAA,GAAG,WAAW;AACjC,YAAA,EAAA,CAAC,MAAM,CAAC,SAAS,CAAA,GAAG,WAAW;AAC/B,YAAA,EAAA,CAAC,MAAM,CAAC,UAAU,CAAA,GAAG,CAAC,eAAe;AACvC,YAAA,EAAA,EAAA,EACF,OAAO,EAAE,iBAAiB,EAC1B,SAAS,EAAE,aAAa,EAAA;AAExB,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,GAAA,EAAA,GAAA,EAAA;AAC1B,gBAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,eAAe;AAClC,gBAAA,EAAA,CAAC,MAAM,CAAC,WAAW,CAAA,GAAG,WAAW;AACnC,gBAAA,EAAA,EAAA,EAAA;AAEF,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,GAAA,EAAA,GAAA,EAAA;AACvB,oBAAA,EAAA,CAAC,MAAM,CAAC,SAAS,CAAA,GAAG,CAAC,OAAO;AAC5B,oBAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,eAAe;AAClC,oBAAA,EAAA,CAAC,MAAM,CAAC,KAAK,CAAA,GAAG,OAAO;wBACzB,EAED,EAAA,gBAAgB,EAAE,CACjB;AACL,YAAA,aAAa,IAAI,eAAe,IAAI,UAAU,EAAE,CAC/C;AACN,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,MAAO,CAAA,MAAA,CAAA,oBAAoB,CAAE,CAAC,GAAA,EAAA,GAAA,EAAA;AACnE,gBAAA,EAAA,CAAC,MAAM,CAAC,QAAQ,CAAA,GAAG,eAAe;AAClC,gBAAA,EAAA,CAAC,MAAM,CAAC,SAAS,CAAA,GAAG,WAAW;AACjC,gBAAA,EAAA,EAAA,EAAA;AAGF,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,GAAA,EAAA,GAAA,EAAA;AACrB,oBAAA,EAAA,CAAC,MAAM,CAAC,WAAW,CAAA,GAAG,WAAW;AACjC,oBAAA,EAAA,CAAC,MAAM,CAAC,SAAS,CAAA,GAAG,WAAW;AACjC,oBAAA,EAAA,EAAA,EACF,OAAO,EAAE,eAAe,EAEvB,EAAA,QAAQ,CACP,CACJ;QACL,aAAa,IAAI,CAAC,eAAe,IAAI,UAAU,EAAE,CAChD;AAEd;;;;"}