@alfalab/core-components 46.1.0-beta.1 → 46.1.0-beta.2

package/shared/modern/index.js

@@ -9,7 +9,6 @@ export { hooks } from './hooks/index.js';
 export { os } from './os.js';
 export { dom } from './dom.js';
 export { exhaustiveCheck } from './exhaustiveCheck.js';
-export { PortalContext } from './context/PortalContext/PortalContext.js';
 import './hooks/useCustomWebkitScrollbar.js';
 import 'react';
 import '@alfalab/hooks';

package/side-panel/Component.responsive.js

@@ -40,5 +40,6 @@ var SidePanelResponsive = Object.assign(SidePanelResponsiveComponent, {
     Content: createResponsive(desktop_Component_desktop.SidePanelDesktop.Content, mobile_Component_mobile.SidePanelMobile.Content),
     Footer: createResponsive(desktop_Component_desktop.SidePanelDesktop.Footer, mobile_Component_mobile.SidePanelMobile.Footer),
 });
+SidePanelResponsiveComponent.displayName = 'SidePanelResponsiveComponent';
 
 exports.SidePanelResponsive = SidePanelResponsive;

package/side-panel/components/controls/Component.js

@@ -4,7 +4,7 @@ var React = require('react');
 var cn = require('classnames');
 var coreComponentsShared = require('../../../shared');
 var ResponsiveContext = require('../../ResponsiveContext.js');
