@alfalab/core-components-steps 2.0.0 → 2.1.0-snapshot-92b8690

package/dynamic-mixins/components/step/index.css

@@ -0,0 +1,130 @@
+:root {
+    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
+    --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
+    --color-light-status-info: #2288fa;
+    --color-light-status-positive: #0cc44d;
+    --color-light-text-primary: rgba(3, 3, 6, 0.88);
+    --color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
+    --color-light-transparent-default-hover: rgba(38, 55, 88, 0.06);
+    --color-light-transparent-default-press: rgba(30, 43, 68, 0.08);
+} :root {
+    --border-radius-circle: 50%;
+} :root {
+    --gap-3xs: 2px;
+    --gap-2xs: 4px;
+    --gap-xs: 8px;
+    --gap-m: 16px;
+    --gap-0: 0px;
+    --gap-2: var(--gap-3xs);
+    --gap-4: var(--gap-2xs);
+    --gap-8: var(--gap-xs);
+    --gap-16: var(--gap-m);
+} :root {
+    --focus-color: var(--color-light-status-info);
+} :root {
+    --steps-option-svg-color: var(--color-light-status-positive);
+    --steps-dash-border: 2px solid var(--color-light-status-positive);
+} .steps__step_116b4 {
+    display: flex;
+    outline: none
+} .steps__step_116b4.steps__horizontal_116b4 {
+        flex-grow: 1;
+    } .steps__step_116b4:not(.steps__vertical_116b4) {
+        align-items: center;
+    } .steps__step_116b4:last-of-type .steps__textWrapper_116b4.steps__vertical_116b4 {
+        margin-bottom: var(--gap-0);
+    } .steps__step_116b4.steps__interactive_116b4:not(.steps__disabled_116b4):hover {
+    cursor: pointer;
+} .steps__step_116b4.steps__disabled_116b4:hover .steps__text_116b4 {
+        background: unset;
+    } .steps__step_116b4.steps__disabled_116b4 .steps__indicator_116b4 {
+        cursor: unset;
+    } .steps__indicator_116b4 {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    margin-right: var(--gap-4)
+} .steps__indicator_116b4.steps__vertical_116b4 {
+        flex-direction: column;
+        margin-right: var(--gap-8);
+    } .steps__option_116b4 {
+    @mixin accent_primary_small;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-light-text-primary);
+    background: var(--color-light-neutral-translucent-300);
+    min-width: 24px;
+    height: 24px;
+    border-radius: var(--border-radius-circle)
+} .steps__option_116b4.steps__vertical_116b4 {
+        margin-top: var(--gap-8);
+    } .steps__dash_116b4 {
+    flex: 1 1 auto;
+    min-width: 24px;
+    border-top: 2px solid var(--color-light-neutral-translucent-300);
+    margin-right: var(--gap-8)
+} .steps__dash_116b4.steps__completed_116b4 {
+        border-top: var(--steps-dash-border);
+    } .steps__dash_116b4.steps__vertical_116b4 {
+        min-width: unset;
+        min-height: 8px;
+        margin-right: var(--gap-0);
+        margin-top: var(--gap-8);
+        border-left: 2px solid var(--color-light-neutral-translucent-300);
+        border-top: none;
+    } .steps__dash_116b4.steps__completed_116b4.steps__vertical_116b4 {
+        border-left: var(--steps-dash-border);
+    } .steps__textWrapper_116b4.steps__vertical_116b4 {
+        min-height: 48px
+    } .steps__textWrapper_116b4.steps__vertical_116b4.steps__gap-24_116b4 {
+            margin-bottom: var(--gap-8);
+        } .steps__textWrapper_116b4.steps__vertical_116b4.steps__gap-32_116b4 {
+            margin-bottom: var(--gap-16);
+        } .steps__text_116b4 {
+    @mixin paragraph_primary_medium;
+
+    transition: background 0.2s;
+    padding: var(--gap-8);
+    color: var(--color-light-text-primary);
+    border-radius: var(--gap-8);
+    height: -moz-min-content;
+    height: min-content
+} .steps__text_116b4.steps__interactive_116b4:not(.steps__disabled_116b4):hover {
+            background: var(--color-light-transparent-default-hover);
+        } .steps__text_116b4.steps__interactive_116b4:not(.steps__disabled_116b4):active {
+            background: var(--color-light-transparent-default-press);
+        } .steps__focused_116b4 {
+    outline: var(--gap-2) solid var(--focus-color);
+    outline-offset: var(--gap-2);
+} .steps__selected_116b4 .steps__text_116b4 {
+        color: var(--color-light-text-primary);
+    } .steps__selected_116b4 .steps__option_116b4 {
+        color: var(--color-light-text-primary-inverted);
+        background: var(--color-light-neutral-translucent-1300);
+    } .steps__checkbox_116b4 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--border-radius-circle);
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--color-light-neutral-translucent-300);
+} .steps__dot_116b4 {
+    width: 10px;
+    height: 10px;
+    border-radius: var(--border-radius-circle);
+    background: var(--color-light-neutral-translucent-300);
+} .steps__selected_116b4 .steps__checkbox_116b4 {
+    border: 2px solid var(--color-light-neutral-translucent-1300)
+} .steps__selected_116b4 .steps__checkbox_116b4 .steps__dot_116b4 {
+        background: var(--color-light-neutral-translucent-1300);
+    } .steps__option_116b4:not(.steps__error_116b4).steps__unordered_116b4 {
+    background: unset;
+} .steps__completedIndicator_116b4 > [class*='positive'] {
+    color: var(--steps-option-svg-color);
+    background-color: var(--steps-option-svg-color);
+} .steps__fullWidth_116b4 {
+    width: 100%;
+}

