@alfalab/core-components-steps 1.1.4 → 1.1.6

package/Component.js

@@ -3,6 +3,7 @@
 var React = require('react');
 var cn = require('classnames');
 var components_step_Component = require('./components/step/Component.js');
+require('tslib');
 require('@alfalab/hooks');
 require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
 require('@alfalab/icons-glyph/ClockMIcon');
@@ -15,7 +16,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"steps__component_1iwpf","vertical":"steps__vertical_1iwpf"};
+var styles = {"component":"steps__component_tjr9k","vertical":"steps__vertical_tjr9k"};
 require('./index.css')
 
 var Steps = function (_a) {

package/components/step/Component.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var hooks = require('@alfalab/hooks');
@@ -14,34 +15,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s)
-                if (Object.prototype.hasOwnProperty.call(s, p))
-                    t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-var styles = {"step":"steps__step_e4b5n","vertical":"steps__vertical_e4b5n","interactive":"steps__interactive_e4b5n","disabled":"steps__disabled_e4b5n","text":"steps__text_e4b5n","indicator":"steps__indicator_e4b5n","option":"steps__option_e4b5n","dash":"steps__dash_e4b5n","completed":"steps__completed_e4b5n","focused":"steps__focused_e4b5n","selected":"steps__selected_e4b5n","checkbox":"steps__checkbox_e4b5n","dot":"steps__dot_e4b5n","error":"steps__error_e4b5n","unordered":"steps__unordered_e4b5n","completedIndicator":"steps__completedIndicator_e4b5n"};
+var styles = {"step":"steps__step_y0cu8","vertical":"steps__vertical_y0cu8","interactive":"steps__interactive_y0cu8","disabled":"steps__disabled_y0cu8","text":"steps__text_y0cu8","indicator":"steps__indicator_y0cu8","option":"steps__option_y0cu8","dash":"steps__dash_y0cu8","completed":"steps__completed_y0cu8","focused":"steps__focused_y0cu8","selected":"steps__selected_y0cu8","checkbox":"steps__checkbox_y0cu8","dot":"steps__dot_y0cu8","error":"steps__error_y0cu8","unordered":"steps__unordered_y0cu8","completedIndicator":"steps__completedIndicator_y0cu8"};
 require('./index.css')
 
 var Step = function (_a) {
@@ -50,7 +24,7 @@ var Step = function (_a) {
     var stepRef = React.useRef(null);
     var focused = hooks.useFocus(stepRef, 'keyboard')[0];
     var handleButtonClick = function () {
-        if (!disabled && onClick) {
+        if (!disabled && interactive && onClick) {
             onClick(stepNumber);
         }
     };
@@ -66,7 +40,7 @@ var Step = function (_a) {
     };
     var getStepIndicator = function () {
         if (customStepIndicator) {
-            return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, __assign({}, customStepIndicator));
+            return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, tslib.__assign({}, customStepIndicator));
         }
         if (isError) {
             return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'negative', content: React__default.default.createElement(ExclamationCircleMIcon.ExclamationCircleMIcon, null) });

package/components/step/index.css

@@ -1,5 +1,6 @@
-/* hash: 1teo0 */
+/* hash: 1a6jp */
 :root {
+} /* deprecated */ :root {
     --color-light-border-link: #007aff;
     --color-light-border-primary: #dbdee1;
     --color-light-graphic-positive: #2fc26e;
@@ -9,57 +10,47 @@
     --color-light-text-primary: #0b1f35;
     --color-light-bg-primary-inverted-alpha-7: rgba(11, 31, 53, 0.07);
     --color-light-bg-primary-inverted-alpha-15: rgba(11, 31, 53, 0.15);
-}
-:root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+    --border-radius-circle: 50%;
+} :root {
     --gap-3xs: 2px;
     --gap-2xs: 4px;
     --gap-xs: 8px;
-}
-:root {
-    --border-radius-circle: 50%;
-}
-:root {
+} :root {
+} :root {
     --focus-color: var(--color-light-border-link);
-}
-:root {
+} :root {
     --steps-option-svg-color: var(--color-light-graphic-positive);
     --steps-dash-border: 2px solid var(--color-light-graphic-positive);
-}
-.steps__step_e4b5n {
+} .steps__step_y0cu8 {
     display: flex;
     outline: none
-}
-.steps__step_e4b5n:not(.steps__vertical_e4b5n) {
+} .steps__step_y0cu8:not(.steps__vertical_y0cu8) {
         align-items: center;
-    }
-.steps__step_e4b5n.steps__interactive_e4b5n:not(.steps__disabled_e4b5n):hover {
+    } .steps__step_y0cu8.steps__interactive_y0cu8:not(.steps__disabled_y0cu8):hover {
     cursor: pointer;
-}
-.steps__step_e4b5n.steps__disabled_e4b5n:hover .steps__text_e4b5n {
+} .steps__step_y0cu8.steps__disabled_y0cu8:hover .steps__text_y0cu8 {
         background: unset;
-    }
-.steps__step_e4b5n.steps__disabled_e4b5n .steps__indicator_e4b5n {
+    } .steps__step_y0cu8.steps__disabled_y0cu8 .steps__indicator_y0cu8 {
         cursor: unset;
-    }
-.steps__indicator_e4b5n {
+    } .steps__indicator_y0cu8 {
     cursor: pointer;
     display: flex;
     align-items: center;
     margin-right: var(--gap-2xs)
-}
-.steps__indicator_e4b5n.steps__vertical_e4b5n {
+} .steps__indicator_y0cu8.steps__vertical_y0cu8 {
         flex-direction: column;
         margin-right: var(--gap-xs);
-    }
-.steps__option_e4b5n {
+    } .steps__option_y0cu8 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 700;
@@ -72,31 +63,25 @@
     min-width: 24px;
     height: 24px;
     border-radius: var(--border-radius-circle)