-var layout_module = require('../../layout.module-2f2342c4.js');
+var layout_module = require('../../layout.module-5751c32b.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/side-panel/components/footer/Component.js

@@ -5,7 +5,7 @@ var cn = require('classnames');
 var coreComponentsShared = require('../../../shared');
 var Context = require('../../Context.js');
 var ResponsiveContext = require('../../ResponsiveContext.js');
-var layout_module = require('../../layout.module-2f2342c4.js');
+var layout_module = require('../../layout.module-5751c32b.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/side-panel/cssm/Component.responsive.js

@@ -40,5 +40,6 @@ var SidePanelResponsive = Object.assign(SidePanelResponsiveComponent, {
     Content: createResponsive(desktop_Component_desktop.SidePanelDesktop.Content, mobile_Component_mobile.SidePanelMobile.Content),
     Footer: createResponsive(desktop_Component_desktop.SidePanelDesktop.Footer, mobile_Component_mobile.SidePanelMobile.Footer),
 });
+SidePanelResponsiveComponent.displayName = 'SidePanelResponsiveComponent';
 
 exports.SidePanelResponsive = SidePanelResponsive;

package/side-panel/esm/Component.responsive.js

@@ -8,7 +8,7 @@ import { SidePanelDesktop } from './desktop/Component.desktop.js';
 import { SidePanelMobile } from './mobile/Component.mobile.js';
 import { ResponsiveContext } from './ResponsiveContext.js';
 import 'classnames';
-import './layout.module-eefb2f62.js';
+import './layout.module-0fa8570a.js';
 import '../../navigation-bar-private/esm';
 import './consts.js';
 import './Context.js';
@@ -48,5 +48,6 @@ var SidePanelResponsive = Object.assign(SidePanelResponsiveComponent, {
     Content: createResponsive(SidePanelDesktop.Content, SidePanelMobile.Content),
     Footer: createResponsive(SidePanelDesktop.Footer, SidePanelMobile.Footer),
 });
+SidePanelResponsiveComponent.displayName = 'SidePanelResponsiveComponent';
 
 export { SidePanelResponsive };

package/side-panel/esm/components/controls/Component.js

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import cn from 'classnames';
 import { getDataTestId } from '../../../../shared/esm';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-eefb2f62.js';
+import { l as layoutStyles } from '../../layout.module-0fa8570a.js';
 
 var styles = {"component":"side-panel__component_bvmww"};
 require('./index.css');

package/side-panel/esm/components/controls/index.js

@@ -3,4 +3,4 @@ import 'react';
 import 'classnames';
 import '../../../../shared/esm';
 import '../../ResponsiveContext.js';
-import '../../layout.module-eefb2f62.js';
+import '../../layout.module-0fa8570a.js';

package/side-panel/esm/components/footer/Component.desktop.js

@@ -7,7 +7,7 @@ import '../../../../shared/esm';
 import '../../Context.js';
 import '../../../../base-modal/esm';
 import '../../ResponsiveContext.js';
-import '../../layout.module-eefb2f62.js';
+import '../../layout.module-0fa8570a.js';
 
 var styles = {"sticky":"side-panel__sticky_1omej","size-500":"side-panel__size-500_1omej"};
 require('./desktop.css');

package/side-panel/esm/components/footer/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { getDataTestId } from '../../../../shared/esm';
 import { ModalContext } from '../../Context.js';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-eefb2f62.js';
+import { l as layoutStyles } from '../../layout.module-0fa8570a.js';
 import '../../../../base-modal/esm';
 
 var styles = {"footer":"side-panel__footer_1m37n","sticky":"side-panel__sticky_1m37n","highlighted":"side-panel__highlighted_1m37n"};

package/side-panel/esm/components/footer/Component.mobile.js

@@ -6,7 +6,7 @@ import '../../../../shared/esm';
 import '../../Context.js';
 import '../../../../base-modal/esm';
 import '../../ResponsiveContext.js';
-import '../../layout.module-eefb2f62.js';
+import '../../layout.module-0fa8570a.js';
 
 var styles = {"footer":"side-panel__footer_1um5g","sticky":"side-panel__sticky_1um5g"};
 require('./mobile.css');

package/side-panel/esm/desktop/Component.desktop.js

@@ -13,7 +13,7 @@ import '../components/content/Component.js';
 import '../../../shared/esm';
 import '../Context.js';
 import '../../../base-modal/esm';
-import '../layout.module-eefb2f62.js';
+import '../layout.module-0fa8570a.js';
 import '../components/footer/Component.js';
 import '../../../navigation-bar-private/esm';
 

package/side-panel/esm/desktop/index.js

@@ -12,7 +12,7 @@ import '../Context.js';
 import '../../../base-modal/esm';
 import '../ResponsiveContext.js';
 import '../components/controls/Component.js';
-import '../layout.module-eefb2f62.js';
+import '../layout.module-0fa8570a.js';
 import '../components/footer/Component.desktop.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';

package/side-panel/esm/index.js

@@ -6,7 +6,7 @@ import '../../shared/esm';
 import './components/controls/Component.js';
 import 'classnames';
 import './ResponsiveContext.js';
-import './layout.module-eefb2f62.js';
+import './layout.module-0fa8570a.js';
 import './components/header/Component.js';
 import '../../navigation-bar-private/esm';
 import './consts.js';

package/side-panel/esm/mobile/Component.mobile.js

@@ -10,7 +10,7 @@ import { ResponsiveContext } from '../ResponsiveContext.js';
 import '../components/content/Component.js';
 import '../../../shared/esm';
 import '../Context.js';
-import '../layout.module-eefb2f62.js';
+import '../layout.module-0fa8570a.js';
 import '../components/footer/Component.js';
 import '../../../navigation-bar-private/esm';
 import '../consts.js';

package/side-panel/esm/mobile/index.js

@@ -9,7 +9,7 @@ import '../../../shared/esm';
 import '../Context.js';
 import '../ResponsiveContext.js';
 import '../components/controls/Component.js';
-import '../layout.module-eefb2f62.js';
+import '../layout.module-0fa8570a.js';
 import '../components/footer/Component.mobile.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';

package/side-panel/modern/Component.responsive.js

@@ -7,7 +7,7 @@ import { SidePanelDesktop } from './desktop/Component.desktop.js';
 import { SidePanelMobile } from './mobile/Component.mobile.js';
 import { ResponsiveContext } from './ResponsiveContext.js';
 import 'classnames';
-import './layout.module-74819ea7.js';
+import './layout.module-bfab4815.js';
 import '../../navigation-bar-private/modern';
 import './consts.js';
 import './Context.js';
@@ -46,5 +46,6 @@ const SidePanelResponsive = Object.assign(SidePanelResponsiveComponent, {
     Content: createResponsive(SidePanelDesktop.Content, SidePanelMobile.Content),
     Footer: createResponsive(SidePanelDesktop.Footer, SidePanelMobile.Footer),
 });
+SidePanelResponsiveComponent.displayName = 'SidePanelResponsiveComponent';
 
 export { SidePanelResponsive };

package/side-panel/modern/components/controls/Component.js

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import cn from 'classnames';
 import { getDataTestId } from '../../../../shared/modern';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-74819ea7.js';
+import { l as layoutStyles } from '../../layout.module-bfab4815.js';
 
 const styles = {"component":"side-panel__component_bvmww"};
 require('./index.css');

package/side-panel/modern/components/controls/index.js

@@ -3,4 +3,4 @@ import 'react';
 import 'classnames';
 import '../../../../shared/modern';
 import '../../ResponsiveContext.js';
-import '../../layout.module-74819ea7.js';
+import '../../layout.module-bfab4815.js';

package/side-panel/modern/components/footer/Component.desktop.js

@@ -6,7 +6,7 @@ import '../../../../shared/modern';
 import '../../Context.js';
 import '../../../../base-modal/modern';
 import '../../ResponsiveContext.js';
-import '../../layout.module-74819ea7.js';
+import '../../layout.module-bfab4815.js';
 
 const styles = {"sticky":"side-panel__sticky_1omej","size-500":"side-panel__size-500_1omej"};
 require('./desktop.css');

package/side-panel/modern/components/footer/Component.js

@@ -3,7 +3,7 @@ import cn from 'classnames';
 import { getDataTestId } from '../../../../shared/modern';
 import { ModalContext } from '../../Context.js';
 import { ResponsiveContext } from '../../ResponsiveContext.js';
-import { l as layoutStyles } from '../../layout.module-74819ea7.js';
+import { l as layoutStyles } from '../../layout.module-bfab4815.js';
 import '../../../../base-modal/modern';
 
 const styles = {"footer":"side-panel__footer_1m37n","sticky":"side-panel__sticky_1m37n","highlighted":"side-panel__highlighted_1m37n"};

package/side-panel/modern/components/footer/Component.mobile.js

@@ -5,7 +5,7 @@ import '../../../../shared/modern';
 import '../../Context.js';
 import '../../../../base-modal/modern';
 import '../../ResponsiveContext.js';
-import '../../layout.module-74819ea7.js';
+import '../../layout.module-bfab4815.js';
 
 const styles = {"footer":"side-panel__footer_1um5g","sticky":"side-panel__sticky_1um5g"};
 require('./mobile.css');

package/side-panel/modern/desktop/Component.desktop.js

@@ -12,7 +12,7 @@ import '../components/content/Component.js';
 import '../../../shared/modern';
 import '../Context.js';
 import '../../../base-modal/modern';
-import '../layout.module-74819ea7.js';
+import '../layout.module-bfab4815.js';
 import '../components/footer/Component.js';
 import '../../../navigation-bar-private/modern';
 

package/side-panel/modern/desktop/index.js

@@ -11,7 +11,7 @@ import '../Context.js';
 import '../../../base-modal/modern';
 import '../ResponsiveContext.js';
 import '../components/controls/Component.js';
-import '../layout.module-74819ea7.js';
+import '../layout.module-bfab4815.js';
 import '../components/footer/Component.desktop.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';

package/side-panel/modern/index.js

@@ -5,7 +5,7 @@ import '../../shared/modern';
 import './components/controls/Component.js';
 import 'classnames';
 import './ResponsiveContext.js';
-import './layout.module-74819ea7.js';
+import './layout.module-bfab4815.js';
 import './components/header/Component.js';
 import '../../navigation-bar-private/modern';
 import './consts.js';

package/side-panel/modern/mobile/Component.mobile.js

@@ -9,7 +9,7 @@ import { ResponsiveContext } from '../ResponsiveContext.js';
 import '../components/content/Component.js';
 import '../../../shared/modern';
 import '../Context.js';
-import '../layout.module-74819ea7.js';
+import '../layout.module-bfab4815.js';
 import '../components/footer/Component.js';
 import '../../../navigation-bar-private/modern';
 import '../consts.js';

package/side-panel/modern/mobile/index.js

@@ -8,7 +8,7 @@ import '../../../shared/modern';
 import '../Context.js';
 import '../ResponsiveContext.js';
 import '../components/controls/Component.js';
-import '../layout.module-74819ea7.js';
+import '../layout.module-bfab4815.js';
 import '../components/footer/Component.mobile.js';
 import '../components/footer/Component.js';
 import '../components/header/Component.js';

package/slider-input/Component.js

@@ -56,5 +56,6 @@ var SliderInput = React.forwardRef(function (_a, ref) {
             return React.isValidElement(stepLabel) ? (React.cloneElement(stepLabel, { key: i })) : (React__default.default.createElement("span", { key: i.toString() }, stepLabel));
         })))));
 });