package/dynamic-mixins/components/step/index.d.ts

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

package/dynamic-mixins/components/step/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.Step = Component.Step;
+//# sourceMappingURL=index.js.map

package/dynamic-mixins/components/step/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dynamic-mixins/components/step/index.module.css.js

@@ -0,0 +1,8 @@
+'use strict';
+
+require('./index.css');
+
+var styles = {"step":"steps__step_116b4","horizontal":"steps__horizontal_116b4","vertical":"steps__vertical_116b4","textWrapper":"steps__textWrapper_116b4","interactive":"steps__interactive_116b4","disabled":"steps__disabled_116b4","text":"steps__text_116b4","indicator":"steps__indicator_116b4","option":"steps__option_116b4","dash":"steps__dash_116b4","completed":"steps__completed_116b4","gap-24":"steps__gap-24_116b4","gap-32":"steps__gap-32_116b4","focused":"steps__focused_116b4","selected":"steps__selected_116b4","checkbox":"steps__checkbox_116b4","dot":"steps__dot_116b4","error":"steps__error_116b4","unordered":"steps__unordered_116b4","completedIndicator":"steps__completedIndicator_116b4","fullWidth":"steps__fullWidth_116b4"};
+
+module.exports = styles;
+//# sourceMappingURL=index.module.css.js.map

package/dynamic-mixins/components/step/index.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/step/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-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'] {\n    color: var(--steps-option-svg-color);\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;;;;"}

package/dynamic-mixins/components/step-indicator/Component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { BadgeProps } from '@alfalab/core-components-badge';
+export declare type StepIndicatorProps = Pick<BadgeProps, 'content' | 'iconColor' | 'className'>;
+export declare const StepIndicator: React.FC<StepIndicatorProps>;

package/dynamic-mixins/components/step-indicator/Component.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var dynamicMixins = require('@alfalab/core-components-badge/dynamic-mixins');
+var index_module = require('./index.module.css.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var StepIndicator = function (_a) {
+    var content = _a.content, iconColor = _a.iconColor, className = _a.className;
+    return (React__default.default.createElement(dynamicMixins.Badge, { size: 'l', view: 'icon', iconColor: iconColor, className: cn__default.default(index_module.component, className), content: content }));
+};
+
+exports.StepIndicator = StepIndicator;
+//# sourceMappingURL=Component.js.map

