@alfalab/core-components-steps 1.1.0 → 1.1.2

package/Component.js

@@ -7,8 +7,8 @@ var cn = require('classnames');
 var components_step_Component = 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('@alfalab/core-components-badge');
 require('./components/step-indicator/Component.js');
 
@@ -17,7 +17,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"component":"steps__component_rm960","vertical":"steps__vertical_rm960"};
+var styles = {"component":"steps__component_ekgl4","vertical":"steps__vertical_ekgl4"};
 require('./index.css')
 
 var Steps = function (_a) {

package/components/step/Component.js

@@ -6,8 +6,8 @@ var React = require('react');
 var cn = require('classnames');
 var hooks = require('@alfalab/hooks');
 var CheckmarkCircleMIcon = require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
-var ExclamationCircleMIcon = require('@alfalab/icons-glyph/ExclamationCircleMIcon');
 var ClockMIcon = require('@alfalab/icons-glyph/ClockMIcon');
+var ExclamationCircleMIcon = require('@alfalab/icons-glyph/ExclamationCircleMIcon');
 require('@alfalab/core-components-badge');
 var components_stepIndicator_Component = require('../step-indicator/Component.js');
 
@@ -16,7 +16,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -43,7 +43,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"step":"steps__step_xhvt7","vertical":"steps__vertical_xhvt7","interactive":"steps__interactive_xhvt7","disabled":"steps__disabled_xhvt7","text":"steps__text_xhvt7","indicator":"steps__indicator_xhvt7","option":"steps__option_xhvt7","dash":"steps__dash_xhvt7","completed":"steps__completed_xhvt7","focused":"steps__focused_xhvt7","selected":"steps__selected_xhvt7","checkbox":"steps__checkbox_xhvt7","dot":"steps__dot_xhvt7","error":"steps__error_xhvt7","unordered":"steps__unordered_xhvt7","completedIndicator":"steps__completedIndicator_xhvt7"};
+var styles = {"step":"steps__step_chpay","vertical":"steps__vertical_chpay","interactive":"steps__interactive_chpay","disabled":"steps__disabled_chpay","text":"steps__text_chpay","indicator":"steps__indicator_chpay","option":"steps__option_chpay","dash":"steps__dash_chpay","completed":"steps__completed_chpay","focused":"steps__focused_chpay","selected":"steps__selected_chpay","checkbox":"steps__checkbox_chpay","dot":"steps__dot_chpay","error":"steps__error_chpay","unordered":"steps__unordered_chpay","completedIndicator":"steps__completedIndicator_chpay"};
 require('./index.css')
 
 var Step = function (_a) {
@@ -83,7 +83,7 @@ var Step = function (_a) {
             return React__default['default'].createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'positive', content: React__default['default'].createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, null) });
         }
         if (isStepCompleted) {
-            return React__default['default'].createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'positive', content: React__default['default'].createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, null), className: styles.completedIndicator });
+            return (React__default['default'].createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'positive', content: React__default['default'].createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, null), className: styles.completedIndicator }));
         }
         if (!ordered) {
             return (React__default['default'].createElement("div", { className: styles.checkbox },

package/components/step/index.css

@@ -1,4 +1,4 @@
-/* hash: j46l8 */
+/* hash: 1a7zq */
 :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_xhvt7 {
+.steps__step_chpay {
     display: flex;
     outline: none
 }
-.steps__step_xhvt7:not(.steps__vertical_xhvt7) {
+.steps__step_chpay:not(.steps__vertical_chpay) {
         align-items: center;
     }
-.steps__step_xhvt7.steps__interactive_xhvt7:not(.steps__disabled_xhvt7):hover {
+.steps__step_chpay.steps__interactive_chpay:not(.steps__disabled_chpay):hover {
     cursor: pointer;
 }
-.steps__step_xhvt7.steps__disabled_xhvt7:hover .steps__text_xhvt7 {
+.steps__step_chpay.steps__disabled_chpay:hover .steps__text_chpay {
         background: unset;
     }
-.steps__step_xhvt7.steps__disabled_xhvt7 .steps__indicator_xhvt7 {
+.steps__step_chpay.steps__disabled_chpay .steps__indicator_chpay {
         cursor: unset;
     }
-.steps__indicator_xhvt7 {
+.steps__indicator_chpay {
     cursor: pointer;
     display: flex;
     align-items: center;
     margin-right: var(--gap-2xs)
 }
-.steps__indicator_xhvt7.steps__vertical_xhvt7 {
+.steps__indicator_chpay.steps__vertical_chpay {
         flex-direction: column;
         margin-right: var(--gap-xs);
     }
-.steps__option_xhvt7 {
+.steps__option_chpay {
     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_xhvt7.steps__vertical_xhvt7 {
+.steps__option_chpay.steps__vertical_chpay {
         margin-top: var(--gap-xs);
     }
-.steps__dash_xhvt7 {
+.steps__dash_chpay {
     flex: 1 1 auto;
     min-width: 24px;
     border-top: 2px solid var(--color-light-border-primary);
     margin-right: var(--gap-xs)
 }
-.steps__dash_xhvt7.steps__completed_xhvt7 {
+.steps__dash_chpay.steps__completed_chpay {
         border-top: var(--steps-dash-border);
     }
-.steps__dash_xhvt7.steps__vertical_xhvt7 {
+.steps__dash_chpay.steps__vertical_chpay {
         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_xhvt7.steps__completed_xhvt7.steps__vertical_xhvt7 {
+.steps__dash_chpay.steps__completed_chpay.steps__vertical_chpay {
         border-left: var(--steps-dash-border);
     }
-.steps__text_xhvt7 {
+.steps__text_chpay {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -104,48 +107,48 @@
     border-radius: var(--gap-xs);
     height: min-content
 }
-.steps__text_xhvt7.steps__interactive_xhvt7:not(.steps__disabled_xhvt7):hover {
+.steps__text_chpay.steps__interactive_chpay:not(.steps__disabled_chpay):hover {
             background: var(--color-light-bg-primary-inverted-alpha-7);
         }
-.steps__text_xhvt7.steps__interactive_xhvt7:not(.steps__disabled_xhvt7):active {
+.steps__text_chpay.steps__interactive_chpay:not(.steps__disabled_chpay):active {
             background: var(--color-light-bg-primary-inverted-alpha-15);
         }
-.steps__focused_xhvt7 {
+.steps__focused_chpay {
     outline: var(--gap-3xs) solid var(--focus-color);
     outline-offset: var(--gap-3xs);
 }
-.steps__selected_xhvt7 .steps__text_xhvt7 {
+.steps__selected_chpay .steps__text_chpay {
         color: var(--color-light-graphic-primary);
     }
-.steps__selected_xhvt7 .steps__option_xhvt7 {
+.steps__selected_chpay .steps__option_chpay {
         color: var(--color-light-graphic-primary-inverted);
         background: var(--color-light-graphic-primary);
     }
-.steps__checkbox_xhvt7 {
+.steps__checkbox_chpay {
     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_xhvt7 {
+.steps__dot_chpay {
     width: 10px;
     height: 10px;
-    border-radius: 50%;
+    border-radius: var(--border-radius-circle);
     background: var(--color-light-graphic-quaternary);
 }
-.steps__selected_xhvt7 .steps__checkbox_xhvt7 {
+.steps__selected_chpay .steps__checkbox_chpay {
     border: 2px solid var(--color-light-graphic-primary)
 }
-.steps__selected_xhvt7 .steps__checkbox_xhvt7 .steps__dot_xhvt7 {
+.steps__selected_chpay .steps__checkbox_chpay .steps__dot_chpay {
         background: var(--color-light-graphic-primary);
     }
-.steps__option_xhvt7:not(.steps__error_xhvt7).steps__unordered_xhvt7 {
+.steps__option_chpay:not(.steps__error_chpay).steps__unordered_chpay {
     background: unset;
 }
-.steps__completedIndicator_xhvt7 > [class*='positive'] {
+.steps__completedIndicator_chpay > [class*='positive'] {
     color: var(--steps-option-svg-color);
     background-color: var(--steps-option-svg-color);
 }

package/components/step/index.js

@@ -7,8 +7,8 @@ require('classnames');
 var components_step_Component = require('./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('@alfalab/core-components-badge');
 require('../step-indicator/Component.js');
 

package/components/step-indicator/Component.js

@@ -11,7 +11,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 
-var styles = {"component":"steps__component_19vei"};
+var styles = {"component":"steps__component_bu5g3"};
 require('./index.css')
 
 var StepIndicator = function (_a) {

package/components/step-indicator/index.css

@@ -1,4 +1,4 @@
-/* hash: crmt3 */
-.steps__component_19vei {
+/* hash: 1mgid */
+.steps__component_bu5g3 {
     padding: 0;
 }

package/cssm/Component.js

@@ -7,8 +7,8 @@ var cn = require('classnames');
 var components_step_Component = 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('@alfalab/core-components-badge/cssm');
 require('./components/step-indicator/index.module.css');
 require('./components/step-indicator/Component.js');

package/cssm/components/step/Component.js

@@ -6,8 +6,8 @@ var React = require('react');
 var cn = require('classnames');
 var hooks = require('@alfalab/hooks');
 var CheckmarkCircleMIcon = require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
-var ExclamationCircleMIcon = require('@alfalab/icons-glyph/ExclamationCircleMIcon');
 var ClockMIcon = require('@alfalab/icons-glyph/ClockMIcon');
+var ExclamationCircleMIcon = require('@alfalab/icons-glyph/ExclamationCircleMIcon');
 require('@alfalab/core-components-badge/cssm');
 require('../step-indicator/index.module.css');
 var components_stepIndicator_Component = require('../step-indicator/Component.js');
@@ -19,7 +19,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
 var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -83,7 +83,7 @@ var Step = function (_a) {
             return React__default['default'].createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'positive', content: React__default['default'].createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, null) });
         }
         if (isStepCompleted) {
-            return React__default['default'].createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'positive', content: React__default['default'].createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, null), className: styles__default['default'].completedIndicator });
+            return (React__default['default'].createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'positive', content: React__default['default'].createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, null), className: styles__default['default'].completedIndicator }));
         }
         if (!ordered) {
             return (React__default['default'].createElement("div", { className: styles__default['default'].checkbox },

package/cssm/components/step/index.js

@@ -7,8 +7,8 @@ require('classnames');
 var components_step_Component = require('./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('@alfalab/core-components-badge/cssm');
 require('../step-indicator/index.module.css');
 require('../step-indicator/Component.js');

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/index.js

@@ -7,8 +7,8 @@ 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('@alfalab/core-components-badge/cssm');
 require('./components/step-indicator/index.module.css');
 require('./components/step-indicator/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/icons-glyph/ExclamationCircleMIcon';
 import '@alfalab/core-components-badge/esm';
 import './components/step-indicator/Component.js';
 
-var styles = {"component":"steps__component_rm960","vertical":"steps__vertical_rm960"};
+var styles = {"component":"steps__component_ekgl4","vertical":"steps__vertical_ekgl4"};
 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 { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '@alfalab/core-components-badge/esm';
 import { StepIndicator } from '../step-indicator/Component.js';
 
-/*! *****************************************************************************
+/******************************************************************************
 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_xhvt7","vertical":"steps__vertical_xhvt7","interactive":"steps__interactive_xhvt7","disabled":"steps__disabled_xhvt7","text":"steps__text_xhvt7","indicator":"steps__indicator_xhvt7","option":"steps__option_xhvt7","dash":"steps__dash_xhvt7","completed":"steps__completed_xhvt7","focused":"steps__focused_xhvt7","selected":"steps__selected_xhvt7","checkbox":"steps__checkbox_xhvt7","dot":"steps__dot_xhvt7","error":"steps__error_xhvt7","unordered":"steps__unordered_xhvt7","completedIndicator":"steps__completedIndicator_xhvt7"};
+var styles = {"step":"steps__step_chpay","vertical":"steps__vertical_chpay","interactive":"steps__interactive_chpay","disabled":"steps__disabled_chpay","text":"steps__text_chpay","indicator":"steps__indicator_chpay","option":"steps__option_chpay","dash":"steps__dash_chpay","completed":"steps__completed_chpay","focused":"steps__focused_chpay","selected":"steps__selected_chpay","checkbox":"steps__checkbox_chpay","dot":"steps__dot_chpay","error":"steps__error_chpay","unordered":"steps__unordered_chpay","completedIndicator":"steps__completedIndicator_chpay"};
 require('./index.css')
 
 var Step = function (_a) {
@@ -74,7 +74,7 @@ var Step = function (_a) {
             return React.createElement(StepIndicator, { iconColor: 'positive', content: React.createElement(CheckmarkCircleMIcon, null) });
         }
         if (isStepCompleted) {
-            return React.createElement(StepIndicator, { iconColor: 'positive', content: React.createElement(CheckmarkCircleMIcon, null), className: styles.completedIndicator });
+            return (React.createElement(StepIndicator, { iconColor: 'positive', content: React.createElement(CheckmarkCircleMIcon, null), className: styles.completedIndicator }));
         }
         if (!ordered) {
             return (React.createElement("div", { className: styles.checkbox },

package/esm/components/step/index.css

@@ -1,4 +1,4 @@
-/* hash: j46l8 */
+/* hash: 1a7zq */
 :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_xhvt7 {
+.steps__step_chpay {
     display: flex;
     outline: none
 }
-.steps__step_xhvt7:not(.steps__vertical_xhvt7) {
+.steps__step_chpay:not(.steps__vertical_chpay) {
         align-items: center;
     }
-.steps__step_xhvt7.steps__interactive_xhvt7:not(.steps__disabled_xhvt7):hover {
+.steps__step_chpay.steps__interactive_chpay:not(.steps__disabled_chpay):hover {
     cursor: pointer;
 }
-.steps__step_xhvt7.steps__disabled_xhvt7:hover .steps__text_xhvt7 {
+.steps__step_chpay.steps__disabled_chpay:hover .steps__text_chpay {
         background: unset;
     }
-.steps__step_xhvt7.steps__disabled_xhvt7 .steps__indicator_xhvt7 {
+.steps__step_chpay.steps__disabled_chpay .steps__indicator_chpay {
         cursor: unset;
     }
-.steps__indicator_xhvt7 {
+.steps__indicator_chpay {
     cursor: pointer;
     display: flex;
     align-items: center;
     margin-right: var(--gap-2xs)
 }
-.steps__indicator_xhvt7.steps__vertical_xhvt7 {
+.steps__indicator_chpay.steps__vertical_chpay {
         flex-direction: column;
         margin-right: var(--gap-xs);
     }
-.steps__option_xhvt7 {
+.steps__option_chpay {
     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_xhvt7.steps__vertical_xhvt7 {
+.steps__option_chpay.steps__vertical_chpay {
         margin-top: var(--gap-xs);
     }
-.steps__dash_xhvt7 {
+.steps__dash_chpay {
     flex: 1 1 auto;
     min-width: 24px;
     border-top: 2px solid var(--color-light-border-primary);
     margin-right: var(--gap-xs)
 }
-.steps__dash_xhvt7.steps__completed_xhvt7 {
+.steps__dash_chpay.steps__completed_chpay {
         border-top: var(--steps-dash-border);
     }
-.steps__dash_xhvt7.steps__vertical_xhvt7 {
+.steps__dash_chpay.steps__vertical_chpay {
         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_xhvt7.steps__completed_xhvt7.steps__vertical_xhvt7 {
+.steps__dash_chpay.steps__completed_chpay.steps__vertical_chpay {
         border-left: var(--steps-dash-border);
     }
-.steps__text_xhvt7 {
+.steps__text_chpay {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -104,48 +107,48 @@
     border-radius: var(--gap-xs);
     height: min-content
 }
-.steps__text_xhvt7.steps__interactive_xhvt7:not(.steps__disabled_xhvt7):hover {
+.steps__text_chpay.steps__interactive_chpay:not(.steps__disabled_chpay):hover {
             background: var(--color-light-bg-primary-inverted-alpha-7);
         }
-.steps__text_xhvt7.steps__interactive_xhvt7:not(.steps__disabled_xhvt7):active {
+.steps__text_chpay.steps__interactive_chpay:not(.steps__disabled_chpay):active {
             background: var(--color-light-bg-primary-inverted-alpha-15);
         }
-.steps__focused_xhvt7 {
+.steps__focused_chpay {
     outline: var(--gap-3xs) solid var(--focus-color);
     outline-offset: var(--gap-3xs);
 }
-.steps__selected_xhvt7 .steps__text_xhvt7 {
+.steps__selected_chpay .steps__text_chpay {
         color: var(--color-light-graphic-primary);
     }
-.steps__selected_xhvt7 .steps__option_xhvt7 {
+.steps__selected_chpay .steps__option_chpay {
         color: var(--color-light-graphic-primary-inverted);
         background: var(--color-light-graphic-primary);
     }
-.steps__checkbox_xhvt7 {
+.steps__checkbox_chpay {
     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_xhvt7 {
+.steps__dot_chpay {
     width: 10px;
     height: 10px;
-    border-radius: 50%;
+    border-radius: var(--border-radius-circle);
     background: var(--color-light-graphic-quaternary);
 }
-.steps__selected_xhvt7 .steps__checkbox_xhvt7 {
+.steps__selected_chpay .steps__checkbox_chpay {
     border: 2px solid var(--color-light-graphic-primary)
 }
-.steps__selected_xhvt7 .steps__checkbox_xhvt7 .steps__dot_xhvt7 {
+.steps__selected_chpay .steps__checkbox_chpay .steps__dot_chpay {
         background: var(--color-light-graphic-primary);
     }
-.steps__option_xhvt7:not(.steps__error_xhvt7).steps__unordered_xhvt7 {
+.steps__option_chpay:not(.steps__error_chpay).steps__unordered_chpay {
     background: unset;
 }
-.steps__completedIndicator_xhvt7 > [class*='positive'] {
+.steps__completedIndicator_chpay > [class*='positive'] {
     color: var(--steps-option-svg-color);
     background-color: var(--steps-option-svg-color);
 }

package/esm/components/step/index.js

@@ -3,7 +3,7 @@ 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/icons-glyph/ExclamationCircleMIcon';
 import '@alfalab/core-components-badge/esm';
 import '../step-indicator/Component.js';

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_19vei"};
+var styles = {"component":"steps__component_bu5g3"};
 require('./index.css')
 
 var StepIndicator = function (_a) {

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

@@ -1,4 +1,4 @@
-/* hash: crmt3 */
-.steps__component_19vei {
+/* hash: 1mgid */
+.steps__component_bu5g3 {
     padding: 0;
 }

package/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: hx0e0 */
+/* hash: gd62a */
 :root {
 
     /* Hard */
@@ -7,12 +7,12 @@
 
     /* Hard up */
 }
-.steps__component_rm960 {
+.steps__component_ekgl4 {
     display: flex;
     align-items: center;
     flex-direction: row
 }
-.steps__component_rm960.steps__vertical_rm960 {
+.steps__component_ekgl4.steps__vertical_ekgl4 {
         flex-direction: column;
         align-items: flex-start;
     }

package/esm/index.js

@@ -3,8 +3,8 @@ 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/icons-glyph/ExclamationCircleMIcon';
 import '@alfalab/core-components-badge/esm';
 import './components/step-indicator/Component.js';
 export { Steps } from './Component.js';

package/index.css

@@ -1,4 +1,4 @@
-/* hash: hx0e0 */
+/* hash: gd62a */
 :root {
 
     /* Hard */
@@ -7,12 +7,12 @@
 
     /* Hard up */
 }
-.steps__component_rm960 {
+.steps__component_ekgl4 {
     display: flex;
     align-items: center;
     flex-direction: row
 }
-.steps__component_rm960.steps__vertical_rm960 {
+.steps__component_ekgl4.steps__vertical_ekgl4 {
         flex-direction: column;
         align-items: flex-start;
     }

package/index.js

@@ -7,8 +7,8 @@ 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('@alfalab/core-components-badge');
 require('./components/step-indicator/Component.js');
 var Component = require('./Component.js');

package/modern/Component.js

@@ -2,13 +2,13 @@ import React, { useState, useEffect } from 'react';
 import cn from 'classnames';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '@alfalab/icons-glyph/ClockMIcon';
+import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '@alfalab/core-components-badge/modern';
 import './components/step-indicator/Component.js';
 import { Step } from './components/step/Component.js';
 
-var styles = {"component":"steps__component_rm960","vertical":"steps__vertical_rm960"};
+var styles = {"component":"steps__component_ekgl4","vertical":"steps__vertical_ekgl4"};
 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 { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '@alfalab/core-components-badge/modern';
 import { StepIndicator } from '../step-indicator/Component.js';
 
-var styles = {"step":"steps__step_xhvt7","vertical":"steps__vertical_xhvt7","interactive":"steps__interactive_xhvt7","disabled":"steps__disabled_xhvt7","text":"steps__text_xhvt7","indicator":"steps__indicator_xhvt7","option":"steps__option_xhvt7","dash":"steps__dash_xhvt7","completed":"steps__completed_xhvt7","focused":"steps__focused_xhvt7","selected":"steps__selected_xhvt7","checkbox":"steps__checkbox_xhvt7","dot":"steps__dot_xhvt7","error":"steps__error_xhvt7","unordered":"steps__unordered_xhvt7","completedIndicator":"steps__completedIndicator_xhvt7"};
+var styles = {"step":"steps__step_chpay","vertical":"steps__vertical_chpay","interactive":"steps__interactive_chpay","disabled":"steps__disabled_chpay","text":"steps__text_chpay","indicator":"steps__indicator_chpay","option":"steps__option_chpay","dash":"steps__dash_chpay","completed":"steps__completed_chpay","focused":"steps__focused_chpay","selected":"steps__selected_chpay","checkbox":"steps__checkbox_chpay","dot":"steps__dot_chpay","error":"steps__error_chpay","unordered":"steps__unordered_chpay","completedIndicator":"steps__completedIndicator_chpay"};
 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) });
@@ -45,7 +45,7 @@ const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive,
             return React.createElement(StepIndicator, { iconColor: 'positive', content: React.createElement(CheckmarkCircleMIcon, null) });
         }
         if (isStepCompleted) {
-            return React.createElement(StepIndicator, { iconColor: 'positive', content: React.createElement(CheckmarkCircleMIcon, null), className: styles.completedIndicator });
+            return (React.createElement(StepIndicator, { iconColor: 'positive', content: React.createElement(CheckmarkCircleMIcon, null), className: styles.completedIndicator }));
         }
         if (!ordered) {
             return (React.createElement("div", { className: styles.checkbox },

package/modern/components/step/index.css

@@ -1,4 +1,4 @@
-/* hash: j46l8 */
+/* hash: 1a7zq */
 :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_xhvt7 {
+.steps__step_chpay {
     display: flex;
     outline: none
 }
-.steps__step_xhvt7:not(.steps__vertical_xhvt7) {
+.steps__step_chpay:not(.steps__vertical_chpay) {
         align-items: center;
     }
-.steps__step_xhvt7.steps__interactive_xhvt7:not(.steps__disabled_xhvt7):hover {
+.steps__step_chpay.steps__interactive_chpay:not(.steps__disabled_chpay):hover {
     cursor: pointer;
 }
-.steps__step_xhvt7.steps__disabled_xhvt7:hover .steps__text_xhvt7 {
+.steps__step_chpay.steps__disabled_chpay:hover .steps__text_chpay {
         background: unset;
     }
-.steps__step_xhvt7.steps__disabled_xhvt7 .steps__indicator_xhvt7 {
+.steps__step_chpay.steps__disabled_chpay .steps__indicator_chpay {
         cursor: unset;
     }
-.steps__indicator_xhvt7 {
+.steps__indicator_chpay {
     cursor: pointer;
     display: flex;
     align-items: center;
     margin-right: var(--gap-2xs)
 }
-.steps__indicator_xhvt7.steps__vertical_xhvt7 {
+.steps__indicator_chpay.steps__vertical_chpay {
         flex-direction: column;
         margin-right: var(--gap-xs);
     }
-.steps__option_xhvt7 {
+.steps__option_chpay {
     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_xhvt7.steps__vertical_xhvt7 {
+.steps__option_chpay.steps__vertical_chpay {
         margin-top: var(--gap-xs);
     }
-.steps__dash_xhvt7 {
+.steps__dash_chpay {
     flex: 1 1 auto;
     min-width: 24px;
     border-top: 2px solid var(--color-light-border-primary);
     margin-right: var(--gap-xs)
 }
-.steps__dash_xhvt7.steps__completed_xhvt7 {
+.steps__dash_chpay.steps__completed_chpay {
         border-top: var(--steps-dash-border);
     }
-.steps__dash_xhvt7.steps__vertical_xhvt7 {
+.steps__dash_chpay.steps__vertical_chpay {
         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_xhvt7.steps__completed_xhvt7.steps__vertical_xhvt7 {
+.steps__dash_chpay.steps__completed_chpay.steps__vertical_chpay {
         border-left: var(--steps-dash-border);
     }
-.steps__text_xhvt7 {
+.steps__text_chpay {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -104,48 +107,48 @@
     border-radius: var(--gap-xs);
     height: min-content
 }
-.steps__text_xhvt7.steps__interactive_xhvt7:not(.steps__disabled_xhvt7):hover {
+.steps__text_chpay.steps__interactive_chpay:not(.steps__disabled_chpay):hover {
             background: var(--color-light-bg-primary-inverted-alpha-7);
         }
-.steps__text_xhvt7.steps__interactive_xhvt7:not(.steps__disabled_xhvt7):active {
+.steps__text_chpay.steps__interactive_chpay:not(.steps__disabled_chpay):active {
             background: var(--color-light-bg-primary-inverted-alpha-15);
         }
-.steps__focused_xhvt7 {
+.steps__focused_chpay {
     outline: var(--gap-3xs) solid var(--focus-color);
     outline-offset: var(--gap-3xs);
 }
-.steps__selected_xhvt7 .steps__text_xhvt7 {
+.steps__selected_chpay .steps__text_chpay {
         color: var(--color-light-graphic-primary);
     }
-.steps__selected_xhvt7 .steps__option_xhvt7 {
+.steps__selected_chpay .steps__option_chpay {
         color: var(--color-light-graphic-primary-inverted);
         background: var(--color-light-graphic-primary);
     }
-.steps__checkbox_xhvt7 {
+.steps__checkbox_chpay {
     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_xhvt7 {
+.steps__dot_chpay {
     width: 10px;
     height: 10px;
-    border-radius: 50%;
+    border-radius: var(--border-radius-circle);
     background: var(--color-light-graphic-quaternary);
 }
-.steps__selected_xhvt7 .steps__checkbox_xhvt7 {
+.steps__selected_chpay .steps__checkbox_chpay {
     border: 2px solid var(--color-light-graphic-primary)
 }
-.steps__selected_xhvt7 .steps__checkbox_xhvt7 .steps__dot_xhvt7 {
+.steps__selected_chpay .steps__checkbox_chpay .steps__dot_chpay {
         background: var(--color-light-graphic-primary);
     }
-.steps__option_xhvt7:not(.steps__error_xhvt7).steps__unordered_xhvt7 {
+.steps__option_chpay:not(.steps__error_chpay).steps__unordered_chpay {
     background: unset;
 }
-.steps__completedIndicator_xhvt7 > [class*='positive'] {
+.steps__completedIndicator_chpay > [class*='positive'] {
     color: var(--steps-option-svg-color);
     background-color: var(--steps-option-svg-color);
 }

package/modern/components/step/index.js

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

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

@@ -2,11 +2,9 @@ import React from 'react';
 import cn from 'classnames';
 import { Badge } from '@alfalab/core-components-badge/modern';
 
-var styles = {"component":"steps__component_19vei"};
+var styles = {"component":"steps__component_bu5g3"};
 require('./index.css')
 
-const StepIndicator = ({ content, iconColor, className }) => {
-    return (React.createElement(Badge, { size: 'l', view: 'icon', iconColor: iconColor, className: cn(styles.component, className), content: content }));
-};
+const StepIndicator = ({ content, iconColor, className }) => (React.createElement(Badge, { size: 'l', view: 'icon', iconColor: iconColor, className: cn(styles.component, className), content: content }));
 
 export { StepIndicator };

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

@@ -1,4 +1,4 @@
-/* hash: crmt3 */
-.steps__component_19vei {
+/* hash: 1mgid */
+.steps__component_bu5g3 {
     padding: 0;
 }

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: hx0e0 */
+/* hash: gd62a */
 :root {
 
     /* Hard */
@@ -7,12 +7,12 @@
 
     /* Hard up */
 }
-.steps__component_rm960 {
+.steps__component_ekgl4 {
     display: flex;
     align-items: center;
     flex-direction: row
 }
-.steps__component_rm960.steps__vertical_rm960 {
+.steps__component_ekgl4.steps__vertical_ekgl4 {
         flex-direction: column;
         align-items: flex-start;
     }

package/modern/index.js

@@ -2,8 +2,8 @@ import 'react';
 import 'classnames';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
-import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '@alfalab/icons-glyph/ClockMIcon';
+import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import '@alfalab/core-components-badge/modern';
 import './components/step-indicator/Component.js';
 import './components/step/Component.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-steps",
-    "version": "1.1.0",
+    "version": "1.1.2",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -17,9 +17,9 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-badge": "^4.0.1",
+        "@alfalab/core-components-badge": "^4.0.3",
         "@alfalab/hooks": "^1.13.0",
-        "@alfalab/icons-glyph": "^2.64.0",
+        "@alfalab/icons-glyph": "^2.71.0",
         "classnames": "^2.3.1"
     }
 }

package/send-stats.js

@@ -55,7 +55,7 @@ async function main() {
         };
 
         return new Promise((resolve, reject) => {
-            const req = http.request(options, res => {
+            const req = http.request(options, (res) => {
                 res.on('end', () => {
                     resolve();
                 });