+SliderInput.displayName = 'SliderInput';
 
 exports.SliderInput = SliderInput;

package/slider-input/cssm/Component.js

@@ -55,5 +55,6 @@ var SliderInput = React.forwardRef(function (_a, ref) {
             return React.isValidElement(stepLabel) ? (React.cloneElement(stepLabel, { key: i })) : (React__default.default.createElement("span", { key: i.toString() }, stepLabel));
         })))));
 });
+SliderInput.displayName = 'SliderInput';
 
 exports.SliderInput = SliderInput;

package/slider-input/esm/Component.js

@@ -49,5 +49,6 @@ var SliderInput = forwardRef(function (_a, ref) {
             return isValidElement(stepLabel) ? (cloneElement(stepLabel, { key: i })) : (React.createElement("span", { key: i.toString() }, stepLabel));
         })))));
 });
+SliderInput.displayName = 'SliderInput';
 
 export { SliderInput };

package/slider-input/modern/Component.js

@@ -44,5 +44,6 @@ const SliderInput = forwardRef(({ className, inputClassName, sliderClassName, st
                 rightAddons)) }),
         steps.length > 0 && !error && (React.createElement("div", { className: cn(styles.steps, stepsClassName) }, steps.map((stepLabel, i) => isValidElement(stepLabel) ? (cloneElement(stepLabel, { key: i })) : (React.createElement("span", { key: i.toString() }, stepLabel)))))));
 });