package/dynamic-mixins/components/step-indicator/Component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Component.js","sources":["../../../src/components/step-indicator/Component.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { Badge, BadgeProps } from '@alfalab/core-components-badge';\n\nimport styles from './index.module.css';\n\nexport type StepIndicatorProps = Pick<BadgeProps, 'content' | 'iconColor' | 'className'>;\n\nexport const StepIndicator: React.FC<StepIndicatorProps> = ({ content, iconColor, className }) => (\n    <Badge\n        size='l'\n        view='icon'\n        iconColor={iconColor}\n        className={cn(styles.component, className)}\n        content={content}\n    />\n);\n"],"names":["React","Badge","cn","styles"],"mappings":";;;;;;;;;;;;;;AASO,IAAM,aAAa,GAAiC,UAAC,EAAiC,EAAA;AAA/B,IAAA,IAAA,OAAO,aAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA;AAAO,IAAA,QAC9FA,sBAAA,CAAA,aAAA,CAACC,mBAAK,EAAA,EACF,IAAI,EAAC,GAAG,EACR,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,SAAS,EACpB,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,SAAS,EAAE,SAAS,CAAC,EAC1C,OAAO,EAAE,OAAO,GAClB;AAP4F;;;;"}

package/dynamic-mixins/components/step-indicator/index.css

@@ -0,0 +1,5 @@
+:root {
+    --gap-0: 0px;
+} .steps__component_qrkzb.steps__component_qrkzb {
+    padding: var(--gap-0);
+}

package/dynamic-mixins/components/step-indicator/index.d.ts

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

package/dynamic-mixins/components/step-indicator/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.StepIndicator = Component.StepIndicator;
+//# sourceMappingURL=index.js.map

package/dynamic-mixins/components/step-indicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

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

@@ -0,0 +1,8 @@
+'use strict';
+
+require('./index.css');
+
+var styles = {"component":"steps__component_qrkzb"};
+
+module.exports = styles;
+//# sourceMappingURL=index.module.css.js.map