-}
-.steps__option_e4b5n.steps__vertical_e4b5n {
+} .steps__option_y0cu8.steps__vertical_y0cu8 {
         margin-top: var(--gap-xs);
-    }
-.steps__dash_e4b5n {
+    } .steps__dash_y0cu8 {
     flex: 1 1 auto;
     min-width: 24px;
     border-top: 2px solid var(--color-light-border-primary);
     margin-right: var(--gap-xs)
-}
-.steps__dash_e4b5n.steps__completed_e4b5n {
+} .steps__dash_y0cu8.steps__completed_y0cu8 {
         border-top: var(--steps-dash-border);
-    }
-.steps__dash_e4b5n.steps__vertical_e4b5n {
+    } .steps__dash_y0cu8.steps__vertical_y0cu8 {
         min-width: unset;
         min-height: 24px;
         margin-right: 0;
         margin-top: var(--gap-xs);
         border-left: 2px solid var(--color-light-border-primary);
         border-top: none;
-    }
-.steps__dash_e4b5n.steps__completed_e4b5n.steps__vertical_e4b5n {
+    } .steps__dash_y0cu8.steps__completed_y0cu8.steps__vertical_y0cu8 {
         border-left: var(--steps-dash-border);
-    }
-.steps__text_e4b5n {
+    } .steps__text_y0cu8 {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -106,25 +91,19 @@
     color: var(--color-light-text-primary);
     border-radius: var(--gap-xs);
     height: min-content
-}
-.steps__text_e4b5n.steps__interactive_e4b5n:not(.steps__disabled_e4b5n):hover {
+} .steps__text_y0cu8.steps__interactive_y0cu8:not(.steps__disabled_y0cu8):hover {
             background: var(--color-light-bg-primary-inverted-alpha-7);
-        }
-.steps__text_e4b5n.steps__interactive_e4b5n:not(.steps__disabled_e4b5n):active {
+        } .steps__text_y0cu8.steps__interactive_y0cu8:not(.steps__disabled_y0cu8):active {
             background: var(--color-light-bg-primary-inverted-alpha-15);
-        }
-.steps__focused_e4b5n {
+        } .steps__focused_y0cu8 {
     outline: var(--gap-3xs) solid var(--focus-color);
     outline-offset: var(--gap-3xs);
-}
-.steps__selected_e4b5n .steps__text_e4b5n {
+} .steps__selected_y0cu8 .steps__text_y0cu8 {
         color: var(--color-light-graphic-primary);
-    }
-.steps__selected_e4b5n .steps__option_e4b5n {
+    } .steps__selected_y0cu8 .steps__option_y0cu8 {
         color: var(--color-light-graphic-primary-inverted);
         background: var(--color-light-graphic-primary);
-    }
-.steps__checkbox_e4b5n {
+    } .steps__checkbox_y0cu8 {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -132,23 +111,18 @@
     width: 20px;
     height: 20px;
     border: 2px solid var(--color-light-graphic-quaternary);
-}
-.steps__dot_e4b5n {
+} .steps__dot_y0cu8 {
     width: 10px;
     height: 10px;
     border-radius: var(--border-radius-circle);
     background: var(--color-light-graphic-quaternary);
-}
-.steps__selected_e4b5n .steps__checkbox_e4b5n {
+} .steps__selected_y0cu8 .steps__checkbox_y0cu8 {
     border: 2px solid var(--color-light-graphic-primary)
-}
-.steps__selected_e4b5n .steps__checkbox_e4b5n .steps__dot_e4b5n {
+} .steps__selected_y0cu8 .steps__checkbox_y0cu8 .steps__dot_y0cu8 {
         background: var(--color-light-graphic-primary);
-    }
-.steps__option_e4b5n:not(.steps__error_e4b5n).steps__unordered_e4b5n {
+    } .steps__option_y0cu8:not(.steps__error_y0cu8).steps__unordered_y0cu8 {
     background: unset;
-}
-.steps__completedIndicator_e4b5n > [class*='positive'] {
+} .steps__completedIndicator_y0cu8 > [class*='positive'] {
     color: var(--steps-option-svg-color);
     background-color: var(--steps-option-svg-color);
 }