+SliderInput.displayName = 'SliderInput';
 
 export { SliderInput };

package/sortable-list/Component.js

@@ -104,5 +104,7 @@ var SortableList = React.forwardRef(function (_a, ref) {
         React__default.default.createElement(coreComponentsPortal.Portal, tslib.__assign({ immediateMount: true }, portalProps),
             React__default.default.createElement(core.DragOverlay, tslib.__assign({}, dragOverlayProps), activeId ? renderDragOverlay() : null))));
 });
+SortableList.displayName = 'SortableList';
+core.DragOverlay.displayName = 'DragOverlay';
 
 exports.SortableList = SortableList;

package/sortable-list/cssm/Component.js

@@ -103,5 +103,7 @@ var SortableList = React.forwardRef(function (_a, ref) {
         React__default.default.createElement(coreComponentsPortal.Portal, tslib.__assign({ immediateMount: true }, portalProps),
             React__default.default.createElement(core.DragOverlay, tslib.__assign({}, dragOverlayProps), activeId ? renderDragOverlay() : null))));
 });
+SortableList.displayName = 'SortableList';
+core.DragOverlay.displayName = 'DragOverlay';
 
 exports.SortableList = SortableList;

package/sortable-list/esm/Component.js

@@ -99,5 +99,7 @@ var SortableList = forwardRef(function (_a, ref) {
         React.createElement(Portal, __assign({ immediateMount: true }, portalProps),
             React.createElement(DragOverlay, __assign({}, dragOverlayProps), activeId ? renderDragOverlay() : null))));
 });