package/dynamic-mixins/components/step-indicator/index.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/step-indicator/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.component.component {\n    padding: var(--gap-0);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,wBAAwB,CAAC;;;;"}

package/dynamic-mixins/index.css

@@ -0,0 +1,8 @@
+.steps__component_nap52 {
+    display: flex;
+    align-items: center;
+    flex-direction: row
+} .steps__component_nap52.steps__vertical_nap52 {
+        flex-direction: column;
+        align-items: flex-start;
+    }

package/dynamic-mixins/index.d.ts

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

package/dynamic-mixins/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.Steps = Component.Steps;
+//# sourceMappingURL=index.js.map

package/dynamic-mixins/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dynamic-mixins/index.module.css.js

@@ -0,0 +1,8 @@
+'use strict';
+
+require('./index.css');
+
+var styles = {"component":"steps__component_nap52","vertical":"steps__vertical_nap52"};
+
+module.exports = styles;
+//# sourceMappingURL=index.module.css.js.map

package/dynamic-mixins/index.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.component {\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n\n    &.vertical {\n        flex-direction: column;\n        align-items: flex-start;\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,wBAAwB,CAAC,UAAU,CAAC,uBAAuB,CAAC;;;;"}

package/dynamic-mixins/shared/index.d.ts

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

package/dynamic-mixins/shared/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var getStepsTestIds = require('../utils/getStepsTestIds.js');
+
+
+
+exports.getStepsTestIds = getStepsTestIds.getStepsTestIds;
+//# sourceMappingURL=index.js.map

package/dynamic-mixins/shared/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dynamic-mixins/types/common-props.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+/** Обобщенный набор типов который подходит для Steps, но также прокинут в дочерний Step */
+export declare type CommonProps = {
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Дочерние элементы
+     */
+    children: ReactNode;
+    /**
+     * Управление ориентацией компонента
+     * @default false
+     */
+    isVerticalAlign?: boolean;
+    /**
+     * Управление отображением номера шага
+     */
+    ordered?: boolean;
+    /**
+     * Включение / отключение интерактивности шагов
+     */
+    interactive?: boolean;
+    /**
+     * Растягивание шагов на всю ширину блока для вертикальной ориентации
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Минимальное расстояние между шагами для горизонтального расположения компонента
+     * @default 24
+     * @description Значение 8 устарело и будет удалено в будущих версиях. Используйте 16, 24 или 32.
+     */
+    minSpaceBetweenSteps?: 8 | 16 | 24 | 32;
+    /**
+     * Цвет тире выполненного шага
+     */
+    completedDashColor?: string;
+};

package/dynamic-mixins/types/common-props.js

@@ -0,0 +1,3 @@
+'use strict';
+
+//# sourceMappingURL=common-props.js.map

package/dynamic-mixins/types/common-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"common-props.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dynamic-mixins/utils/getStepsTestIds.d.ts

@@ -0,0 +1,4 @@
+export declare function getStepsTestIds(dataTestId: string): {
+    steps: string;
+    step: string;
+};

package/dynamic-mixins/utils/getStepsTestIds.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dynamicMixins = require('@alfalab/core-components-shared/dynamic-mixins');
+
+function getStepsTestIds(dataTestId) {
+    return {
+        steps: dataTestId,
+        step: dynamicMixins.getDataTestId(dataTestId, 'step'),
+    };
+}
+
+exports.getStepsTestIds = getStepsTestIds;
+//# sourceMappingURL=getStepsTestIds.js.map

package/dynamic-mixins/utils/getStepsTestIds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getStepsTestIds.js","sources":["../../src/utils/getStepsTestIds.ts"],"sourcesContent":["import { getDataTestId } from '@alfalab/core-components-shared';\n\nexport function getStepsTestIds(dataTestId: string) {\n    return {\n        steps: dataTestId,\n        step: getDataTestId(dataTestId, 'step'),\n    };\n}\n"],"names":["getDataTestId"],"mappings":";;;;;;AAEM,SAAU,eAAe,CAAC,UAAkB,EAAA;IAC9C,OAAO;AACH,QAAA,KAAK,EAAE,UAAU;AACjB,QAAA,IAAI,EAAEA,2BAAa,CAAC,UAAU,EAAE,MAAM,CAAC;KAC1C;AACL;;;;"}

package/esm/components/step/index.css

@@ -24,30 +24,30 @@
 } :root {
     --steps-option-svg-color: var(--color-light-status-positive);
     --steps-dash-border: 2px solid var(--color-light-status-positive);
-} .steps__step_1exzg {
+} .steps__step_116b4 {
     display: flex;
     outline: none
-} .steps__step_1exzg.steps__horizontal_1exzg {
+} .steps__step_116b4.steps__horizontal_116b4 {
         flex-grow: 1;
-    } .steps__step_1exzg:not(.steps__vertical_1exzg) {
+    } .steps__step_116b4:not(.steps__vertical_116b4) {
         align-items: center;
-    } .steps__step_1exzg:last-of-type .steps__textWrapper_1exzg.steps__vertical_1exzg {
+    } .steps__step_116b4:last-of-type .steps__textWrapper_116b4.steps__vertical_116b4 {
         margin-bottom: var(--gap-0);
-    } .steps__step_1exzg.steps__interactive_1exzg:not(.steps__disabled_1exzg):hover {
+    } .steps__step_116b4.steps__interactive_116b4:not(.steps__disabled_116b4):hover {
     cursor: pointer;
-} .steps__step_1exzg.steps__disabled_1exzg:hover .steps__text_1exzg {
+} .steps__step_116b4.steps__disabled_116b4:hover .steps__text_116b4 {
         background: unset;
-    } .steps__step_1exzg.steps__disabled_1exzg .steps__indicator_1exzg {
+    } .steps__step_116b4.steps__disabled_116b4 .steps__indicator_116b4 {
         cursor: unset;
-    } .steps__indicator_1exzg {
+    } .steps__indicator_116b4 {
     cursor: pointer;
     display: flex;
     align-items: center;
     margin-right: var(--gap-4)
-} .steps__indicator_1exzg.steps__vertical_1exzg {
+} .steps__indicator_116b4.steps__vertical_116b4 {
         flex-direction: column;
         margin-right: var(--gap-8);
-    } .steps__option_1exzg {
+    } .steps__option_116b4 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 700;
@@ -60,31 +60,31 @@
     min-width: 24px;
     height: 24px;
     border-radius: var(--border-radius-circle)
-} .steps__option_1exzg.steps__vertical_1exzg {
+} .steps__option_116b4.steps__vertical_116b4 {
         margin-top: var(--gap-8);
-    } .steps__dash_1exzg {
+    } .steps__dash_116b4 {
     flex: 1 1 auto;
     min-width: 24px;
     border-top: 2px solid var(--color-light-neutral-translucent-300);
     margin-right: var(--gap-8)
-} .steps__dash_1exzg.steps__completed_1exzg {
+} .steps__dash_116b4.steps__completed_116b4 {
         border-top: var(--steps-dash-border);
-    } .steps__dash_1exzg.steps__vertical_1exzg {
+    } .steps__dash_116b4.steps__vertical_116b4 {
         min-width: unset;
         min-height: 8px;
         margin-right: var(--gap-0);
         margin-top: var(--gap-8);
         border-left: 2px solid var(--color-light-neutral-translucent-300);
         border-top: none;
-    } .steps__dash_1exzg.steps__completed_1exzg.steps__vertical_1exzg {
+    } .steps__dash_116b4.steps__completed_116b4.steps__vertical_116b4 {
         border-left: var(--steps-dash-border);
-    } .steps__textWrapper_1exzg.steps__vertical_1exzg {
+    } .steps__textWrapper_116b4.steps__vertical_116b4 {
         min-height: 48px
-    } .steps__textWrapper_1exzg.steps__vertical_1exzg.steps__gap-24_1exzg {
+    } .steps__textWrapper_116b4.steps__vertical_116b4.steps__gap-24_116b4 {
             margin-bottom: var(--gap-8);
-        } .steps__textWrapper_1exzg.steps__vertical_1exzg.steps__gap-32_1exzg {
+        } .steps__textWrapper_116b4.steps__vertical_116b4.steps__gap-32_116b4 {
             margin-bottom: var(--gap-16);
-        } .steps__text_1exzg {
+        } .steps__text_116b4 {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -95,19 +95,19 @@
     border-radius: var(--gap-8);
     height: -moz-min-content;
     height: min-content
-} .steps__text_1exzg.steps__interactive_1exzg:not(.steps__disabled_1exzg):hover {
+} .steps__text_116b4.steps__interactive_116b4:not(.steps__disabled_116b4):hover {
             background: var(--color-light-transparent-default-hover);
-        } .steps__text_1exzg.steps__interactive_1exzg:not(.steps__disabled_1exzg):active {
+        } .steps__text_116b4.steps__interactive_116b4:not(.steps__disabled_116b4):active {
             background: var(--color-light-transparent-default-press);
-        } .steps__focused_1exzg {
+        } .steps__focused_116b4 {
     outline: var(--gap-2) solid var(--focus-color);
     outline-offset: var(--gap-2);
-} .steps__selected_1exzg .steps__text_1exzg {
+} .steps__selected_116b4 .steps__text_116b4 {
         color: var(--color-light-text-primary);
-    } .steps__selected_1exzg .steps__option_1exzg {
+    } .steps__selected_116b4 .steps__option_116b4 {
         color: var(--color-light-text-primary-inverted);
         background: var(--color-light-neutral-translucent-1300);
-    } .steps__checkbox_1exzg {
+    } .steps__checkbox_116b4 {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -115,20 +115,20 @@
     width: 20px;
     height: 20px;
     border: 2px solid var(--color-light-neutral-translucent-300);
-} .steps__dot_1exzg {
+} .steps__dot_116b4 {
     width: 10px;
     height: 10px;
     border-radius: var(--border-radius-circle);
     background: var(--color-light-neutral-translucent-300);
-} .steps__selected_1exzg .steps__checkbox_1exzg {
+} .steps__selected_116b4 .steps__checkbox_116b4 {
     border: 2px solid var(--color-light-neutral-translucent-1300)
-} .steps__selected_1exzg .steps__checkbox_1exzg .steps__dot_1exzg {
+} .steps__selected_116b4 .steps__checkbox_116b4 .steps__dot_116b4 {
         background: var(--color-light-neutral-translucent-1300);
-    } .steps__option_1exzg:not(.steps__error_1exzg).steps__unordered_1exzg {
+    } .steps__option_116b4:not(.steps__error_116b4).steps__unordered_116b4 {
     background: unset;
-} .steps__completedIndicator_1exzg > [class*='positive'] {
+} .steps__completedIndicator_116b4 > [class*='positive'] {
     color: var(--steps-option-svg-color);
     background-color: var(--steps-option-svg-color);
-} .steps__fullWidth_1exzg {
+} .steps__fullWidth_116b4 {
     width: 100%;
 }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"step":"steps__step_1exzg","horizontal":"steps__horizontal_1exzg","vertical":"steps__vertical_1exzg","textWrapper":"steps__textWrapper_1exzg","interactive":"steps__interactive_1exzg","disabled":"steps__disabled_1exzg","text":"steps__text_1exzg","indicator":"steps__indicator_1exzg","option":"steps__option_1exzg","dash":"steps__dash_1exzg","completed":"steps__completed_1exzg","gap-24":"steps__gap-24_1exzg","gap-32":"steps__gap-32_1exzg","focused":"steps__focused_1exzg","selected":"steps__selected_1exzg","checkbox":"steps__checkbox_1exzg","dot":"steps__dot_1exzg","error":"steps__error_1exzg","unordered":"steps__unordered_1exzg","completedIndicator":"steps__completedIndicator_1exzg","fullWidth":"steps__fullWidth_1exzg"};
