@alfalab/core-components 36.4.0 → 36.5.1-beta.0

package/pagination/modern/components/tag/index.css

@@ -1,4 +1,4 @@
-/* hash: 1a09f */
+/* hash: 6ohk8 */
 :root {
     --color-light-bg-quaternary: #dbdee1;
     --color-light-bg-secondary-inverted: #233549;
@@ -18,7 +18,7 @@
 :root {
     --border-radius-m: 8px;
 }
-.pagination__tag_r988p.pagination__tag_r988p {
+.pagination__tag_2w6lq.pagination__tag_2w6lq {
     color: var(--color-light-text-secondary);
     border-radius: var(--border-radius-m);
     border: none;
@@ -29,24 +29,24 @@
     height: 32px;
     padding: 0
 }
-.pagination__tag_r988p.pagination__tag_r988p:disabled:not(.pagination__checked_r988p) {
+.pagination__tag_2w6lq.pagination__tag_2w6lq:disabled:not(.pagination__checked_2w6lq) {
         opacity: 0.3;
     }
-.pagination__tag_r988p.pagination__tag_r988p:hover:not(:disabled) {
+.pagination__tag_2w6lq.pagination__tag_2w6lq:hover:not(:disabled) {
         background-color: var(--color-light-bg-tertiary);
         color: var(--color-light-text-primary);
     }
-.pagination__tag_r988p.pagination__tag_r988p:active:not(:disabled) {
+.pagination__tag_2w6lq.pagination__tag_2w6lq:active:not(:disabled) {
         background-color: var(--color-light-bg-quaternary);
     }
-.pagination__tag_r988p.pagination__tag_r988p.pagination__checked_r988p {
+.pagination__tag_2w6lq.pagination__tag_2w6lq.pagination__checked_2w6lq {
         cursor: default;
         background-color: var(--color-light-bg-secondary-inverted);
         color: var(--color-light-text-primary-inverted);
     }
-.pagination__tag_r988p.pagination__tag_r988p.pagination__checked_r988p:hover:not(:disabled) {
+.pagination__tag_2w6lq.pagination__tag_2w6lq.pagination__checked_2w6lq:hover:not(:disabled) {
         color: var(--color-light-text-primary-inverted);
     }
-.pagination__tag_r988p.pagination__tag_r988p.pagination__checked_r988p:active:not(:disabled) {
+.pagination__tag_2w6lq.pagination__tag_2w6lq.pagination__checked_2w6lq:active:not(:disabled) {
         color: var(--color-light-text-primary);
     }

package/pagination/modern/components/tag/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { Tag as Tag$1 } from '../../../../tag/modern';
 
-const styles = {"tag":"pagination__tag_r988p","checked":"pagination__checked_r988p"};
+const styles = {"tag":"pagination__tag_2w6lq","checked":"pagination__checked_2w6lq"};
 require('./index.css');
 
 const Tag = ({ className, checked, ...restProps }) => (React.createElement(Tag$1, { ...restProps, checked: checked, size: 'xxs', className: cn(className, styles.tag, { [styles.checked]: checked }) }));

package/pagination/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1ci74 */
+/* hash: 1g2mx */
 :root {
     --color-light-text-primary: #0b1f35;
 }
@@ -13,7 +13,7 @@
 :root {
     --gap-xs: 8px;
 }
-.pagination__component_2iyip {
+.pagination__component_mev30 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
@@ -24,9 +24,9 @@
     font-feature-settings: "tnum";
     font-variant-numeric: tabular-nums;
 }
-.pagination__defaultView_2iyip > * {
+.pagination__defaultView_mev30 > * {
         margin-right: var(--gap-xs)
     }
-.pagination__defaultView_2iyip > *:last-child {
+.pagination__defaultView_mev30 > *:last-child {
             margin-right: 0;
         }

package/pass-code/Component.js

@@ -1,7 +1,7 @@
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsGap = require('../gap');
-var getDataTestId = require('./getDataTestId-191a0a09.js');
+var getDataTestId = require('./getDataTestId-61bae0fe.js');
 var components_InputProgress_Component = require('./components/InputProgress/Component.js');
 var components_KeyPad_Component = require('./components/KeyPad/Component.js');
 require('react-transition-group');
@@ -9,7 +9,12 @@ require('@alfalab/icons-glyph/BackspaceXxlIcon');
 require('./components/KeyPadButton/Component.js');
 require('../button');
 
-var styles = {"component":"pass-code__component_1ry7r","error":"pass-code__error_1ry7r"};
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var styles = {"component":"pass-code__component_6if51","error":"pass-code__error_6if51"};
 require('./index.css');
 
 var PassCode = React.forwardRef(function (_a, ref) {
@@ -26,12 +31,12 @@ var PassCode = React.forwardRef(function (_a, ref) {
             onChange === null || onChange === void 0 ? void 0 : onChange(value === null || value === void 0 ? void 0 : value.slice(0, -1));
         }
     };
-    return (React.createElement("div", { className: cn(styles.component, className), ref: ref, "data-test-id": getDataTestId.getDataTestId(dataTestId, 'wrapper') },
-        React.createElement("div", { className: styles.error, "data-test-id": getDataTestId.getDataTestId(dataTestId, 'error') }, error),
-        React.createElement(coreComponentsGap.Gap, { size: 'm' }),
-        React.createElement(components_InputProgress_Component.InputProgress, { dataTestId: dataTestId, value: value, maxCodeLength: maxCodeLength, codeLength: codeLength, error: Boolean(error) }),
-        React.createElement(coreComponentsGap.Gap, { size: '4xl' }),
-        React.createElement(components_KeyPad_Component.KeyPad, { dataTestId: dataTestId, leftAddons: leftAddons, rightAddons: rightAddons, onClick: handleChange, onClear: handleClear, showClear: Boolean(value) })));
+    return (React__default.default.createElement("div", { className: cn__default.default(styles.component, className), ref: ref, "data-test-id": getDataTestId.getDataTestId(dataTestId, 'wrapper') },
+        React__default.default.createElement("div", { className: styles.error, "data-test-id": getDataTestId.getDataTestId(dataTestId, 'error') }, error),
+        React__default.default.createElement(coreComponentsGap.Gap, { size: 'm' }),
+        React__default.default.createElement(components_InputProgress_Component.InputProgress, { dataTestId: dataTestId, value: value, maxCodeLength: maxCodeLength, codeLength: codeLength, error: Boolean(error) }),
+        React__default.default.createElement(coreComponentsGap.Gap, { size: '4xl' }),
+        React__default.default.createElement(components_KeyPad_Component.KeyPad, { dataTestId: dataTestId, leftAddons: leftAddons, rightAddons: rightAddons, onClick: handleChange, onClear: handleClear, showClear: Boolean(value) })));
 });
 
 exports.PassCode = PassCode;

package/pass-code/components/InputProgress/Component.js

@@ -1,12 +1,17 @@
 var React = require('react');
 var reactTransitionGroup = require('react-transition-group');
 var cn = require('classnames');
-var getDataTestId = require('../../getDataTestId-191a0a09.js');
+var getDataTestId = require('../../getDataTestId-61bae0fe.js');
 
-var styles = {"component":"pass-code__component_1lj8z","dot":"pass-code__dot_1lj8z","error":"pass-code__error_1lj8z","filled":"pass-code__filled_1lj8z"};
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var styles = {"component":"pass-code__component_12rql","dot":"pass-code__dot_12rql","error":"pass-code__error_12rql","filled":"pass-code__filled_12rql"};
 require('./index.css');
 
-var transitions = {"enter":"pass-code__enter_1a10o","enterActive":"pass-code__enterActive_1a10o","exit":"pass-code__exit_1a10o","exitActive":"pass-code__exitActive_1a10o","shake":"pass-code__shake_1a10o"};
+var transitions = {"enter":"pass-code__enter_perfr","enterActive":"pass-code__enterActive_perfr","exit":"pass-code__exit_perfr","exitActive":"pass-code__exitActive_perfr","shake":"pass-code__shake_perfr"};
 require('./transitions.css');
 
 /* eslint-disable react/no-array-index-key */
@@ -14,19 +19,19 @@ var TRANSITION_DURATION = 150;
 var InputProgress = function (_a) {
     var _b;
     var _c = _a.value, value = _c === void 0 ? '' : _c, maxCodeLength = _a.maxCodeLength, codeLength = _a.codeLength, error = _a.error, dataTestId = _a.dataTestId;
-    return (React.createElement("div", { className: cn(styles.component, (_b = {}, _b[transitions.shake] = error, _b)), "data-test-id": getDataTestId.getDataTestId(dataTestId, 'input-progress') }, codeLength
+    return (React__default.default.createElement("div", { className: cn__default.default(styles.component, (_b = {}, _b[transitions.shake] = error, _b)), "data-test-id": getDataTestId.getDataTestId(dataTestId, 'input-progress') }, codeLength
         ? new Array(codeLength).fill(null).map(function (_, i) {
             var _a;
             var filled = Boolean(value[i]);
-            return (React.createElement("div", { key: i, className: cn(styles.dot, (_a = {},
+            return (React__default.default.createElement("div", { key: i, className: cn__default.default(styles.dot, (_a = {},
                     _a[styles.error] = filled && error,
                     _a[styles.filled] = filled,
                     _a)) }));
         })
         : new Array(maxCodeLength).fill(null).map(function (_, i) {
             var _a;
-            return (React.createElement(reactTransitionGroup.CSSTransition, { key: i, in: Boolean(value[i]), timeout: TRANSITION_DURATION, classNames: transitions, unmountOnExit: true },
-                React.createElement("div", { className: cn(styles.dot, styles.filled, (_a = {}, _a[styles.error] = error, _a)) })));
+            return (React__default.default.createElement(reactTransitionGroup.CSSTransition, { key: i, in: Boolean(value[i]), timeout: TRANSITION_DURATION, classNames: transitions, unmountOnExit: true },
+                React__default.default.createElement("div", { className: cn__default.default(styles.dot, styles.filled, (_a = {}, _a[styles.error] = error, _a)) })));
         })));
 };
 

package/pass-code/components/InputProgress/index.css

@@ -1,4 +1,4 @@
-/* hash: wdzbr */
+/* hash: 14do2 */
 :root {
     --color-light-bg-quaternary: #dbdee1;
     --color-light-graphic-negative: #f15045;
@@ -15,14 +15,14 @@
 :root {
     --border-radius-circle: 50%;
 }
-.pass-code__component_1lj8z {
+.pass-code__component_12rql {
     height: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
 }
-.pass-code__dot_1lj8z {
+.pass-code__dot_12rql {
     margin: 0 6px;
     width: 12px;
     height: 12px;
@@ -31,10 +31,10 @@
     flex-shrink: 0;
     transition: background 75ms ease-in
 }
-.pass-code__dot_1lj8z.pass-code__error_1lj8z {
+.pass-code__dot_12rql.pass-code__error_12rql {
         background: var(--color-light-graphic-negative);
         transition: none;
     }
-.pass-code__filled_1lj8z {
+.pass-code__filled_12rql {
     background: var(--color-light-graphic-primary);
 }

package/pass-code/components/InputProgress/index.js

@@ -2,7 +2,7 @@ var components_InputProgress_Component = require('./Component.js');
 require('react');
 require('react-transition-group');
 require('classnames');
-require('../../getDataTestId-191a0a09.js');
+require('../../getDataTestId-61bae0fe.js');
 
 
 

package/pass-code/components/InputProgress/transitions.css

@@ -1,12 +1,12 @@
-/* hash: 27mhi */
-.pass-code__enter_1a10o {
+/* hash: 1infs */
+.pass-code__enter_perfr {
     opacity: 0;
     width: 0;
     height: 0;
     margin: 0;
 }
 
-.pass-code__enterActive_1a10o {
+.pass-code__enterActive_perfr {
     opacity: 1;
     width: 12px;
     height: 12px;
@@ -14,14 +14,14 @@
     transition: all 0.15s ease-in;
 }
 
-.pass-code__exit_1a10o {
+.pass-code__exit_perfr {
     opacity: 1;
     width: 12px;
     height: 12px;
     margin: 0 6px;
 }
 
-.pass-code__exitActive_1a10o {
+.pass-code__exitActive_perfr {
     opacity: 0;
     width: 0;
     height: 0;
@@ -29,7 +29,7 @@
     transition: all 0.15s ease-in;
 }
 
-@keyframes pass-code__shake_1a10o {
+@keyframes pass-code__shake_perfr {
     0% {
         transform: translateX(0);
     }
@@ -47,6 +47,6 @@
     }
 }
 
-.pass-code__shake_1a10o {
-    animation: pass-code__shake_1a10o 0.15s linear 0s 3;
+.pass-code__shake_perfr {
+    animation: pass-code__shake_perfr 0.15s linear 0s 3;
 }

package/pass-code/components/KeyPad/Component.js

@@ -1,11 +1,15 @@
 var React = require('react');
 var BackspaceXxlIcon = require('@alfalab/icons-glyph/BackspaceXxlIcon');
-var getDataTestId = require('../../getDataTestId-191a0a09.js');
+var getDataTestId = require('../../getDataTestId-61bae0fe.js');
 var components_KeyPadButton_Component = require('../KeyPadButton/Component.js');
 require('classnames');
 require('../../../button');
 
-var styles = {"component":"pass-code__component_fg4m1","digit":"pass-code__digit_fg4m1"};
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var styles = {"component":"pass-code__component_8gvqb","digit":"pass-code__digit_8gvqb"};
 require('./index.css');
 
 var CELL_COUNT = 12;
@@ -16,22 +20,22 @@ var CELLS = new Array(CELL_COUNT).fill(null).map(function (_, i) {
 });
 var KeyPad = function (_a) {
     var leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, onClick = _a.onClick, onClear = _a.onClear, showClear = _a.showClear, dataTestId = _a.dataTestId;
-    return (React.createElement("div", { className: styles.component, "data-test-id": getDataTestId.getDataTestId(dataTestId, 'keypad') }, CELLS.map(function (digit, i) {
+    return (React__default.default.createElement("div", { className: styles.component, "data-test-id": getDataTestId.getDataTestId(dataTestId, 'keypad') }, CELLS.map(function (digit, i) {
         if (i === 9) {
             if (leftAddons)
                 return leftAddons;
-            return React.createElement("div", { key: 'left-addons-empty' });
+            return React__default.default.createElement("div", { key: 'left-addons-empty' });
         }
         if (i === 11) {
             if (showClear) {
-                return (React.createElement(components_KeyPadButton_Component.KeyPadButton, { key: 'clear-btn', onClick: onClear, view: 'ghost' },
-                    React.createElement(BackspaceXxlIcon.BackspaceXxlIcon, null)));
+                return (React__default.default.createElement(components_KeyPadButton_Component.KeyPadButton, { key: 'clear-btn', onClick: onClear, view: 'ghost' },
+                    React__default.default.createElement(BackspaceXxlIcon.BackspaceXxlIcon, null)));
             }
             if (rightAddons)
                 return rightAddons;
-            return React.createElement("div", { key: 'right-addon-empty' });
+            return React__default.default.createElement("div", { key: 'right-addon-empty' });
         }
-        return (React.createElement(components_KeyPadButton_Component.KeyPadButton, { key: digit, onClick: onClick, view: 'secondary', buttonClassName: styles.digit }, digit));
+        return (React__default.default.createElement(components_KeyPadButton_Component.KeyPadButton, { key: digit, onClick: onClick, view: 'secondary', buttonClassName: styles.digit }, digit));
     })));
 };
 

package/pass-code/components/KeyPad/index.css

@@ -1,4 +1,4 @@
-/* hash: bnhwb */
+/* hash: u8snl */
 :root {
 
     /* Hard */
@@ -13,7 +13,7 @@
     --gap-xl: 24px;
     --gap-2xl: 32px;
 }
-.pass-code__component_fg4m1 {
+.pass-code__component_8gvqb {
     width: 240px;
     height: 292px;
     display: grid;
@@ -23,12 +23,12 @@
     grid-row-gap: var(--gap-s);
     margin: 0 auto
 }
-.pass-code__component_fg4m1 .pass-code__digit_fg4m1.pass-code__digit_fg4m1 {
+.pass-code__component_8gvqb .pass-code__digit_8gvqb.pass-code__digit_8gvqb {
         font-size: 36px;
         line-height: 1;
     }
 @media screen and (min-width: 360px) {
-    .pass-code__component_fg4m1 {
+    .pass-code__component_8gvqb {
         width: 292px;
         height: 352px;
         grid-column-gap: var(--gap-2xl);
@@ -36,7 +36,7 @@
     }
 }
 @media screen and (min-width: 390px) {
-    .pass-code__component_fg4m1 {
+    .pass-code__component_8gvqb {
         width: 322px;
         height: 392px;
     }

package/pass-code/components/KeyPad/index.js

@@ -1,7 +1,7 @@
 var components_KeyPad_Component = require('./Component.js');
 require('react');
 require('@alfalab/icons-glyph/BackspaceXxlIcon');
-require('../../getDataTestId-191a0a09.js');
+require('../../getDataTestId-61bae0fe.js');
 require('../KeyPadButton/Component.js');
 require('classnames');
 require('../../../button');

package/pass-code/components/KeyPadButton/Component.js

@@ -2,13 +2,18 @@ var React = require('react');
 var cn = require('classnames');
 var coreComponentsButton = require('../../../button');
 
-var styles = {"component":"pass-code__component_18u57","button":"pass-code__button_18u57","secondary":"pass-code__secondary_18u57","ghost":"pass-code__ghost_18u57"};
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var styles = {"component":"pass-code__component_1xkqx","button":"pass-code__button_1xkqx","secondary":"pass-code__secondary_1xkqx","ghost":"pass-code__ghost_1xkqx"};
 require('./index.css');
 
 function KeyPadButton(_a) {
     var children = _a.children, onClick = _a.onClick, className = _a.className, _b = _a.view, view = _b === void 0 ? 'secondary' : _b, buttonClassName = _a.buttonClassName;
-    return (React.createElement("div", { className: cn(styles.component, className) },
-        React.createElement(coreComponentsButton.Button, { className: cn(styles.button, styles[view], buttonClassName), view: view, onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(children); } }, children)));
+    return (React__default.default.createElement("div", { className: cn__default.default(styles.component, className) },
+        React__default.default.createElement(coreComponentsButton.Button, { className: cn__default.default(styles.button, styles[view], buttonClassName), view: view, onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(children); } }, children)));
 }
 
 exports.KeyPadButton = KeyPadButton;

package/pass-code/components/KeyPadButton/index.css

@@ -1,4 +1,4 @@
-/* hash: 1l8o9 */
+/* hash: 4suyl */
 :root {
     --color-light-specialbg-secondary-transparent: rgba(11, 31, 53, 0.05);
     --color-light-specialbg-tertiary-transparent: rgba(11, 31, 53, 0.1);
@@ -19,13 +19,13 @@
     --button-bg-color: var(--color-light-specialbg-secondary-transparent);
     --button-bg-color-active: var(--color-light-specialbg-tertiary-transparent);
 }
-.pass-code__component_18u57 {
+.pass-code__component_1xkqx {
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0;
 }
-.pass-code__button_18u57.pass-code__button_18u57 {
+.pass-code__button_1xkqx.pass-code__button_1xkqx {
     font-size: 14px;
     line-height: 18px;
     font-weight: 500;
@@ -37,40 +37,40 @@
     height: 64px;
     text-align: center
 }
-.pass-code__button_18u57.pass-code__button_18u57 > span {
+.pass-code__button_1xkqx.pass-code__button_1xkqx > span {
         vertical-align: middle
     }
-.pass-code__button_18u57.pass-code__button_18u57 > span > * {
+.pass-code__button_1xkqx.pass-code__button_1xkqx > span > * {
             vertical-align: middle;
         }
-.pass-code__secondary_18u57.pass-code__secondary_18u57 {
+.pass-code__secondary_1xkqx.pass-code__secondary_1xkqx {
     color: var(--color-light-text-primary);
     background: var(--button-bg-color)
 }
-.pass-code__secondary_18u57.pass-code__secondary_18u57:hover {
+.pass-code__secondary_1xkqx.pass-code__secondary_1xkqx:hover {
         color: var(--color-light-text-primary);
     }
-.pass-code__secondary_18u57.pass-code__secondary_18u57:active {
+.pass-code__secondary_1xkqx.pass-code__secondary_1xkqx:active {
         background: var(--button-bg-color-active);
     }
-.pass-code__ghost_18u57.pass-code__ghost_18u57 {
+.pass-code__ghost_1xkqx.pass-code__ghost_1xkqx {
     color: var(--color-light-text-primary)
 }
-.pass-code__ghost_18u57.pass-code__ghost_18u57:hover {
+.pass-code__ghost_1xkqx.pass-code__ghost_1xkqx:hover {
         color: var(--color-light-text-primary);
     }
-.pass-code__ghost_18u57.pass-code__ghost_18u57:active {
+.pass-code__ghost_1xkqx.pass-code__ghost_1xkqx:active {
         background: var(--button-bg-color-active);
     }
 @media screen and (min-width: 360px) {
-    .pass-code__button_18u57.pass-code__button_18u57 {
+    .pass-code__button_1xkqx.pass-code__button_1xkqx {
         min-width: 76px;
         height: 76px;
         width: 76px;
     }
 }
 @media screen and (min-width: 390px) {
-    .pass-code__button_18u57.pass-code__button_18u57 {
+    .pass-code__button_1xkqx.pass-code__button_1xkqx {
         min-width: 86px;
         width: 86px;
         height: 86px;

package/pass-code/cssm/Component.js

@@ -14,6 +14,12 @@ require('../../button/cssm');
 require('./components/KeyPadButton/index.module.css');
 require('./components/KeyPad/index.module.css');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
 var PassCode = React.forwardRef(function (_a, ref) {
     var _b = _a.value, value = _b === void 0 ? '' : _b, dataTestId = _a.dataTestId, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, error = _a.error, onChange = _a.onChange, _c = _a.maxCodeLength, maxCodeLength = _c === void 0 ? 10 : _c, codeLength = _a.codeLength;
     var passwordLen = codeLength || maxCodeLength;
@@ -28,12 +34,12 @@ var PassCode = React.forwardRef(function (_a, ref) {
             onChange === null || onChange === void 0 ? void 0 : onChange(value === null || value === void 0 ? void 0 : value.slice(0, -1));
         }
     };
-    return (React.createElement("div", { className: cn(styles.component, className), ref: ref, "data-test-id": getDataTestId.getDataTestId(dataTestId, 'wrapper') },
-        React.createElement("div", { className: styles.error, "data-test-id": getDataTestId.getDataTestId(dataTestId, 'error') }, error),
-        React.createElement(coreComponentsGap.Gap, { size: 'm' }),
-        React.createElement(components_InputProgress_Component.InputProgress, { dataTestId: dataTestId, value: value, maxCodeLength: maxCodeLength, codeLength: codeLength, error: Boolean(error) }),
-        React.createElement(coreComponentsGap.Gap, { size: '4xl' }),
-        React.createElement(components_KeyPad_Component.KeyPad, { dataTestId: dataTestId, leftAddons: leftAddons, rightAddons: rightAddons, onClick: handleChange, onClear: handleClear, showClear: Boolean(value) })));
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className), ref: ref, "data-test-id": getDataTestId.getDataTestId(dataTestId, 'wrapper') },
+        React__default.default.createElement("div", { className: styles__default.default.error, "data-test-id": getDataTestId.getDataTestId(dataTestId, 'error') }, error),
+        React__default.default.createElement(coreComponentsGap.Gap, { size: 'm' }),
+        React__default.default.createElement(components_InputProgress_Component.InputProgress, { dataTestId: dataTestId, value: value, maxCodeLength: maxCodeLength, codeLength: codeLength, error: Boolean(error) }),
+        React__default.default.createElement(coreComponentsGap.Gap, { size: '4xl' }),
+        React__default.default.createElement(components_KeyPad_Component.KeyPad, { dataTestId: dataTestId, leftAddons: leftAddons, rightAddons: rightAddons, onClick: handleChange, onClear: handleClear, showClear: Boolean(value) })));
 });
 
 exports.PassCode = PassCode;

package/pass-code/cssm/components/InputProgress/Component.js

@@ -5,24 +5,31 @@ var getDataTestId = require('../../getDataTestId-5c876d98.js');
 var styles = require('./index.module.css');
 var transitions = require('./transitions.module.css');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+var transitions__default = /*#__PURE__*/_interopDefaultCompat(transitions);
+
 /* eslint-disable react/no-array-index-key */
 var TRANSITION_DURATION = 150;
 var InputProgress = function (_a) {
     var _b;
     var _c = _a.value, value = _c === void 0 ? '' : _c, maxCodeLength = _a.maxCodeLength, codeLength = _a.codeLength, error = _a.error, dataTestId = _a.dataTestId;
-    return (React.createElement("div", { className: cn(styles.component, (_b = {}, _b[transitions.shake] = error, _b)), "data-test-id": getDataTestId.getDataTestId(dataTestId, 'input-progress') }, codeLength
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, (_b = {}, _b[transitions__default.default.shake] = error, _b)), "data-test-id": getDataTestId.getDataTestId(dataTestId, 'input-progress') }, codeLength
         ? new Array(codeLength).fill(null).map(function (_, i) {
             var _a;
             var filled = Boolean(value[i]);
-            return (React.createElement("div", { key: i, className: cn(styles.dot, (_a = {},
-                    _a[styles.error] = filled && error,
-                    _a[styles.filled] = filled,
+            return (React__default.default.createElement("div", { key: i, className: cn__default.default(styles__default.default.dot, (_a = {},
+                    _a[styles__default.default.error] = filled && error,
+                    _a[styles__default.default.filled] = filled,
                     _a)) }));
         })
         : new Array(maxCodeLength).fill(null).map(function (_, i) {
             var _a;
-            return (React.createElement(reactTransitionGroup.CSSTransition, { key: i, in: Boolean(value[i]), timeout: TRANSITION_DURATION, classNames: transitions, unmountOnExit: true },
-                React.createElement("div", { className: cn(styles.dot, styles.filled, (_a = {}, _a[styles.error] = error, _a)) })));
+            return (React__default.default.createElement(reactTransitionGroup.CSSTransition, { key: i, in: Boolean(value[i]), timeout: TRANSITION_DURATION, classNames: transitions__default.default, unmountOnExit: true },
+                React__default.default.createElement("div", { className: cn__default.default(styles__default.default.dot, styles__default.default.filled, (_a = {}, _a[styles__default.default.error] = error, _a)) })));
         })));
 };
 

package/pass-code/cssm/components/KeyPad/Component.js

@@ -7,6 +7,11 @@ require('classnames');
 require('../../../../button/cssm');
 require('../KeyPadButton/index.module.css');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
 var CELL_COUNT = 12;
 var CELLS = new Array(CELL_COUNT).fill(null).map(function (_, i) {
     if (i === 10)
@@ -15,22 +20,22 @@ var CELLS = new Array(CELL_COUNT).fill(null).map(function (_, i) {
 });
 var KeyPad = function (_a) {
     var leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, onClick = _a.onClick, onClear = _a.onClear, showClear = _a.showClear, dataTestId = _a.dataTestId;
-    return (React.createElement("div", { className: styles.component, "data-test-id": getDataTestId.getDataTestId(dataTestId, 'keypad') }, CELLS.map(function (digit, i) {
+    return (React__default.default.createElement("div", { className: styles__default.default.component, "data-test-id": getDataTestId.getDataTestId(dataTestId, 'keypad') }, CELLS.map(function (digit, i) {
         if (i === 9) {
             if (leftAddons)
                 return leftAddons;
-            return React.createElement("div", { key: 'left-addons-empty' });
+            return React__default.default.createElement("div", { key: 'left-addons-empty' });
         }
         if (i === 11) {
             if (showClear) {
-                return (React.createElement(components_KeyPadButton_Component.KeyPadButton, { key: 'clear-btn', onClick: onClear, view: 'ghost' },
-                    React.createElement(BackspaceXxlIcon.BackspaceXxlIcon, null)));
+                return (React__default.default.createElement(components_KeyPadButton_Component.KeyPadButton, { key: 'clear-btn', onClick: onClear, view: 'ghost' },
+                    React__default.default.createElement(BackspaceXxlIcon.BackspaceXxlIcon, null)));
             }
             if (rightAddons)
                 return rightAddons;
-            return React.createElement("div", { key: 'right-addon-empty' });
+            return React__default.default.createElement("div", { key: 'right-addon-empty' });
         }
-        return (React.createElement(components_KeyPadButton_Component.KeyPadButton, { key: digit, onClick: onClick, view: 'secondary', buttonClassName: styles.digit }, digit));
+        return (React__default.default.createElement(components_KeyPadButton_Component.KeyPadButton, { key: digit, onClick: onClick, view: 'secondary', buttonClassName: styles__default.default.digit }, digit));
     })));
 };
 

package/pass-code/cssm/components/KeyPadButton/Component.js

@@ -3,10 +3,16 @@ var cn = require('classnames');
 var coreComponentsButton = require('../../../../button/cssm');
 var styles = require('./index.module.css');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
 function KeyPadButton(_a) {
     var children = _a.children, onClick = _a.onClick, className = _a.className, _b = _a.view, view = _b === void 0 ? 'secondary' : _b, buttonClassName = _a.buttonClassName;
-    return (React.createElement("div", { className: cn(styles.component, className) },
-        React.createElement(coreComponentsButton.Button, { className: cn(styles.button, styles[view], buttonClassName), view: view, onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(children); } }, children)));
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className) },
+        React__default.default.createElement(coreComponentsButton.Button, { className: cn__default.default(styles__default.default.button, styles__default.default[view], buttonClassName), view: view, onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(children); } }, children)));
 }
 
 exports.KeyPadButton = KeyPadButton;

package/pass-code/esm/Component.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { Gap } from '../../gap/esm';
-import { g as getDataTestId } from './getDataTestId-fd254bee.js';
+import { g as getDataTestId } from './getDataTestId-21455c6b.js';
 import { InputProgress } from './components/InputProgress/Component.js';
 import { KeyPad } from './components/KeyPad/Component.js';
 import 'react-transition-group';
@@ -9,7 +9,7 @@ import '@alfalab/icons-glyph/BackspaceXxlIcon';
 import './components/KeyPadButton/Component.js';
 import '../../button/esm';
 
-var styles = {"component":"pass-code__component_1ry7r","error":"pass-code__error_1ry7r"};
+var styles = {"component":"pass-code__component_6if51","error":"pass-code__error_6if51"};
 require('./index.css');
 
 var PassCode = forwardRef(function (_a, ref) {

package/pass-code/esm/components/InputProgress/Component.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import cn from 'classnames';
-import { g as getDataTestId } from '../../getDataTestId-fd254bee.js';
+import { g as getDataTestId } from '../../getDataTestId-21455c6b.js';
 
-var styles = {"component":"pass-code__component_1lj8z","dot":"pass-code__dot_1lj8z","error":"pass-code__error_1lj8z","filled":"pass-code__filled_1lj8z"};
+var styles = {"component":"pass-code__component_12rql","dot":"pass-code__dot_12rql","error":"pass-code__error_12rql","filled":"pass-code__filled_12rql"};
 require('./index.css');
 
-var transitions = {"enter":"pass-code__enter_1a10o","enterActive":"pass-code__enterActive_1a10o","exit":"pass-code__exit_1a10o","exitActive":"pass-code__exitActive_1a10o","shake":"pass-code__shake_1a10o"};
+var transitions = {"enter":"pass-code__enter_perfr","enterActive":"pass-code__enterActive_perfr","exit":"pass-code__exit_perfr","exitActive":"pass-code__exitActive_perfr","shake":"pass-code__shake_perfr"};
 require('./transitions.css');
 
 /* eslint-disable react/no-array-index-key */