+SortableList.displayName = 'SortableList';
+DragOverlay.displayName = 'DragOverlay';
 
 export { SortableList };

package/sortable-list/modern/Component.js

@@ -89,5 +89,7 @@ const SortableList = forwardRef(({ className, itemClassName, itemContentClassNam
         React.createElement(Portal, { immediateMount: true, ...portalProps },
             React.createElement(DragOverlay, { ...dragOverlayProps }, activeId ? renderDragOverlay() : null))));
 });
+SortableList.displayName = 'SortableList';
+DragOverlay.displayName = 'DragOverlay';
 
 export { SortableList };

package/space/Component.js

@@ -55,5 +55,6 @@ var Space = React.forwardRef(function (props, ref) {
             rowGap: verticalSize / (divider ? 2 : 1),
         })), (wrap && !useCssGaps && { flexWrap: 'wrap', marginBottom: -verticalSize })), ref: ref }, nodes));
 });
+Space.displayName = 'Space';
 
 exports.Space = Space;

package/space/cssm/Component.js

@@ -54,5 +54,6 @@ var Space = React.forwardRef(function (props, ref) {
             rowGap: verticalSize / (divider ? 2 : 1),
         })), (wrap && !useCssGaps && { flexWrap: 'wrap', marginBottom: -verticalSize })), ref: ref }, nodes));
 });
+Space.displayName = 'Space';
 
 exports.Space = Space;

package/space/esm/Component.js

@@ -48,5 +48,6 @@ var Space = forwardRef(function (props, ref) {
             rowGap: verticalSize / (divider ? 2 : 1),
         })), (wrap && !useCssGaps && { flexWrap: 'wrap', marginBottom: -verticalSize })), ref: ref }, nodes));
 });
+Space.displayName = 'Space';
 
 export { Space };

package/space/modern/Component.js

@@ -45,5 +45,6 @@ const Space = forwardRef((props, ref) => {
             ...(wrap && !useCssGaps && { flexWrap: 'wrap', marginBottom: -verticalSize }),
         }, ref: ref }, nodes));
 });
+Space.displayName = 'Space';
 
 export { Space };

package/steps/Component.js