+var styles = {"step":"steps__step_116b4","horizontal":"steps__horizontal_116b4","vertical":"steps__vertical_116b4","textWrapper":"steps__textWrapper_116b4","interactive":"steps__interactive_116b4","disabled":"steps__disabled_116b4","text":"steps__text_116b4","indicator":"steps__indicator_116b4","option":"steps__option_116b4","dash":"steps__dash_116b4","completed":"steps__completed_116b4","gap-24":"steps__gap-24_116b4","gap-32":"steps__gap-32_116b4","focused":"steps__focused_116b4","selected":"steps__selected_116b4","checkbox":"steps__checkbox_116b4","dot":"steps__dot_116b4","error":"steps__error_116b4","unordered":"steps__unordered_116b4","completedIndicator":"steps__completedIndicator_116b4","fullWidth":"steps__fullWidth_116b4"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/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'] {\n    color: var(--steps-option-svg-color);\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/no-dynamic-mixins-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'] {\n    color: var(--steps-option-svg-color);\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;;;;"}

package/esm/components/step-indicator/index.css

@@ -1,5 +1,5 @@
 :root {
     --gap-0: 0px;
-} .steps__component_1r6i2.steps__component_1r6i2 {
+} .steps__component_qrkzb.steps__component_qrkzb {
     padding: var(--gap-0);
 }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"component":"steps__component_1r6i2"};