package/components/step/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var components_step_Component = require('./Component.js');
+require('tslib');
 require('react');
 require('classnames');
 require('@alfalab/hooks');

package/components/step-indicator/Component.js

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

package/components/step-indicator/index.css

@@ -1,4 +1,4 @@
-/* hash: 6m2l1 */
-.steps__component_oex2k {
+/* hash: 1mhye */
+.steps__component_7cufd {
     padding: 0;
 }

package/cssm/Component.js

@@ -4,6 +4,7 @@ var React = require('react');
 var cn = require('classnames');
 var components_step_Component = require('./components/step/Component.js');
 var styles = require('./index.module.css');
+require('tslib');
 require('@alfalab/hooks');
 require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
 require('@alfalab/icons-glyph/ClockMIcon');

package/cssm/components/step/Component.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var hooks = require('@alfalab/hooks');
@@ -17,40 +18,13 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s)
-                if (Object.prototype.hasOwnProperty.call(s, p))
-                    t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
 var Step = function (_a) {
     var _b, _c, _d, _e;
     var children = _a.children, stepNumber = _a.stepNumber, isSelected = _a.isSelected, disabled = _a.disabled, ordered = _a.ordered, isPositive = _a.isPositive, isError = _a.isError, isWarning = _a.isWarning, isWaiting = _a.isWaiting, customStepIndicator = _a.customStepIndicator, isStepCompleted = _a.isStepCompleted, onClick = _a.onClick, interactive = _a.interactive, isVerticalAlign = _a.isVerticalAlign, isNotLastStep = _a.isNotLastStep;
     var stepRef = React.useRef(null);
     var focused = hooks.useFocus(stepRef, 'keyboard')[0];
     var handleButtonClick = function () {
-        if (!disabled && onClick) {
+        if (!disabled && interactive && onClick) {
             onClick(stepNumber);
         }
     };
@@ -66,7 +40,7 @@ var Step = function (_a) {
     };
     var getStepIndicator = function () {
         if (customStepIndicator) {
-            return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, __assign({}, customStepIndicator));
+            return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, tslib.__assign({}, customStepIndicator));
         }
         if (isError) {
             return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'negative', content: React__default.default.createElement(ExclamationCircleMIcon.ExclamationCircleMIcon, null) });

package/cssm/components/step/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var components_step_Component = require('./Component.js');
+require('tslib');
 require('react');
 require('classnames');
 require('@alfalab/hooks');

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

@@ -1,4 +1,5 @@
 :root {
+} /* deprecated */ :root {
     --color-light-border-link: #007aff;
     --color-light-border-primary: #dbdee1;
     --color-light-graphic-positive: #2fc26e;
@@ -8,57 +9,47 @@
     --color-light-text-primary: #0b1f35;
     --color-light-bg-primary-inverted-alpha-7: rgba(11, 31, 53, 0.07);
     --color-light-bg-primary-inverted-alpha-15: rgba(11, 31, 53, 0.15);
-}
-:root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+    --border-radius-circle: 50%;
+} :root {
     --gap-3xs: 2px;
     --gap-2xs: 4px;
     --gap-xs: 8px;
-}
-:root {
-    --border-radius-circle: 50%;
-}
-:root {
+} :root {
+} :root {
     --focus-color: var(--color-light-border-link);
-}
-:root {
+} :root {
     --steps-option-svg-color: var(--color-light-graphic-positive);
     --steps-dash-border: 2px solid var(--color-light-graphic-positive);
-}
-.step {
+} .step {
     display: flex;
     outline: none
-}
-.step:not(.vertical) {
+} .step:not(.vertical) {
         align-items: center;
-    }
-.step.interactive:not(.disabled):hover {
+    } .step.interactive:not(.disabled):hover {
     cursor: pointer;
-}
-.step.disabled:hover .text {
+} .step.disabled:hover .text {
         background: unset;
-    }
-.step.disabled .indicator {
+    } .step.disabled .indicator {
         cursor: unset;
-    }
-.indicator {
+    } .indicator {
     cursor: pointer;
     display: flex;
     align-items: center;
     margin-right: var(--gap-2xs)
-}
-.indicator.vertical {
+} .indicator.vertical {
         flex-direction: column;
         margin-right: var(--gap-xs);
-    }
-.option {
+    } .option {
     font-size: 14px;
     line-height: 20px;
     font-weight: 700;
@@ -71,31 +62,25 @@
     min-width: 24px;
     height: 24px;
     border-radius: var(--border-radius-circle)
-}
-.option.vertical {
+} .option.vertical {
         margin-top: var(--gap-xs);
-    }
-.dash {
+    } .dash {
     flex: 1 1 auto;
     min-width: 24px;
     border-top: 2px solid var(--color-light-border-primary);
     margin-right: var(--gap-xs)
-}
-.dash.completed {
+} .dash.completed {
         border-top: var(--steps-dash-border);
-    }
-.dash.vertical {
+    } .dash.vertical {
         min-width: unset;
         min-height: 24px;
         margin-right: 0;
         margin-top: var(--gap-xs);
         border-left: 2px solid var(--color-light-border-primary);
         border-top: none;
-    }
-.dash.completed.vertical {
+    } .dash.completed.vertical {
         border-left: var(--steps-dash-border);
-    }
-.text {
+    } .text {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -105,25 +90,19 @@
     color: var(--color-light-text-primary);
     border-radius: var(--gap-xs);
     height: min-content
-}
-.text.interactive:not(.disabled):hover {
+} .text.interactive:not(.disabled):hover {
             background: var(--color-light-bg-primary-inverted-alpha-7);
-        }
-.text.interactive:not(.disabled):active {
+        } .text.interactive:not(.disabled):active {
             background: var(--color-light-bg-primary-inverted-alpha-15);
-        }
-.focused {
+        } .focused {
     outline: var(--gap-3xs) solid var(--focus-color);
     outline-offset: var(--gap-3xs);
-}
-.selected .text {
+} .selected .text {
         color: var(--color-light-graphic-primary);
-    }
-.selected .option {
+    } .selected .option {
         color: var(--color-light-graphic-primary-inverted);
         background: var(--color-light-graphic-primary);
-    }
-.checkbox {
+    } .checkbox {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -131,23 +110,18 @@
     width: 20px;
     height: 20px;
     border: 2px solid var(--color-light-graphic-quaternary);
-}
-.dot {
+} .dot {
     width: 10px;
     height: 10px;
     border-radius: var(--border-radius-circle);
     background: var(--color-light-graphic-quaternary);
-}
-.selected .checkbox {
+} .selected .checkbox {
     border: 2px solid var(--color-light-graphic-primary)
-}
-.selected .checkbox .dot {
+} .selected .checkbox .dot {
         background: var(--color-light-graphic-primary);
-    }
-.option:not(.error).unordered {
+    } .option:not(.error).unordered {
     background: unset;
-}
-.completedIndicator > [class*='positive'] {
+} .completedIndicator > [class*='positive'] {
     color: var(--steps-option-svg-color);
     background-color: var(--steps-option-svg-color);
 }