@@ -15,27 +15,26 @@ require('./index.css');
 var Steps = function (_a) {
     var _b;
     var className = _a.className, children = _a.children, _c = _a.defaultActiveStep, defaultActiveStep = _c === void 0 ? 1 : _c, activeStepProp = _a.activeStep, _d = _a.isMarkCompletedSteps, isMarkCompletedSteps = _d === void 0 ? true : _d, _e = _a.isVerticalAlign, isVerticalAlign = _e === void 0 ? false : _e, _f = _a.ordered, ordered = _f === void 0 ? true : _f, _g = _a.interactive, interactive = _g === void 0 ? true : _g, _h = _a.fullWidth, fullWidth = _h === void 0 ? false : _h, _j = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _j === void 0 ? 24 : _j, checkIsStepDisabled = _a.checkIsStepDisabled, checkIsStepError = _a.checkIsStepError, checkIsStepWarning = _a.checkIsStepWarning, checkIsStepWaiting = _a.checkIsStepWaiting, checkIsStepPositive = _a.checkIsStepPositive, checkIsStepCustom = _a.checkIsStepCustom, onChange = _a.onChange, dataTestId = _a.dataTestId;
-    var _k = React.useState(activeStepProp || defaultActiveStep), activeStep = _k[0], setActiveStep = _k[1];
+    var uncontrolled = activeStepProp === undefined;
+    var _k = React.useState(defaultActiveStep), activeStep = _k[0], setActiveStep = _k[1];
     var stepsLength = React__default.default.Children.count(children);
-    React.useEffect(function () {
-        if (activeStepProp) {
-            setActiveStep(activeStepProp);
-        }
-    }, [activeStepProp]);
     var handleStepClick = function (stepNumber) {
-        setActiveStep(stepNumber);
+        if (uncontrolled) {
+            setActiveStep(stepNumber);
+        }
         if (onChange) {
             onChange(stepNumber);
         }
     };
     if (!stepsLength)
         return null;
+    var visibleActiveStep = uncontrolled ? activeStep : activeStepProp;
     return (React__default.default.createElement("div", { className: cn__default.default(className, styles.component, (_b = {},
             _b[styles.vertical] = isVerticalAlign,
             _b)), "data-test-id": dataTestId }, React__default.default.Children.map(children, function (step, index) {
         var stepNumber = index + 1;
-        var isSelected = stepNumber === activeStep;
-        var isStepCompleted = isMarkCompletedSteps && stepNumber < activeStep;
+        var isSelected = stepNumber === visibleActiveStep;
+        var isStepCompleted = isMarkCompletedSteps && stepNumber < visibleActiveStep;
         var disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;
         var isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;
         var isError = checkIsStepError ? checkIsStepError(stepNumber) : false;

package/steps/cssm/Component.js

@@ -14,27 +14,26 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 var Steps = function (_a) {
     var _b;
     var className = _a.className, children = _a.children, _c = _a.defaultActiveStep, defaultActiveStep = _c === void 0 ? 1 : _c, activeStepProp = _a.activeStep, _d = _a.isMarkCompletedSteps, isMarkCompletedSteps = _d === void 0 ? true : _d, _e = _a.isVerticalAlign, isVerticalAlign = _e === void 0 ? false : _e, _f = _a.ordered, ordered = _f === void 0 ? true : _f, _g = _a.interactive, interactive = _g === void 0 ? true : _g, _h = _a.fullWidth, fullWidth = _h === void 0 ? false : _h, _j = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _j === void 0 ? 24 : _j, checkIsStepDisabled = _a.checkIsStepDisabled, checkIsStepError = _a.checkIsStepError, checkIsStepWarning = _a.checkIsStepWarning, checkIsStepWaiting = _a.checkIsStepWaiting, checkIsStepPositive = _a.checkIsStepPositive, checkIsStepCustom = _a.checkIsStepCustom, onChange = _a.onChange, dataTestId = _a.dataTestId;
-    var _k = React.useState(activeStepProp || defaultActiveStep), activeStep = _k[0], setActiveStep = _k[1];
+    var uncontrolled = activeStepProp === undefined;
+    var _k = React.useState(defaultActiveStep), activeStep = _k[0], setActiveStep = _k[1];
     var stepsLength = React__default.default.Children.count(children);
-    React.useEffect(function () {
-        if (activeStepProp) {
-            setActiveStep(activeStepProp);
-        }
-    }, [activeStepProp]);
     var handleStepClick = function (stepNumber) {
-        setActiveStep(stepNumber);
+        if (uncontrolled) {
+            setActiveStep(stepNumber);
+        }
         if (onChange) {
             onChange(stepNumber);
         }
     };
     if (!stepsLength)
         return null;
+    var visibleActiveStep = uncontrolled ? activeStep : activeStepProp;
     return (React__default.default.createElement("div", { className: cn__default.default(className, styles__default.default.component, (_b = {},
             _b[styles__default.default.vertical] = isVerticalAlign,
             _b)), "data-test-id": dataTestId }, React__default.default.Children.map(children, function (step, index) {
         var stepNumber = index + 1;
-        var isSelected = stepNumber === activeStep;
-        var isStepCompleted = isMarkCompletedSteps && stepNumber < activeStep;
+        var isSelected = stepNumber === visibleActiveStep;
+        var isStepCompleted = isMarkCompletedSteps && stepNumber < visibleActiveStep;
         var disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;
         var isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;
         var isError = checkIsStepError ? checkIsStepError(stepNumber) : false;

package/steps/esm/Component.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import cn from 'classnames';
 import { Step } from './components/step/Component.js';
 import 'tslib';
@@ -15,27 +15,26 @@ require('./index.css');
 var Steps = function (_a) {
     var _b;
     var className = _a.className, children = _a.children, _c = _a.defaultActiveStep, defaultActiveStep = _c === void 0 ? 1 : _c, activeStepProp = _a.activeStep, _d = _a.isMarkCompletedSteps, isMarkCompletedSteps = _d === void 0 ? true : _d, _e = _a.isVerticalAlign, isVerticalAlign = _e === void 0 ? false : _e, _f = _a.ordered, ordered = _f === void 0 ? true : _f, _g = _a.interactive, interactive = _g === void 0 ? true : _g, _h = _a.fullWidth, fullWidth = _h === void 0 ? false : _h, _j = _a.minSpaceBetweenSteps, minSpaceBetweenSteps = _j === void 0 ? 24 : _j, checkIsStepDisabled = _a.checkIsStepDisabled, checkIsStepError = _a.checkIsStepError, checkIsStepWarning = _a.checkIsStepWarning, checkIsStepWaiting = _a.checkIsStepWaiting, checkIsStepPositive = _a.checkIsStepPositive, checkIsStepCustom = _a.checkIsStepCustom, onChange = _a.onChange, dataTestId = _a.dataTestId;
-    var _k = useState(activeStepProp || defaultActiveStep), activeStep = _k[0], setActiveStep = _k[1];
+    var uncontrolled = activeStepProp === undefined;
+    var _k = useState(defaultActiveStep), activeStep = _k[0], setActiveStep = _k[1];
     var stepsLength = React.Children.count(children);
-    useEffect(function () {
-        if (activeStepProp) {
-            setActiveStep(activeStepProp);
-        }
-    }, [activeStepProp]);
     var handleStepClick = function (stepNumber) {
-        setActiveStep(stepNumber);
+        if (uncontrolled) {
+            setActiveStep(stepNumber);
+        }
         if (onChange) {
             onChange(stepNumber);
         }
     };
     if (!stepsLength)
         return null;
+    var visibleActiveStep = uncontrolled ? activeStep : activeStepProp;
     return (React.createElement("div", { className: cn(className, styles.component, (_b = {},
             _b[styles.vertical] = isVerticalAlign,
             _b)), "data-test-id": dataTestId }, React.Children.map(children, function (step, index) {
         var stepNumber = index + 1;
-        var isSelected = stepNumber === activeStep;
-        var isStepCompleted = isMarkCompletedSteps && stepNumber < activeStep;
+        var isSelected = stepNumber === visibleActiveStep;
+        var isStepCompleted = isMarkCompletedSteps && stepNumber < visibleActiveStep;
         var disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;
         var isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;
         var isError = checkIsStepError ? checkIsStepError(stepNumber) : false;

package/steps/modern/Component.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import cn from 'classnames';
 import { Step } from './components/step/Component.js';
 import '@alfalab/hooks';
@@ -12,27 +12,26 @@ const styles = {"component":"steps__component_7b4f4","vertical":"steps__vertical
 require('./index.css');
 
 const Steps = ({ className, children, defaultActiveStep = 1, activeStep: activeStepProp, isMarkCompletedSteps = true, isVerticalAlign = false, ordered = true, interactive = true, fullWidth = false, minSpaceBetweenSteps = 24, checkIsStepDisabled, checkIsStepError, checkIsStepWarning, checkIsStepWaiting, checkIsStepPositive, checkIsStepCustom, onChange, dataTestId, }) => {
-    const [activeStep, setActiveStep] = useState(activeStepProp || defaultActiveStep);
+    const uncontrolled = activeStepProp === undefined;
+    const [activeStep, setActiveStep] = useState(defaultActiveStep);
     const stepsLength = React.Children.count(children);
-    useEffect(() => {
-        if (activeStepProp) {
-            setActiveStep(activeStepProp);
-        }
-    }, [activeStepProp]);
     const handleStepClick = (stepNumber) => {
-        setActiveStep(stepNumber);
+        if (uncontrolled) {
+            setActiveStep(stepNumber);
+        }
         if (onChange) {
             onChange(stepNumber);
         }
     };
     if (!stepsLength)
         return null;
+    const visibleActiveStep = uncontrolled ? activeStep : activeStepProp;
     return (React.createElement("div", { className: cn(className, styles.component, {
             [styles.vertical]: isVerticalAlign,
         }), "data-test-id": dataTestId }, React.Children.map(children, (step, index) => {
         const stepNumber = index + 1;
-        const isSelected = stepNumber === activeStep;
-        const isStepCompleted = isMarkCompletedSteps && stepNumber < activeStep;
+        const isSelected = stepNumber === visibleActiveStep;
+        const isStepCompleted = isMarkCompletedSteps && stepNumber < visibleActiveStep;
         const disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;
         const isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;
         const isError = checkIsStepError ? checkIsStepError(stepNumber) : false;

package/switch/Component.js

@@ -44,5 +44,6 @@ var Switch = React.forwardRef(function (_a, ref) {
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
         React__default.default.createElement("span", { className: styles.addons, onClick: coreComponentsShared.dom.preventDefault }, addons))));
 });
+Switch.displayName = 'Switch';
 
 exports.Switch = Switch;

package/switch/cssm/Component.js

@@ -43,5 +43,6 @@ var Switch = React.forwardRef(function (_a, ref) {
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
         React__default.default.createElement("span", { className: styles__default.default.addons, onClick: coreComponentsShared.dom.preventDefault }, addons))));
 });
+Switch.displayName = 'Switch';
 
 exports.Switch = Switch;

package/switch/esm/Component.js

@@ -36,5 +36,6 @@ var Switch = forwardRef(function (_a, ref) {
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
         React.createElement("span", { className: styles.addons, onClick: dom.preventDefault }, addons))));
 });
+Switch.displayName = 'Switch';
 
 export { Switch };

package/switch/modern/Component.js

@@ -33,5 +33,6 @@ const Switch = forwardRef(({ reversed = false, checked = false, align = 'start',
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
         React.createElement("span", { className: styles.addons, onClick: dom.preventDefault }, addons))));
 });
+Switch.displayName = 'Switch';
 
 export { Switch };

package/tab-bar/Component.js

@@ -34,6 +34,7 @@ var TabBarComponent = React.forwardRef(function (_a, ref) {
         });
     })));
 });
+TabBarComponent.displayName = 'TabBarComponent';
 var TabBar = Object.assign(TabBarComponent, { Tab: components_tab_Component.Tab });
 
 exports.TabBar = TabBar;

package/tab-bar/cssm/Component.js

@@ -33,6 +33,7 @@ var TabBarComponent = React.forwardRef(function (_a, ref) {
         });
     })));
 });
+TabBarComponent.displayName = 'TabBarComponent';
 var TabBar = Object.assign(TabBarComponent, { Tab: components_tab_Component.Tab });
 
 exports.TabBar = TabBar;

package/tab-bar/esm/Component.js

@@ -30,6 +30,7 @@ var TabBarComponent = forwardRef(function (_a, ref) {
         });
     })));
 });
+TabBarComponent.displayName = 'TabBarComponent';
 var TabBar = Object.assign(TabBarComponent, { Tab: Tab });
 
 export { TabBar };

package/tab-bar/modern/Component.js

@@ -25,6 +25,7 @@ const TabBarComponent = forwardRef(({ children, className, selectedId, border, d
         dataTestId: getDataTestId(dataTestId, 'tab'),
     }))));
 });
+TabBarComponent.displayName = 'TabBarComponent';
 const TabBar = Object.assign(TabBarComponent, { Tab });
 
 export { TabBar };