+var styles = {"component":"steps__component_qrkzb"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/step-indicator/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component.component {\n    padding: var(--gap-0);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,wBAAwB,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/step-indicator/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.component.component {\n    padding: var(--gap-0);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,wBAAwB,CAAC;;;;"}

package/esm/index.css

@@ -1,8 +1,8 @@
-.steps__component_q5f3b {
+.steps__component_nap52 {
     display: flex;
     align-items: center;
     flex-direction: row
-} .steps__component_q5f3b.steps__vertical_q5f3b {
+} .steps__component_nap52.steps__vertical_nap52 {
         flex-direction: column;
         align-items: flex-start;
     }

package/esm/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-var styles = {"component":"steps__component_q5f3b","vertical":"steps__vertical_q5f3b"};
+var styles = {"component":"steps__component_nap52","vertical":"steps__vertical_nap52"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/esm/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n\n    &.vertical {\n        flex-direction: column;\n        align-items: flex-start;\n    }\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,wBAAwB,CAAC,UAAU,CAAC,uBAAuB,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.component {\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n\n    &.vertical {\n        flex-direction: column;\n        align-items: flex-start;\n    }\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,wBAAwB,CAAC,UAAU,CAAC,uBAAuB,CAAC;;;;"}

package/index.css

@@ -1,8 +1,8 @@
-.steps__component_q5f3b {
+.steps__component_nap52 {
     display: flex;
     align-items: center;
     flex-direction: row
-} .steps__component_q5f3b.steps__vertical_q5f3b {
+} .steps__component_nap52.steps__vertical_nap52 {
         flex-direction: column;
         align-items: flex-start;
     }

package/index.module.css.js

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

package/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n.component {\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n\n    &.vertical {\n        flex-direction: column;\n        align-items: flex-start;\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,wBAAwB,CAAC,UAAU,CAAC,uBAAuB,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n.component {\n    display: flex;\n    align-items: center;\n    flex-direction: row;\n\n    &.vertical {\n        flex-direction: column;\n        align-items: flex-start;\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,wBAAwB,CAAC,UAAU,CAAC,uBAAuB,CAAC;;;;"}