package/cssm/index.js

@@ -4,6 +4,7 @@ var Component = require('./Component.js');
 require('react');
 require('classnames');
 require('./components/step/Component.js');
+require('tslib');
 require('@alfalab/hooks');
 require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
 require('@alfalab/icons-glyph/ClockMIcon');

package/cssm/index.module.css

@@ -1,17 +1,23 @@
 :root {
+} /* deprecated */ :root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-.component {
+} :root {
+} :root {
+} :root {
+} :root {
+} .component {
     display: flex;
     align-items: center;
     flex-direction: row
-}
-.component.vertical {
+} .component.vertical {
         flex-direction: column;
         align-items: flex-start;
     }

package/esm/Component.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import cn from 'classnames';
 import { Step } from './components/step/Component.js';
+import 'tslib';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/ClockMIcon';
@@ -8,7 +9,7 @@ import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import './components/step-indicator/Component.js';
 import '@alfalab/core-components-badge/esm';
 
-var styles = {"component":"steps__component_1iwpf","vertical":"steps__vertical_1iwpf"};
+var styles = {"component":"steps__component_tjr9k","vertical":"steps__vertical_tjr9k"};
 require('./index.css')
 
 var Steps = function (_a) {

package/esm/components/step/Component.js

@@ -1,3 +1,4 @@
+import { __assign } from 'tslib';
 import React, { useRef } from 'react';
 import cn from 'classnames';
 import { useFocus } from '@alfalab/hooks';
@@ -7,34 +8,7 @@ import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMI
 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
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s)
-                if (Object.prototype.hasOwnProperty.call(s, p))
-                    t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-var styles = {"step":"steps__step_e4b5n","vertical":"steps__vertical_e4b5n","interactive":"steps__interactive_e4b5n","disabled":"steps__disabled_e4b5n","text":"steps__text_e4b5n","indicator":"steps__indicator_e4b5n","option":"steps__option_e4b5n","dash":"steps__dash_e4b5n","completed":"steps__completed_e4b5n","focused":"steps__focused_e4b5n","selected":"steps__selected_e4b5n","checkbox":"steps__checkbox_e4b5n","dot":"steps__dot_e4b5n","error":"steps__error_e4b5n","unordered":"steps__unordered_e4b5n","completedIndicator":"steps__completedIndicator_e4b5n"};
+var styles = {"step":"steps__step_y0cu8","vertical":"steps__vertical_y0cu8","interactive":"steps__interactive_y0cu8","disabled":"steps__disabled_y0cu8","text":"steps__text_y0cu8","indicator":"steps__indicator_y0cu8","option":"steps__option_y0cu8","dash":"steps__dash_y0cu8","completed":"steps__completed_y0cu8","focused":"steps__focused_y0cu8","selected":"steps__selected_y0cu8","checkbox":"steps__checkbox_y0cu8","dot":"steps__dot_y0cu8","error":"steps__error_y0cu8","unordered":"steps__unordered_y0cu8","completedIndicator":"steps__completedIndicator_y0cu8"};
 require('./index.css')
 
 var Step = function (_a) {
@@ -43,7 +17,7 @@ var Step = function (_a) {
     var stepRef = useRef(null);
     var focused = useFocus(stepRef, 'keyboard')[0];
     var handleButtonClick = function () {
-        if (!disabled && onClick) {
+        if (!disabled && interactive && onClick) {
             onClick(stepNumber);
         }
     };

package/esm/components/step/index.css

@@ -1,5 +1,6 @@
-/* hash: 1teo0 */
+/* hash: 1a6jp */
 :root {
+} /* deprecated */ :root {
     --color-light-border-link: #007aff;
     --color-light-border-primary: #dbdee1;
     --color-light-graphic-positive: #2fc26e;
@@ -9,57 +10,47 @@
     --color-light-text-primary: #0b1f35;
     --color-light-bg-primary-inverted-alpha-7: rgba(11, 31, 53, 0.07);
     --color-light-bg-primary-inverted-alpha-15: rgba(11, 31, 53, 0.15);
-}
-:root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+    --border-radius-circle: 50%;
+} :root {
     --gap-3xs: 2px;
     --gap-2xs: 4px;
     --gap-xs: 8px;
-}
-:root {
-    --border-radius-circle: 50%;
-}
-:root {
+} :root {
+} :root {
     --focus-color: var(--color-light-border-link);
-}
-:root {
+} :root {
     --steps-option-svg-color: var(--color-light-graphic-positive);
     --steps-dash-border: 2px solid var(--color-light-graphic-positive);
-}
-.steps__step_e4b5n {
+} .steps__step_y0cu8 {
     display: flex;
     outline: none
-}
-.steps__step_e4b5n:not(.steps__vertical_e4b5n) {
+} .steps__step_y0cu8:not(.steps__vertical_y0cu8) {
         align-items: center;
-    }
-.steps__step_e4b5n.steps__interactive_e4b5n:not(.steps__disabled_e4b5n):hover {
+    } .steps__step_y0cu8.steps__interactive_y0cu8:not(.steps__disabled_y0cu8):hover {
     cursor: pointer;
-}
-.steps__step_e4b5n.steps__disabled_e4b5n:hover .steps__text_e4b5n {
+} .steps__step_y0cu8.steps__disabled_y0cu8:hover .steps__text_y0cu8 {
         background: unset;
-    }
-.steps__step_e4b5n.steps__disabled_e4b5n .steps__indicator_e4b5n {
+    } .steps__step_y0cu8.steps__disabled_y0cu8 .steps__indicator_y0cu8 {
         cursor: unset;
-    }
-.steps__indicator_e4b5n {
+    } .steps__indicator_y0cu8 {
     cursor: pointer;
     display: flex;
     align-items: center;
     margin-right: var(--gap-2xs)
-}
-.steps__indicator_e4b5n.steps__vertical_e4b5n {
+} .steps__indicator_y0cu8.steps__vertical_y0cu8 {
         flex-direction: column;
         margin-right: var(--gap-xs);
-    }
-.steps__option_e4b5n {
+    } .steps__option_y0cu8 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 700;
@@ -72,31 +63,25 @@
     min-width: 24px;
     height: 24px;
     border-radius: var(--border-radius-circle)
-}
-.steps__option_e4b5n.steps__vertical_e4b5n {
+} .steps__option_y0cu8.steps__vertical_y0cu8 {
         margin-top: var(--gap-xs);
-    }
-.steps__dash_e4b5n {
+    } .steps__dash_y0cu8 {
     flex: 1 1 auto;
     min-width: 24px;
     border-top: 2px solid var(--color-light-border-primary);
     margin-right: var(--gap-xs)
-}
-.steps__dash_e4b5n.steps__completed_e4b5n {
+} .steps__dash_y0cu8.steps__completed_y0cu8 {
         border-top: var(--steps-dash-border);
-    }
-.steps__dash_e4b5n.steps__vertical_e4b5n {
+    } .steps__dash_y0cu8.steps__vertical_y0cu8 {
         min-width: unset;
         min-height: 24px;
         margin-right: 0;
         margin-top: var(--gap-xs);
         border-left: 2px solid var(--color-light-border-primary);
         border-top: none;
-    }
-.steps__dash_e4b5n.steps__completed_e4b5n.steps__vertical_e4b5n {
+    } .steps__dash_y0cu8.steps__completed_y0cu8.steps__vertical_y0cu8 {
         border-left: var(--steps-dash-border);
-    }
-.steps__text_e4b5n {
+    } .steps__text_y0cu8 {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -106,25 +91,19 @@
     color: var(--color-light-text-primary);
     border-radius: var(--gap-xs);
     height: min-content
-}
-.steps__text_e4b5n.steps__interactive_e4b5n:not(.steps__disabled_e4b5n):hover {
+} .steps__text_y0cu8.steps__interactive_y0cu8:not(.steps__disabled_y0cu8):hover {
             background: var(--color-light-bg-primary-inverted-alpha-7);
-        }
-.steps__text_e4b5n.steps__interactive_e4b5n:not(.steps__disabled_e4b5n):active {
+        } .steps__text_y0cu8.steps__interactive_y0cu8:not(.steps__disabled_y0cu8):active {
             background: var(--color-light-bg-primary-inverted-alpha-15);
-        }
-.steps__focused_e4b5n {
+        } .steps__focused_y0cu8 {
     outline: var(--gap-3xs) solid var(--focus-color);
     outline-offset: var(--gap-3xs);
-}
-.steps__selected_e4b5n .steps__text_e4b5n {
+} .steps__selected_y0cu8 .steps__text_y0cu8 {
         color: var(--color-light-graphic-primary);
-    }
-.steps__selected_e4b5n .steps__option_e4b5n {
+    } .steps__selected_y0cu8 .steps__option_y0cu8 {
         color: var(--color-light-graphic-primary-inverted);
         background: var(--color-light-graphic-primary);
-    }
-.steps__checkbox_e4b5n {
+    } .steps__checkbox_y0cu8 {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -132,23 +111,18 @@
     width: 20px;
     height: 20px;
     border: 2px solid var(--color-light-graphic-quaternary);
-}
-.steps__dot_e4b5n {
+} .steps__dot_y0cu8 {
     width: 10px;
     height: 10px;
     border-radius: var(--border-radius-circle);
     background: var(--color-light-graphic-quaternary);
-}
-.steps__selected_e4b5n .steps__checkbox_e4b5n {
+} .steps__selected_y0cu8 .steps__checkbox_y0cu8 {
     border: 2px solid var(--color-light-graphic-primary)
-}
-.steps__selected_e4b5n .steps__checkbox_e4b5n .steps__dot_e4b5n {
+} .steps__selected_y0cu8 .steps__checkbox_y0cu8 .steps__dot_y0cu8 {
         background: var(--color-light-graphic-primary);
-    }
-.steps__option_e4b5n:not(.steps__error_e4b5n).steps__unordered_e4b5n {
+    } .steps__option_y0cu8:not(.steps__error_y0cu8).steps__unordered_y0cu8 {
     background: unset;
-}
-.steps__completedIndicator_e4b5n > [class*='positive'] {
+} .steps__completedIndicator_y0cu8 > [class*='positive'] {
     color: var(--steps-option-svg-color);
     background-color: var(--steps-option-svg-color);
 }

package/esm/components/step/index.js

@@ -1,4 +1,5 @@
 export { Step } from './Component.js';
+import 'tslib';
 import 'react';
 import 'classnames';
 import '@alfalab/hooks';

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

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

@@ -1,4 +1,4 @@
-/* hash: 6m2l1 */
-.steps__component_oex2k {
+/* hash: 1mhye */
+.steps__component_7cufd {
     padding: 0;
 }

package/esm/index.css

@@ -1,18 +1,24 @@
-/* hash: kwtjc */
+/* hash: ht7qu */
 :root {
+} /* deprecated */ :root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-.steps__component_1iwpf {
+} :root {
+} :root {
+} :root {
+} :root {
+} .steps__component_tjr9k {
     display: flex;
     align-items: center;
     flex-direction: row
-}
-.steps__component_1iwpf.steps__vertical_1iwpf {
+} .steps__component_tjr9k.steps__vertical_tjr9k {
         flex-direction: column;
         align-items: flex-start;
     }

package/esm/index.js

@@ -2,6 +2,7 @@ export { Steps } from './Component.js';
 import 'react';
 import 'classnames';
 import './components/step/Component.js';
+import 'tslib';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
 import '@alfalab/icons-glyph/ClockMIcon';

package/index.css

@@ -1,18 +1,24 @@
-/* hash: kwtjc */
+/* hash: ht7qu */
 :root {
+} /* deprecated */ :root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-.steps__component_1iwpf {
+} :root {
+} :root {
+} :root {
+} :root {
+} .steps__component_tjr9k {
     display: flex;
     align-items: center;
     flex-direction: row
-}
-.steps__component_1iwpf.steps__vertical_1iwpf {
+} .steps__component_tjr9k.steps__vertical_tjr9k {
         flex-direction: column;
         align-items: flex-start;
     }

package/index.js

@@ -4,6 +4,7 @@ var Component = require('./Component.js');
 require('react');
 require('classnames');
 require('./components/step/Component.js');
+require('tslib');
 require('@alfalab/hooks');
 require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
 require('@alfalab/icons-glyph/ClockMIcon');

package/modern/Component.js

@@ -8,7 +8,7 @@ import '@alfalab/icons-glyph/ExclamationCircleMIcon';
 import './components/step-indicator/Component.js';
 import '@alfalab/core-components-badge/modern';
 
-const styles = {"component":"steps__component_1iwpf","vertical":"steps__vertical_1iwpf"};
+const styles = {"component":"steps__component_tjr9k","vertical":"steps__vertical_tjr9k"};
 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

@@ -7,14 +7,14 @@ import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMI
 import { StepIndicator } from '../step-indicator/Component.js';
 import '@alfalab/core-components-badge/modern';
 
-const styles = {"step":"steps__step_e4b5n","vertical":"steps__vertical_e4b5n","interactive":"steps__interactive_e4b5n","disabled":"steps__disabled_e4b5n","text":"steps__text_e4b5n","indicator":"steps__indicator_e4b5n","option":"steps__option_e4b5n","dash":"steps__dash_e4b5n","completed":"steps__completed_e4b5n","focused":"steps__focused_e4b5n","selected":"steps__selected_e4b5n","checkbox":"steps__checkbox_e4b5n","dot":"steps__dot_e4b5n","error":"steps__error_e4b5n","unordered":"steps__unordered_e4b5n","completedIndicator":"steps__completedIndicator_e4b5n"};
+const styles = {"step":"steps__step_y0cu8","vertical":"steps__vertical_y0cu8","interactive":"steps__interactive_y0cu8","disabled":"steps__disabled_y0cu8","text":"steps__text_y0cu8","indicator":"steps__indicator_y0cu8","option":"steps__option_y0cu8","dash":"steps__dash_y0cu8","completed":"steps__completed_y0cu8","focused":"steps__focused_y0cu8","selected":"steps__selected_y0cu8","checkbox":"steps__checkbox_y0cu8","dot":"steps__dot_y0cu8","error":"steps__error_y0cu8","unordered":"steps__unordered_y0cu8","completedIndicator":"steps__completedIndicator_y0cu8"};
 require('./index.css')
 
 const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive, isError, isWarning, isWaiting, customStepIndicator, isStepCompleted, onClick, interactive, isVerticalAlign, isNotLastStep, }) => {
     const stepRef = useRef(null);
     const [focused] = useFocus(stepRef, 'keyboard');
     const handleButtonClick = () => {
-        if (!disabled && onClick) {
+        if (!disabled && interactive && onClick) {
             onClick(stepNumber);
         }
     };

package/modern/components/step/index.css

@@ -1,5 +1,6 @@
-/* hash: 1teo0 */
+/* hash: 1a6jp */
 :root {
+} /* deprecated */ :root {
     --color-light-border-link: #007aff;
     --color-light-border-primary: #dbdee1;
     --color-light-graphic-positive: #2fc26e;
@@ -9,57 +10,47 @@
     --color-light-text-primary: #0b1f35;
     --color-light-bg-primary-inverted-alpha-7: rgba(11, 31, 53, 0.07);
     --color-light-bg-primary-inverted-alpha-15: rgba(11, 31, 53, 0.15);
-}
-:root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+    --border-radius-circle: 50%;
+} :root {
     --gap-3xs: 2px;
     --gap-2xs: 4px;
     --gap-xs: 8px;
-}
-:root {
-    --border-radius-circle: 50%;
-}
-:root {
+} :root {
+} :root {
     --focus-color: var(--color-light-border-link);
-}
-:root {
+} :root {
     --steps-option-svg-color: var(--color-light-graphic-positive);
     --steps-dash-border: 2px solid var(--color-light-graphic-positive);
-}
-.steps__step_e4b5n {
+} .steps__step_y0cu8 {
     display: flex;
     outline: none
-}
-.steps__step_e4b5n:not(.steps__vertical_e4b5n) {
+} .steps__step_y0cu8:not(.steps__vertical_y0cu8) {
         align-items: center;
-    }
-.steps__step_e4b5n.steps__interactive_e4b5n:not(.steps__disabled_e4b5n):hover {
+    } .steps__step_y0cu8.steps__interactive_y0cu8:not(.steps__disabled_y0cu8):hover {
     cursor: pointer;
-}
-.steps__step_e4b5n.steps__disabled_e4b5n:hover .steps__text_e4b5n {
+} .steps__step_y0cu8.steps__disabled_y0cu8:hover .steps__text_y0cu8 {
         background: unset;
-    }
-.steps__step_e4b5n.steps__disabled_e4b5n .steps__indicator_e4b5n {
+    } .steps__step_y0cu8.steps__disabled_y0cu8 .steps__indicator_y0cu8 {
         cursor: unset;
-    }
-.steps__indicator_e4b5n {
+    } .steps__indicator_y0cu8 {
     cursor: pointer;
     display: flex;
     align-items: center;
     margin-right: var(--gap-2xs)
-}
-.steps__indicator_e4b5n.steps__vertical_e4b5n {
+} .steps__indicator_y0cu8.steps__vertical_y0cu8 {
         flex-direction: column;
         margin-right: var(--gap-xs);
-    }
-.steps__option_e4b5n {
+    } .steps__option_y0cu8 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 700;
@@ -72,31 +63,25 @@
     min-width: 24px;
     height: 24px;
     border-radius: var(--border-radius-circle)
-}
-.steps__option_e4b5n.steps__vertical_e4b5n {
+} .steps__option_y0cu8.steps__vertical_y0cu8 {
         margin-top: var(--gap-xs);
-    }
-.steps__dash_e4b5n {
+    } .steps__dash_y0cu8 {
     flex: 1 1 auto;
     min-width: 24px;
     border-top: 2px solid var(--color-light-border-primary);
     margin-right: var(--gap-xs)
-}
-.steps__dash_e4b5n.steps__completed_e4b5n {
+} .steps__dash_y0cu8.steps__completed_y0cu8 {
         border-top: var(--steps-dash-border);
-    }
-.steps__dash_e4b5n.steps__vertical_e4b5n {
+    } .steps__dash_y0cu8.steps__vertical_y0cu8 {
         min-width: unset;
         min-height: 24px;
         margin-right: 0;
         margin-top: var(--gap-xs);
         border-left: 2px solid var(--color-light-border-primary);
         border-top: none;
-    }
-.steps__dash_e4b5n.steps__completed_e4b5n.steps__vertical_e4b5n {
+    } .steps__dash_y0cu8.steps__completed_y0cu8.steps__vertical_y0cu8 {
         border-left: var(--steps-dash-border);
-    }
-.steps__text_e4b5n {
+    } .steps__text_y0cu8 {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
@@ -106,25 +91,19 @@
     color: var(--color-light-text-primary);
     border-radius: var(--gap-xs);
     height: min-content
-}
-.steps__text_e4b5n.steps__interactive_e4b5n:not(.steps__disabled_e4b5n):hover {
+} .steps__text_y0cu8.steps__interactive_y0cu8:not(.steps__disabled_y0cu8):hover {
             background: var(--color-light-bg-primary-inverted-alpha-7);
-        }
-.steps__text_e4b5n.steps__interactive_e4b5n:not(.steps__disabled_e4b5n):active {
+        } .steps__text_y0cu8.steps__interactive_y0cu8:not(.steps__disabled_y0cu8):active {
             background: var(--color-light-bg-primary-inverted-alpha-15);
-        }
-.steps__focused_e4b5n {
+        } .steps__focused_y0cu8 {
     outline: var(--gap-3xs) solid var(--focus-color);
     outline-offset: var(--gap-3xs);
-}
-.steps__selected_e4b5n .steps__text_e4b5n {
+} .steps__selected_y0cu8 .steps__text_y0cu8 {
         color: var(--color-light-graphic-primary);
-    }
-.steps__selected_e4b5n .steps__option_e4b5n {
+    } .steps__selected_y0cu8 .steps__option_y0cu8 {
         color: var(--color-light-graphic-primary-inverted);
         background: var(--color-light-graphic-primary);
-    }
-.steps__checkbox_e4b5n {
+    } .steps__checkbox_y0cu8 {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -132,23 +111,18 @@
     width: 20px;
     height: 20px;
     border: 2px solid var(--color-light-graphic-quaternary);
-}
-.steps__dot_e4b5n {
+} .steps__dot_y0cu8 {
     width: 10px;
     height: 10px;
     border-radius: var(--border-radius-circle);
     background: var(--color-light-graphic-quaternary);
-}
-.steps__selected_e4b5n .steps__checkbox_e4b5n {
+} .steps__selected_y0cu8 .steps__checkbox_y0cu8 {
     border: 2px solid var(--color-light-graphic-primary)
-}
-.steps__selected_e4b5n .steps__checkbox_e4b5n .steps__dot_e4b5n {
+} .steps__selected_y0cu8 .steps__checkbox_y0cu8 .steps__dot_y0cu8 {
         background: var(--color-light-graphic-primary);
-    }
-.steps__option_e4b5n:not(.steps__error_e4b5n).steps__unordered_e4b5n {
+    } .steps__option_y0cu8:not(.steps__error_y0cu8).steps__unordered_y0cu8 {
     background: unset;
-}
-.steps__completedIndicator_e4b5n > [class*='positive'] {
+} .steps__completedIndicator_y0cu8 > [class*='positive'] {
     color: var(--steps-option-svg-color);
     background-color: var(--steps-option-svg-color);
 }

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

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

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

@@ -1,4 +1,4 @@
-/* hash: 6m2l1 */
-.steps__component_oex2k {
+/* hash: 1mhye */
+.steps__component_7cufd {
     padding: 0;
 }

package/modern/index.css

@@ -1,18 +1,24 @@
-/* hash: kwtjc */
+/* hash: ht7qu */
 :root {
+} /* deprecated */ :root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-.steps__component_1iwpf {
+} :root {
+} :root {
+} :root {
+} :root {
+} .steps__component_tjr9k {
     display: flex;
     align-items: center;
     flex-direction: row
-}
-.steps__component_1iwpf.steps__vertical_1iwpf {
+} .steps__component_tjr9k.steps__vertical_tjr9k {
         flex-direction: column;
         align-items: flex-start;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-steps",
-    "version": "1.1.4",
+    "version": "1.1.6",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -17,9 +17,10 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-badge": "^5.0.0",
+        "@alfalab/core-components-badge": "^5.0.1",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/icons-glyph": "^2.89.0",
-        "classnames": "^2.3.1"
+        "classnames": "^2.3.1",
+        "tslib": "^2.4.0"
     }
 }