@alfalab/core-components-steps 1.1.1 → 1.1.3

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

@@ -22,6 +22,9 @@
     --gap-2xs: 4px;
     --gap-xs: 8px;
 }
+:root {
+    --border-radius-circle: 50%;
+}
 :root {
     --focus-color: var(--color-light-border-link);
 }
@@ -67,7 +70,7 @@
     background: var(--color-light-graphic-quaternary);
     min-width: 24px;
     height: 24px;
-    border-radius: 50%
+    border-radius: var(--border-radius-circle)
 }
 .option.vertical {
         margin-top: var(--gap-xs);
@@ -124,7 +127,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    border-radius: 50%;
+    border-radius: var(--border-radius-circle);
     width: 20px;
     height: 20px;
     border: 2px solid var(--color-light-graphic-quaternary);
@@ -132,7 +135,7 @@
 .dot {
     width: 10px;
     height: 10px;
-    border-radius: 50%;
+    border-radius: var(--border-radius-circle);
     background: var(--color-light-graphic-quaternary);
 }
 .selected .checkbox {

package/cssm/components/step-indicator/Component.js

@@ -1,21 +1,19 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsBadge = require('@alfalab/core-components-badge/cssm');
 var styles = require('./index.module.css');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
-var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var StepIndicator = function (_a) {
     var content = _a.content, iconColor = _a.iconColor, className = _a.className;
-    return (React__default['default'].createElement(coreComponentsBadge.Badge, { size: 'l', view: 'icon', iconColor: iconColor, className: cn__default['default'](styles__default['default'].component, className), content: content }));
+    return (React__default.default.createElement(coreComponentsBadge.Badge, { size: 'l', view: 'icon', iconColor: iconColor, className: cn__default.default(styles__default.default.component, className), content: content }));
 };
 
 exports.StepIndicator = StepIndicator;

package/cssm/components/step-indicator/index.js

@@ -1,12 +1,10 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
+var components_stepIndicator_Component = require('./Component.js');
 require('react');
 require('classnames');
 require('@alfalab/core-components-badge/cssm');
 require('./index.module.css');
-var components_stepIndicator_Component = require('./Component.js');
 
 
 

package/cssm/index.js

@@ -1,20 +1,18 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
+var Component = require('./Component.js');
 require('react');
 require('classnames');
 require('./components/step/Component.js');
 require('@alfalab/hooks');
 require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
-require('@alfalab/icons-glyph/ExclamationCircleMIcon');
 require('@alfalab/icons-glyph/ClockMIcon');
+require('@alfalab/icons-glyph/ExclamationCircleMIcon');
+require('./components/step-indicator/Component.js');
 require('@alfalab/core-components-badge/cssm');
 require('./components/step-indicator/index.module.css');
-require('./components/step-indicator/Component.js');
 require('./components/step/index.module.css');
 require('./index.module.css');
-var Component = require('./Component.js');
 
 
 

package/esm/Component.js

@@ -3,12 +3,12 @@ import cn from 'classnames';
 import { Step } from './components/step/Component.js';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '@alfalab/icons-glyph/ClockMIcon';
-import '@alfalab/core-components-badge/esm';
+import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import './components/step-indicator/Component.js';
+import '@alfalab/core-components-badge/esm';
 
-var styles = {"component":"steps__component_87mpb","vertical":"steps__vertical_87mpb"};
+var styles = {"component":"steps__component_1qx39","vertical":"steps__vertical_1qx39"};
 require('./index.css')
 
 var Steps = function (_a) {

package/esm/components/step/Component.js

@@ -2,12 +2,12 @@ import React, { useRef } from 'react';
 import cn from 'classnames';
 import { useFocus } from '@alfalab/hooks';
 import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';
-import '@alfalab/core-components-badge/esm';
+import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import { StepIndicator } from '../step-indicator/Component.js';
+import '@alfalab/core-components-badge/esm';
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -34,7 +34,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"step":"steps__step_js9jf","vertical":"steps__vertical_js9jf","interactive":"steps__interactive_js9jf","disabled":"steps__disabled_js9jf","text":"steps__text_js9jf","indicator":"steps__indicator_js9jf","option":"steps__option_js9jf","dash":"steps__dash_js9jf","completed":"steps__completed_js9jf","focused":"steps__focused_js9jf","selected":"steps__selected_js9jf","checkbox":"steps__checkbox_js9jf","dot":"steps__dot_js9jf","error":"steps__error_js9jf","unordered":"steps__unordered_js9jf","completedIndicator":"steps__completedIndicator_js9jf"};
+var styles = {"step":"steps__step_1wzux","vertical":"steps__vertical_1wzux","interactive":"steps__interactive_1wzux","disabled":"steps__disabled_1wzux","text":"steps__text_1wzux","indicator":"steps__indicator_1wzux","option":"steps__option_1wzux","dash":"steps__dash_1wzux","completed":"steps__completed_1wzux","focused":"steps__focused_1wzux","selected":"steps__selected_1wzux","checkbox":"steps__checkbox_1wzux","dot":"steps__dot_1wzux","error":"steps__error_1wzux","unordered":"steps__unordered_1wzux","completedIndicator":"steps__completedIndicator_1wzux"};
 require('./index.css')
 
 var Step = function (_a) {

package/esm/components/step/index.css

@@ -1,4 +1,4 @@
-/* hash: lfrzu */
+/* hash: 9mw7p */
 :root {
     --color-light-border-link: #007aff;
     --color-light-border-primary: #dbdee1;
@@ -23,6 +23,9 @@
     --gap-2xs: 4px;
     --gap-xs: 8px;
 }
+:root {
+    --border-radius-circle: 50%;
+}
 :root {
     --focus-color: var(--color-light-border-link);
 }
@@ -30,33 +33,33 @@
     --steps-option-svg-color: var(--color-light-graphic-positive);
     --steps-dash-border: 2px solid var(--color-light-graphic-positive);
 }
-.steps__step_js9jf {
+.steps__step_1wzux {
     display: flex;
     outline: none
 }
-.steps__step_js9jf:not(.steps__vertical_js9jf) {
+.steps__step_1wzux:not(.steps__vertical_1wzux) {
         align-items: center;
     }
-.steps__step_js9jf.steps__interactive_js9jf:not(.steps__disabled_js9jf):hover {
+.steps__step_1wzux.steps__interactive_1wzux:not(.steps__disabled_1wzux):hover {
     cursor: pointer;
 }
-.steps__step_js9jf.steps__disabled_js9jf:hover .steps__text_js9jf {
+.steps__step_1wzux.steps__disabled_1wzux:hover .steps__text_1wzux {
         background: unset;
     }
-.steps__step_js9jf.steps__disabled_js9jf .steps__indicator_js9jf {
+.steps__step_1wzux.steps__disabled_1wzux .steps__indicator_1wzux {
         cursor: unset;
     }
-.steps__indicator_js9jf {
+.steps__indicator_1wzux {
     cursor: pointer;
     display: flex;
     align-items: center;
     margin-right: var(--gap-2xs)
 }
-.steps__indicator_js9jf.steps__vertical_js9jf {
+.steps__indicator_1wzux.steps__vertical_1wzux {
         flex-direction: column;
         margin-right: var(--gap-xs);
     }
-.steps__option_js9jf {
+.steps__option_1wzux {
     font-size: 14px;
     line-height: 20px;
     font-weight: 700;
@@ -68,21 +71,21 @@
     background: var(--color-light-graphic-quaternary);
     min-width: 24px;
     height: 24px;
-    border-radius: 50%
+    border-radius: var(--border-radius-circle)
 }
-.steps__option_js9jf.steps__vertical_js9jf {
+.steps__option_1wzux.steps__vertical_1wzux {
         margin-top: var(--gap-xs);
     }
-.steps__dash_js9jf {
+.steps__dash_1wzux {
     flex: 1 1 auto;
     min-width: 24px;
     border-top: 2px solid var(--color-light-border-primary);
     margin-right: var(--gap-xs)
 }
-.steps__dash_js9jf.steps__completed_js9jf {
+.steps__dash_1wzux.steps__completed_1wzux {
         border-top: var(--steps-dash-border);
     }
-.steps__dash_js9jf.steps__vertical_js9jf {
+.steps__dash_1wzux.steps__vertical_1wzux {
         min-width: unset;
         min-height: 24px;
         margin-right: 0;
@@ -90,10 +93,10 @@
         border-left: 2px solid var(--color-light-border-primary);
         border-top: none;
     }
-.steps__dash_js9jf.steps__completed_js9jf.steps__vertical_js9jf {
+.steps__dash_1wzux.steps__completed_1wzux.steps__vertical_1wzux {
         border-left: var(--steps-dash-border);
     }
-.steps__text_js9jf {
+.steps__text_1wzux {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -104,48 +107,48 @@
     border-radius: var(--gap-xs);
     height: min-content
 }
-.steps__text_js9jf.steps__interactive_js9jf:not(.steps__disabled_js9jf):hover {
+.steps__text_1wzux.steps__interactive_1wzux:not(.steps__disabled_1wzux):hover {
             background: var(--color-light-bg-primary-inverted-alpha-7);
         }
-.steps__text_js9jf.steps__interactive_js9jf:not(.steps__disabled_js9jf):active {
+.steps__text_1wzux.steps__interactive_1wzux:not(.steps__disabled_1wzux):active {
             background: var(--color-light-bg-primary-inverted-alpha-15);
         }
-.steps__focused_js9jf {
+.steps__focused_1wzux {
     outline: var(--gap-3xs) solid var(--focus-color);
     outline-offset: var(--gap-3xs);
 }
-.steps__selected_js9jf .steps__text_js9jf {
+.steps__selected_1wzux .steps__text_1wzux {
         color: var(--color-light-graphic-primary);
     }
-.steps__selected_js9jf .steps__option_js9jf {
+.steps__selected_1wzux .steps__option_1wzux {
         color: var(--color-light-graphic-primary-inverted);
         background: var(--color-light-graphic-primary);
     }
-.steps__checkbox_js9jf {
+.steps__checkbox_1wzux {
     display: flex;
     justify-content: center;
     align-items: center;
-    border-radius: 50%;
+    border-radius: var(--border-radius-circle);
     width: 20px;
     height: 20px;
     border: 2px solid var(--color-light-graphic-quaternary);
 }
-.steps__dot_js9jf {
+.steps__dot_1wzux {
     width: 10px;
     height: 10px;
-    border-radius: 50%;
+    border-radius: var(--border-radius-circle);
     background: var(--color-light-graphic-quaternary);
 }
-.steps__selected_js9jf .steps__checkbox_js9jf {
+.steps__selected_1wzux .steps__checkbox_1wzux {
     border: 2px solid var(--color-light-graphic-primary)
 }
-.steps__selected_js9jf .steps__checkbox_js9jf .steps__dot_js9jf {
+.steps__selected_1wzux .steps__checkbox_1wzux .steps__dot_1wzux {
         background: var(--color-light-graphic-primary);
     }
-.steps__option_js9jf:not(.steps__error_js9jf).steps__unordered_js9jf {
+.steps__option_1wzux:not(.steps__error_1wzux).steps__unordered_1wzux {
     background: unset;
 }
-.steps__completedIndicator_js9jf > [class*='positive'] {
+.steps__completedIndicator_1wzux > [class*='positive'] {
     color: var(--steps-option-svg-color);
     background-color: var(--steps-option-svg-color);
 }

package/esm/components/step/index.js

@@ -1,9 +1,9 @@
+export { Step } from './Component.js';
 import 'react';
 import 'classnames';
-export { Step } from './Component.js';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '@alfalab/icons-glyph/ClockMIcon';
-import '@alfalab/core-components-badge/esm';
+import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '../step-indicator/Component.js';
+import '@alfalab/core-components-badge/esm';

package/esm/components/step-indicator/Component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { Badge } from '@alfalab/core-components-badge/esm';
 
-var styles = {"component":"steps__component_w5s8e"};
+var styles = {"component":"steps__component_89css"};
 require('./index.css')
 
 var StepIndicator = function (_a) {

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

@@ -1,4 +1,4 @@
-/* hash: xoamc */
-.steps__component_w5s8e {
+/* hash: lveu7 */
+.steps__component_89css {
     padding: 0;
 }

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

@@ -1,4 +1,4 @@
+export { StepIndicator } from './Component.js';
 import 'react';
 import 'classnames';
 import '@alfalab/core-components-badge/esm';
-export { StepIndicator } from './Component.js';

package/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 11k18 */
+/* hash: li0ej */
 :root {
 
     /* Hard */
@@ -7,12 +7,12 @@
 
     /* Hard up */
 }
-.steps__component_87mpb {
+.steps__component_1qx39 {
     display: flex;
     align-items: center;
     flex-direction: row
 }
-.steps__component_87mpb.steps__vertical_87mpb {
+.steps__component_1qx39.steps__vertical_1qx39 {
         flex-direction: column;
         align-items: flex-start;
     }

package/esm/index.js

@@ -1,10 +1,10 @@
+export { Steps } from './Component.js';
 import 'react';
 import 'classnames';
 import './components/step/Component.js';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '@alfalab/icons-glyph/ClockMIcon';
-import '@alfalab/core-components-badge/esm';
+import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import './components/step-indicator/Component.js';
-export { Steps } from './Component.js';
+import '@alfalab/core-components-badge/esm';

package/index.css

@@ -1,4 +1,4 @@
-/* hash: 11k18 */
+/* hash: li0ej */
 :root {
 
     /* Hard */
@@ -7,12 +7,12 @@
 
     /* Hard up */
 }
-.steps__component_87mpb {
+.steps__component_1qx39 {
     display: flex;
     align-items: center;
     flex-direction: row
 }
-.steps__component_87mpb.steps__vertical_87mpb {
+.steps__component_1qx39.steps__vertical_1qx39 {
         flex-direction: column;
         align-items: flex-start;
     }

package/index.js

@@ -1,17 +1,15 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
+var Component = require('./Component.js');
 require('react');
 require('classnames');
 require('./components/step/Component.js');
 require('@alfalab/hooks');
 require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
-require('@alfalab/icons-glyph/ExclamationCircleMIcon');
 require('@alfalab/icons-glyph/ClockMIcon');
-require('@alfalab/core-components-badge');
+require('@alfalab/icons-glyph/ExclamationCircleMIcon');
 require('./components/step-indicator/Component.js');
-var Component = require('./Component.js');
+require('@alfalab/core-components-badge');
 
 
 

package/modern/Component.js

@@ -1,14 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import cn from 'classnames';
+import { Step } from './components/step/Component.js';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '@alfalab/icons-glyph/ClockMIcon';
-import '@alfalab/core-components-badge/modern';
+import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import './components/step-indicator/Component.js';
-import { Step } from './components/step/Component.js';
+import '@alfalab/core-components-badge/modern';
 
-var styles = {"component":"steps__component_87mpb","vertical":"steps__vertical_87mpb"};
+const styles = {"component":"steps__component_1qx39","vertical":"steps__vertical_1qx39"};
 require('./index.css')
 
 const Steps = ({ className, children, defaultActiveStep = 1, activeStep: activeStepProp, isMarkCompletedSteps = true, isVerticalAlign = false, ordered = true, interactive = true, checkIsStepDisabled, checkIsStepError, checkIsStepWarning, checkIsStepWaiting, checkIsStepPositive, checkIsStepCustom, onChange, dataTestId, }) => {

package/modern/components/step/Component.js

@@ -2,12 +2,12 @@ import React, { useRef } from 'react';
 import cn from 'classnames';
 import { useFocus } from '@alfalab/hooks';
 import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';
-import '@alfalab/core-components-badge/modern';
+import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import { StepIndicator } from '../step-indicator/Component.js';
+import '@alfalab/core-components-badge/modern';
 
-var styles = {"step":"steps__step_js9jf","vertical":"steps__vertical_js9jf","interactive":"steps__interactive_js9jf","disabled":"steps__disabled_js9jf","text":"steps__text_js9jf","indicator":"steps__indicator_js9jf","option":"steps__option_js9jf","dash":"steps__dash_js9jf","completed":"steps__completed_js9jf","focused":"steps__focused_js9jf","selected":"steps__selected_js9jf","checkbox":"steps__checkbox_js9jf","dot":"steps__dot_js9jf","error":"steps__error_js9jf","unordered":"steps__unordered_js9jf","completedIndicator":"steps__completedIndicator_js9jf"};
+const styles = {"step":"steps__step_1wzux","vertical":"steps__vertical_1wzux","interactive":"steps__interactive_1wzux","disabled":"steps__disabled_1wzux","text":"steps__text_1wzux","indicator":"steps__indicator_1wzux","option":"steps__option_1wzux","dash":"steps__dash_1wzux","completed":"steps__completed_1wzux","focused":"steps__focused_1wzux","selected":"steps__selected_1wzux","checkbox":"steps__checkbox_1wzux","dot":"steps__dot_1wzux","error":"steps__error_1wzux","unordered":"steps__unordered_1wzux","completedIndicator":"steps__completedIndicator_1wzux"};
 require('./index.css')
 
 const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive, isError, isWarning, isWaiting, customStepIndicator, isStepCompleted, onClick, interactive, isVerticalAlign, isNotLastStep, }) => {
@@ -30,7 +30,7 @@ const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive,
     };
     const getStepIndicator = () => {
         if (customStepIndicator) {
-            return React.createElement(StepIndicator, Object.assign({}, customStepIndicator));
+            return React.createElement(StepIndicator, { ...customStepIndicator });
         }
         if (isError) {
             return React.createElement(StepIndicator, { iconColor: 'negative', content: React.createElement(ExclamationCircleMIcon, null) });

package/modern/components/step/index.css

@@ -1,4 +1,4 @@
-/* hash: lfrzu */
+/* hash: 9mw7p */
 :root {
     --color-light-border-link: #007aff;
     --color-light-border-primary: #dbdee1;
@@ -23,6 +23,9 @@
     --gap-2xs: 4px;
     --gap-xs: 8px;
 }
+:root {
+    --border-radius-circle: 50%;
+}
 :root {
     --focus-color: var(--color-light-border-link);
 }
@@ -30,33 +33,33 @@
     --steps-option-svg-color: var(--color-light-graphic-positive);
     --steps-dash-border: 2px solid var(--color-light-graphic-positive);
 }
-.steps__step_js9jf {
+.steps__step_1wzux {
     display: flex;
     outline: none
 }
-.steps__step_js9jf:not(.steps__vertical_js9jf) {
+.steps__step_1wzux:not(.steps__vertical_1wzux) {
         align-items: center;
     }
-.steps__step_js9jf.steps__interactive_js9jf:not(.steps__disabled_js9jf):hover {
+.steps__step_1wzux.steps__interactive_1wzux:not(.steps__disabled_1wzux):hover {
     cursor: pointer;
 }
-.steps__step_js9jf.steps__disabled_js9jf:hover .steps__text_js9jf {
+.steps__step_1wzux.steps__disabled_1wzux:hover .steps__text_1wzux {
         background: unset;
     }
-.steps__step_js9jf.steps__disabled_js9jf .steps__indicator_js9jf {
+.steps__step_1wzux.steps__disabled_1wzux .steps__indicator_1wzux {
         cursor: unset;
     }
-.steps__indicator_js9jf {
+.steps__indicator_1wzux {
     cursor: pointer;
     display: flex;
     align-items: center;
     margin-right: var(--gap-2xs)
 }
-.steps__indicator_js9jf.steps__vertical_js9jf {
+.steps__indicator_1wzux.steps__vertical_1wzux {
         flex-direction: column;
         margin-right: var(--gap-xs);
     }
-.steps__option_js9jf {
+.steps__option_1wzux {
     font-size: 14px;
     line-height: 20px;
     font-weight: 700;
@@ -68,21 +71,21 @@
     background: var(--color-light-graphic-quaternary);
     min-width: 24px;
     height: 24px;
-    border-radius: 50%
+    border-radius: var(--border-radius-circle)
 }
-.steps__option_js9jf.steps__vertical_js9jf {
+.steps__option_1wzux.steps__vertical_1wzux {
         margin-top: var(--gap-xs);
     }
-.steps__dash_js9jf {
+.steps__dash_1wzux {
     flex: 1 1 auto;
     min-width: 24px;
     border-top: 2px solid var(--color-light-border-primary);
     margin-right: var(--gap-xs)
 }
-.steps__dash_js9jf.steps__completed_js9jf {
+.steps__dash_1wzux.steps__completed_1wzux {
         border-top: var(--steps-dash-border);
     }
-.steps__dash_js9jf.steps__vertical_js9jf {
+.steps__dash_1wzux.steps__vertical_1wzux {
         min-width: unset;
         min-height: 24px;
         margin-right: 0;
@@ -90,10 +93,10 @@
         border-left: 2px solid var(--color-light-border-primary);
         border-top: none;
     }
-.steps__dash_js9jf.steps__completed_js9jf.steps__vertical_js9jf {
+.steps__dash_1wzux.steps__completed_1wzux.steps__vertical_1wzux {
         border-left: var(--steps-dash-border);
     }
-.steps__text_js9jf {
+.steps__text_1wzux {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -104,48 +107,48 @@
     border-radius: var(--gap-xs);
     height: min-content
 }
-.steps__text_js9jf.steps__interactive_js9jf:not(.steps__disabled_js9jf):hover {
+.steps__text_1wzux.steps__interactive_1wzux:not(.steps__disabled_1wzux):hover {
             background: var(--color-light-bg-primary-inverted-alpha-7);
         }
-.steps__text_js9jf.steps__interactive_js9jf:not(.steps__disabled_js9jf):active {
+.steps__text_1wzux.steps__interactive_1wzux:not(.steps__disabled_1wzux):active {
             background: var(--color-light-bg-primary-inverted-alpha-15);
         }
-.steps__focused_js9jf {
+.steps__focused_1wzux {
     outline: var(--gap-3xs) solid var(--focus-color);
     outline-offset: var(--gap-3xs);
 }
-.steps__selected_js9jf .steps__text_js9jf {
+.steps__selected_1wzux .steps__text_1wzux {
         color: var(--color-light-graphic-primary);
     }
-.steps__selected_js9jf .steps__option_js9jf {
+.steps__selected_1wzux .steps__option_1wzux {
         color: var(--color-light-graphic-primary-inverted);
         background: var(--color-light-graphic-primary);
     }
-.steps__checkbox_js9jf {
+.steps__checkbox_1wzux {
     display: flex;
     justify-content: center;
     align-items: center;
-    border-radius: 50%;
+    border-radius: var(--border-radius-circle);
     width: 20px;
     height: 20px;
     border: 2px solid var(--color-light-graphic-quaternary);
 }
-.steps__dot_js9jf {
+.steps__dot_1wzux {
     width: 10px;
     height: 10px;
-    border-radius: 50%;
+    border-radius: var(--border-radius-circle);
     background: var(--color-light-graphic-quaternary);
 }
-.steps__selected_js9jf .steps__checkbox_js9jf {
+.steps__selected_1wzux .steps__checkbox_1wzux {
     border: 2px solid var(--color-light-graphic-primary)
 }
-.steps__selected_js9jf .steps__checkbox_js9jf .steps__dot_js9jf {
+.steps__selected_1wzux .steps__checkbox_1wzux .steps__dot_1wzux {
         background: var(--color-light-graphic-primary);
     }
-.steps__option_js9jf:not(.steps__error_js9jf).steps__unordered_js9jf {
+.steps__option_1wzux:not(.steps__error_1wzux).steps__unordered_1wzux {
     background: unset;
 }
-.steps__completedIndicator_js9jf > [class*='positive'] {
+.steps__completedIndicator_1wzux > [class*='positive'] {
     color: var(--steps-option-svg-color);
     background-color: var(--steps-option-svg-color);
 }

package/modern/components/step/index.js

@@ -1,9 +1,9 @@
+export { Step } from './Component.js';
 import 'react';
 import 'classnames';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '@alfalab/icons-glyph/ClockMIcon';
-import '@alfalab/core-components-badge/modern';
+import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '../step-indicator/Component.js';
-export { Step } from './Component.js';
+import '@alfalab/core-components-badge/modern';