@alfalab/core-components 45.0.0 → 45.1.0

package/code-input/esm/components/base-code-input/index.css

@@ -16,17 +16,17 @@
     --gap-xs: 8px;
 } :root {
 } :root {
-} .code-input__component_xzy44 {
+} .code-input__component_r43gd {
     display: flex;
     flex-direction: column;
-} .code-input__error_xzy44 {
+} .code-input__error_r43gd {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
 
     margin-top: var(--gap-xs);
     color: var(--color-light-text-negative);
-} @keyframes code-input__shake_xzy44 {
+} @keyframes code-input__shake_r43gd {
     0% {
         transform: translateX(0);
     }
@@ -42,6 +42,6 @@
     100% {
         transform: translateX(0);
     }
-} .code-input__shake_xzy44 {
-    animation: code-input__shake_xzy44 0.15s linear 0s 3;
+} .code-input__shake_r43gd {
+    animation: code-input__shake_r43gd 0.15s linear 0s 3;
 }

package/code-input/esm/components/input/component.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 
-var styles = {"component":"code-input__component_1jvpb","input":"code-input__input_1jvpb","hasError":"code-input__hasError_1jvpb","disabled":"code-input__disabled_1jvpb","compact":"code-input__compact_1jvpb"};
+var styles = {"component":"code-input__component_1czun","input":"code-input__input_1czun","hasError":"code-input__hasError_1czun","disabled":"code-input__disabled_1czun","compact":"code-input__compact_1czun"};
 require('./index.css');
 
 var Input = forwardRef(function (_a, ref) {

package/code-input/esm/components/input/index.css

@@ -55,9 +55,9 @@
     --code-input-font-family: var(--font-family-system);
     --code-input-text-color: var(--color-light-text-primary);
     --code-input-error-bg-color: var(--color-light-status-muted-negative);
-} .code-input__component_1jvpb {
+} .code-input__component_1czun {
     display: flex;
-} .code-input__input_1jvpb {
+} .code-input__input_1czun {
     flex-shrink: 0;
     width: 36px;
     height: 48px;
@@ -72,25 +72,25 @@
     font-size: var(--code-input-font-size);
     font-weight: var(--code-input-font-weight);
     font-family: var(--code-input-font-family)
-} .code-input__input_1jvpb:last-child {
+} .code-input__input_1czun:last-child {
         margin-right: 0;
-    } .code-input__input_1jvpb.code-input__hasError_1jvpb {
+    } .code-input__input_1czun.code-input__hasError_1czun {
         color: var(--color-light-text-negative);
         caret-color: var(--code-input-text-color);
         background-color: var(--code-input-error-bg-color);
-    } .code-input__input_1jvpb.code-input__disabled_1jvpb {
+    } .code-input__input_1czun.code-input__disabled_1czun {
         color: var(--color-light-text-tertiary);
         opacity: 1;
-    } .code-input__input_1jvpb:-webkit-autofill {
+    } .code-input__input_1czun:-webkit-autofill {
         -webkit-text-fill-color: var(--code-input-text-color);
-    } .code-input__input_1jvpb:-webkit-autofill,
-    .code-input__input_1jvpb:-webkit-autofill:hover,
-    .code-input__input_1jvpb:-webkit-autofill:focus,
-    .code-input__input_1jvpb:-webkit-autofill:active {
+    } .code-input__input_1czun:-webkit-autofill,
+    .code-input__input_1czun:-webkit-autofill:hover,
+    .code-input__input_1czun:-webkit-autofill:focus,
+    .code-input__input_1czun:-webkit-autofill:active {
         /* Hack from http://stackoverflow.com/a/29350537 */
         -webkit-transition: background-color 999999s ease-in-out 0s;
         transition: background-color 999999s ease-in-out 0s;
-    } .code-input__compact_1jvpb {
+    } .code-input__compact_1czun {
     width: 32px;
     height: 48px;
 }

package/code-input/esm/desktop/Component.desktop.js

@@ -4,7 +4,7 @@ import { BaseCodeInput } from '../components/base-code-input/component.js';
 import 'classnames';
 import '../components/input/component.js';
 
-var styles = {"component":"code-input__component_gpae6"};
+var styles = {"component":"code-input__component_195vv"};
 require('./desktop.css');
 
 var CodeInputDesktop = forwardRef(function (restProps, ref) { return React.createElement(BaseCodeInput, __assign({}, restProps, { ref: ref, stylesInput: styles })); });

package/code-input/esm/desktop/desktop.css

@@ -45,6 +45,6 @@
     /* error mobile */
 } :root {
     --code-input-bg-color: var(--form-control-bg-color);
-} .code-input__component_gpae6 {
+} .code-input__component_195vv {
     background-color: var(--code-input-bg-color);
 }

package/code-input/esm/mobile/Component.mobile.js

@@ -4,7 +4,7 @@ import { BaseCodeInput } from '../components/base-code-input/component.js';
 import 'classnames';
 import '../components/input/component.js';
 
-var styles = {"component":"code-input__component_3ppg8","compact":"code-input__compact_3ppg8"};
+var styles = {"component":"code-input__component_i7fst","compact":"code-input__compact_i7fst"};
 require('./mobile.css');
 
 var CodeInputMobile = forwardRef(function (restProps, ref) { return React.createElement(BaseCodeInput, __assign({}, restProps, { ref: ref, stylesInput: styles })); });

package/code-input/esm/mobile/mobile.css

@@ -45,8 +45,8 @@
     /* error mobile */
 } :root {
     --code-input-mobile-bg-color: var(--color-light-neutral-translucent-100);
-} .code-input__component_3ppg8 {
+} .code-input__component_i7fst {
     background-color: var(--code-input-mobile-bg-color);
-} .code-input__compact_3ppg8 {
+} .code-input__compact_i7fst {
     margin-right: var(--gap-2xs);
 }

package/code-input/esm/typings.d.ts

@@ -29,6 +29,11 @@ type BaseCodeInputProps = {
      * @default true
      */
     clearCodeOnError?: boolean;
+    /**
+     * Продолжительность отображения ошибки
+     * @default 1300
+     */
+    errorVisibleDuration?: number;
     /**
      * Коллбэк вызываемый после окончания проигрывания анимации при возникновении ошибки.
      */

package/code-input/mobile/Component.mobile.js

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-var styles = {"component":"code-input__component_3ppg8","compact":"code-input__compact_3ppg8"};
+var styles = {"component":"code-input__component_i7fst","compact":"code-input__compact_i7fst"};
 require('./mobile.css');
 
 var CodeInputMobile = React.forwardRef(function (restProps, ref) { return React__default.default.createElement(components_baseCodeInput_component.BaseCodeInput, tslib.__assign({}, restProps, { ref: ref, stylesInput: styles })); });

package/code-input/mobile/mobile.css

@@ -45,8 +45,8 @@
     /* error mobile */
 } :root {
     --code-input-mobile-bg-color: var(--color-light-neutral-translucent-100);
-} .code-input__component_3ppg8 {
+} .code-input__component_i7fst {
     background-color: var(--code-input-mobile-bg-color);
-} .code-input__compact_3ppg8 {
+} .code-input__compact_i7fst {
     margin-right: var(--gap-2xs);
 }

package/code-input/modern/components/base-code-input/component.js

@@ -2,12 +2,12 @@ import React, { forwardRef, useMemo, createRef, useState, useRef, useImperativeH
 import cn from 'classnames';
 import { Input } from '../input/component.js';
 
-const styles = {"component":"code-input__component_xzy44","error":"code-input__error_xzy44","shake":"code-input__shake_xzy44"};
+const styles = {"component":"code-input__component_r43gd","error":"code-input__error_r43gd","shake":"code-input__shake_r43gd"};
 require('./index.css');
 
 /** После истечения этого времени код очищается */
-const CODE_ERROR_HINT_VISIBLE_DURATION = 300;
-const BaseCodeInput = forwardRef(({ className, disabled, error, fields = 4, initialValues = '', dataTestId, clearCodeOnError = true, onErrorAnimationEnd, onChange, onComplete, stylesInput = {}, }, ref) => {
+const CODE_ERROR_HINT_VISIBLE_DURATION = 1300;
+const BaseCodeInput = forwardRef(({ className, disabled, error, fields = 4, initialValues = '', dataTestId, clearCodeOnError = true, errorVisibleDuration = CODE_ERROR_HINT_VISIBLE_DURATION, onErrorAnimationEnd, onChange, onComplete, stylesInput = {}, }, ref) => {
     const inputRefs = useMemo(() => Array(fields)
         .fill({})
         .map(() => createRef()), [fields]);
@@ -149,7 +149,7 @@ const BaseCodeInput = forwardRef(({ className, disabled, error, fields = 4, init
                 setValues((prevState) => (values === prevState ? [] : prevState));
             }
             onErrorAnimationEnd?.();
-        }, CODE_ERROR_HINT_VISIBLE_DURATION);
+        }, errorVisibleDuration);
     };
     useEffect(() => () => {
         if (clearErrorTimerId.current) {

package/code-input/modern/components/base-code-input/index.css

@@ -16,17 +16,17 @@
     --gap-xs: 8px;
 } :root {
 } :root {
-} .code-input__component_xzy44 {
+} .code-input__component_r43gd {
     display: flex;
     flex-direction: column;
-} .code-input__error_xzy44 {
+} .code-input__error_r43gd {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
 
     margin-top: var(--gap-xs);
     color: var(--color-light-text-negative);
-} @keyframes code-input__shake_xzy44 {
+} @keyframes code-input__shake_r43gd {
     0% {
         transform: translateX(0);
     }
@@ -42,6 +42,6 @@
     100% {
         transform: translateX(0);
     }
-} .code-input__shake_xzy44 {
-    animation: code-input__shake_xzy44 0.15s linear 0s 3;
+} .code-input__shake_r43gd {
+    animation: code-input__shake_r43gd 0.15s linear 0s 3;
 }

package/code-input/modern/components/input/component.js

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 
-const styles = {"component":"code-input__component_1jvpb","input":"code-input__input_1jvpb","hasError":"code-input__hasError_1jvpb","disabled":"code-input__disabled_1jvpb","compact":"code-input__compact_1jvpb"};
+const styles = {"component":"code-input__component_1czun","input":"code-input__input_1czun","hasError":"code-input__hasError_1czun","disabled":"code-input__disabled_1czun","compact":"code-input__compact_1czun"};
 require('./index.css');
 
 const Input = forwardRef(({ index, error, disabled, value = '', compact = false, onChange, onKeyDown, onFocus, stylesInput = {}, }, ref) => {

package/code-input/modern/components/input/index.css

@@ -55,9 +55,9 @@
     --code-input-font-family: var(--font-family-system);
     --code-input-text-color: var(--color-light-text-primary);
     --code-input-error-bg-color: var(--color-light-status-muted-negative);
-} .code-input__component_1jvpb {
+} .code-input__component_1czun {
     display: flex;
-} .code-input__input_1jvpb {
+} .code-input__input_1czun {
     flex-shrink: 0;
     width: 36px;
     height: 48px;
@@ -72,25 +72,25 @@
     font-size: var(--code-input-font-size);
     font-weight: var(--code-input-font-weight);
     font-family: var(--code-input-font-family)
-} .code-input__input_1jvpb:last-child {
+} .code-input__input_1czun:last-child {
         margin-right: 0;
-    } .code-input__input_1jvpb.code-input__hasError_1jvpb {
+    } .code-input__input_1czun.code-input__hasError_1czun {
         color: var(--color-light-text-negative);
         caret-color: var(--code-input-text-color);
         background-color: var(--code-input-error-bg-color);
-    } .code-input__input_1jvpb.code-input__disabled_1jvpb {
+    } .code-input__input_1czun.code-input__disabled_1czun {
         color: var(--color-light-text-tertiary);
         opacity: 1;
-    } .code-input__input_1jvpb:-webkit-autofill {
+    } .code-input__input_1czun:-webkit-autofill {
         -webkit-text-fill-color: var(--code-input-text-color);
-    } .code-input__input_1jvpb:-webkit-autofill,
-    .code-input__input_1jvpb:-webkit-autofill:hover,
-    .code-input__input_1jvpb:-webkit-autofill:focus,
-    .code-input__input_1jvpb:-webkit-autofill:active {
+    } .code-input__input_1czun:-webkit-autofill,
+    .code-input__input_1czun:-webkit-autofill:hover,
+    .code-input__input_1czun:-webkit-autofill:focus,
+    .code-input__input_1czun:-webkit-autofill:active {
         /* Hack from http://stackoverflow.com/a/29350537 */
         -webkit-transition: background-color 999999s ease-in-out 0s;
         transition: background-color 999999s ease-in-out 0s;
-    } .code-input__compact_1jvpb {
+    } .code-input__compact_1czun {
     width: 32px;
     height: 48px;
 }

package/code-input/modern/desktop/Component.desktop.js

@@ -3,7 +3,7 @@ import { BaseCodeInput } from '../components/base-code-input/component.js';
 import 'classnames';
 import '../components/input/component.js';
 
-const styles = {"component":"code-input__component_gpae6"};
+const styles = {"component":"code-input__component_195vv"};
 require('./desktop.css');
 
 const CodeInputDesktop = forwardRef((restProps, ref) => React.createElement(BaseCodeInput, { ...restProps, ref: ref, stylesInput: styles }));

package/code-input/modern/desktop/desktop.css

@@ -45,6 +45,6 @@
     /* error mobile */
 } :root {
     --code-input-bg-color: var(--form-control-bg-color);
-} .code-input__component_gpae6 {
+} .code-input__component_195vv {
     background-color: var(--code-input-bg-color);
 }

package/code-input/modern/mobile/Component.mobile.js

@@ -3,7 +3,7 @@ import { BaseCodeInput } from '../components/base-code-input/component.js';
 import 'classnames';
 import '../components/input/component.js';
 
-const styles = {"component":"code-input__component_3ppg8","compact":"code-input__compact_3ppg8"};
+const styles = {"component":"code-input__component_i7fst","compact":"code-input__compact_i7fst"};
 require('./mobile.css');
 
 const CodeInputMobile = forwardRef((restProps, ref) => React.createElement(BaseCodeInput, { ...restProps, ref: ref, stylesInput: styles }));

package/code-input/modern/mobile/mobile.css

@@ -45,8 +45,8 @@
     /* error mobile */
 } :root {
     --code-input-mobile-bg-color: var(--color-light-neutral-translucent-100);
-} .code-input__component_3ppg8 {
+} .code-input__component_i7fst {
     background-color: var(--code-input-mobile-bg-color);
-} .code-input__compact_3ppg8 {
+} .code-input__compact_i7fst {
     margin-right: var(--gap-2xs);
 }

package/code-input/modern/typings.d.ts

@@ -29,6 +29,11 @@ type BaseCodeInputProps = {
      * @default true
      */
     clearCodeOnError?: boolean;
+    /**
+     * Продолжительность отображения ошибки
+     * @default 1300
+     */
+    errorVisibleDuration?: number;
     /**
      * Коллбэк вызываемый после окончания проигрывания анимации при возникновении ошибки.
      */

package/code-input/typings.d.ts

@@ -29,6 +29,11 @@ type BaseCodeInputProps = {
      * @default true
      */
     clearCodeOnError?: boolean;
+    /**
+     * Продолжительность отображения ошибки
+     * @default 1300
+     */
+    errorVisibleDuration?: number;
     /**
      * Коллбэк вызываемый после окончания проигрывания анимации при возникновении ошибки.
      */

package/collapse/Component.js

@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var debounce__default = /*#__PURE__*/_interopDefaultCompat(debounce);
 
-var styles = {"collapse":"collapse__collapse_z0lyp","content":"collapse__content_z0lyp","expandedContent":"collapse__expandedContent_z0lyp","expandedLabel":"collapse__expandedLabel_z0lyp","toggleIcon":"collapse__toggleIcon_z0lyp"};
+var styles = {"collapse":"collapse__collapse_9ulzu","content":"collapse__content_9ulzu","expandedContent":"collapse__expandedContent_9ulzu","expandedLabel":"collapse__expandedLabel_9ulzu","toggleIcon":"collapse__toggleIcon_9ulzu"};
 require('./index.css');
 
 var Collapse = React.forwardRef(function (_a, ref) {

package/collapse/esm/Component.js

@@ -6,7 +6,7 @@ import { Link } from '../../link/esm';
 import { ChevronDownSIcon } from '@alfalab/icons-glyph/ChevronDownSIcon';
 import { ChevronUpSIcon } from '@alfalab/icons-glyph/ChevronUpSIcon';
 
-var styles = {"collapse":"collapse__collapse_z0lyp","content":"collapse__content_z0lyp","expandedContent":"collapse__expandedContent_z0lyp","expandedLabel":"collapse__expandedLabel_z0lyp","toggleIcon":"collapse__toggleIcon_z0lyp"};
+var styles = {"collapse":"collapse__collapse_9ulzu","content":"collapse__content_9ulzu","expandedContent":"collapse__expandedContent_9ulzu","expandedLabel":"collapse__expandedLabel_9ulzu","toggleIcon":"collapse__toggleIcon_9ulzu"};
 require('./index.css');
 
 var Collapse = forwardRef(function (_a, ref) {

package/collapse/esm/index.css

@@ -17,24 +17,24 @@
 } :root {
     --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
-} .collapse__collapse_z0lyp {
+} .collapse__collapse_9ulzu {
     font-family: var(--font-family);
-} .collapse__collapse_z0lyp *,
-.collapse__collapse_z0lyp:before,
-.collapse__collapse_z0lyp:after {
+} .collapse__collapse_9ulzu *,
+.collapse__collapse_9ulzu:before,
+.collapse__collapse_9ulzu:after {
     box-sizing: border-box;
-} .collapse__content_z0lyp {
+} .collapse__content_9ulzu {
     position: relative;
     overflow: hidden;
     visibility: hidden;
     height: 0;
     transition: height 0.2s;
-} .collapse__expandedContent_z0lyp {
+} .collapse__expandedContent_9ulzu {
     visibility: visible;
     height: auto;
     transform: translate3d(0, 0, 0);
-} .collapse__expandedLabel_z0lyp {
+} .collapse__expandedLabel_9ulzu {
     margin-top: 15px;
-} .collapse__toggleIcon_z0lyp {
+} .collapse__toggleIcon_9ulzu {
     margin: var(--gap-2xs);
 }

package/collapse/index.css

@@ -17,24 +17,24 @@
 } :root {
     --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
-} .collapse__collapse_z0lyp {
+} .collapse__collapse_9ulzu {
     font-family: var(--font-family);
-} .collapse__collapse_z0lyp *,
-.collapse__collapse_z0lyp:before,
-.collapse__collapse_z0lyp:after {
+} .collapse__collapse_9ulzu *,
+.collapse__collapse_9ulzu:before,
+.collapse__collapse_9ulzu:after {
     box-sizing: border-box;
-} .collapse__content_z0lyp {
+} .collapse__content_9ulzu {
     position: relative;
     overflow: hidden;
     visibility: hidden;
     height: 0;
     transition: height 0.2s;
-} .collapse__expandedContent_z0lyp {
+} .collapse__expandedContent_9ulzu {
     visibility: visible;
     height: auto;
     transform: translate3d(0, 0, 0);
-} .collapse__expandedLabel_z0lyp {
+} .collapse__expandedLabel_9ulzu {
     margin-top: 15px;
-} .collapse__toggleIcon_z0lyp {
+} .collapse__toggleIcon_9ulzu {
     margin: var(--gap-2xs);
 }

package/collapse/modern/Component.js

@@ -6,7 +6,7 @@ import { Link } from '../../link/modern';
 import { ChevronDownSIcon } from '@alfalab/icons-glyph/ChevronDownSIcon';
 import { ChevronUpSIcon } from '@alfalab/icons-glyph/ChevronUpSIcon';
 
-const styles = {"collapse":"collapse__collapse_z0lyp","content":"collapse__content_z0lyp","expandedContent":"collapse__expandedContent_z0lyp","expandedLabel":"collapse__expandedLabel_z0lyp","toggleIcon":"collapse__toggleIcon_z0lyp"};
+const styles = {"collapse":"collapse__collapse_9ulzu","content":"collapse__content_9ulzu","expandedContent":"collapse__expandedContent_9ulzu","expandedLabel":"collapse__expandedLabel_9ulzu","toggleIcon":"collapse__toggleIcon_9ulzu"};
 require('./index.css');
 
 const Collapse = forwardRef(({ expanded, collapsedLabel, expandedLabel, children, className, expandedContentClassName, id, onTransitionEnd, onExpandedChange, defaultExpanded = false, dataTestId, }, ref) => {

package/collapse/modern/index.css

@@ -17,24 +17,24 @@
 } :root {
     --font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
         sans-serif;
-} .collapse__collapse_z0lyp {
+} .collapse__collapse_9ulzu {
     font-family: var(--font-family);
-} .collapse__collapse_z0lyp *,
-.collapse__collapse_z0lyp:before,
-.collapse__collapse_z0lyp:after {
+} .collapse__collapse_9ulzu *,
+.collapse__collapse_9ulzu:before,
+.collapse__collapse_9ulzu:after {
     box-sizing: border-box;
-} .collapse__content_z0lyp {
+} .collapse__content_9ulzu {
     position: relative;
     overflow: hidden;
     visibility: hidden;
     height: 0;
     transition: height 0.2s;
-} .collapse__expandedContent_z0lyp {
+} .collapse__expandedContent_9ulzu {
     visibility: visible;
     height: auto;
     transform: translate3d(0, 0, 0);
-} .collapse__expandedLabel_z0lyp {
+} .collapse__expandedLabel_9ulzu {
     margin-top: 15px;
-} .collapse__toggleIcon_z0lyp {
+} .collapse__toggleIcon_9ulzu {
     margin: var(--gap-2xs);
 }

package/comment/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":"comment__component_mke1z","rowLimit2":"comment__rowLimit2_mke1z","rowLimit5":"comment__rowLimit5_mke1z"};
+var styles = {"component":"comment__component_mdymt","rowLimit2":"comment__rowLimit2_mdymt","rowLimit5":"comment__rowLimit5_mdymt"};
 require('./index.css');
 
 var Comment = function (_a) {

package/comment/esm/Component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { Typography } from '../../typography/esm';
 
-var styles = {"component":"comment__component_mke1z","rowLimit2":"comment__rowLimit2_mke1z","rowLimit5":"comment__rowLimit5_mke1z"};
+var styles = {"component":"comment__component_mdymt","rowLimit2":"comment__rowLimit2_mdymt","rowLimit5":"comment__rowLimit5_mdymt"};
 require('./index.css');
 
 var Comment = function (_a) {

package/comment/esm/index.css

@@ -18,19 +18,19 @@
     --gap-m: 16px;
 } :root {
 } :root {
-} .comment__component_mke1z {
+} .comment__component_mdymt {
     width: -moz-fit-content;
     width: fit-content;
     padding: 10px var(--gap-m);
     background-color: var(--color-light-neutral-100);
     border-radius: var(--border-radius-s) var(--border-radius-xxl) var(--border-radius-xxl)
         var(--border-radius-xxl);
-} .comment__rowLimit2_mke1z {
+} .comment__rowLimit2_mdymt {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
-} .comment__rowLimit5_mke1z {
+} .comment__rowLimit5_mdymt {
     display: -webkit-box;
     -webkit-line-clamp: 5;
     -webkit-box-orient: vertical;

package/comment/index.css

@@ -18,19 +18,19 @@
     --gap-m: 16px;
 } :root {
 } :root {
-} .comment__component_mke1z {
+} .comment__component_mdymt {
     width: -moz-fit-content;
     width: fit-content;
     padding: 10px var(--gap-m);
     background-color: var(--color-light-neutral-100);
     border-radius: var(--border-radius-s) var(--border-radius-xxl) var(--border-radius-xxl)
         var(--border-radius-xxl);
-} .comment__rowLimit2_mke1z {
+} .comment__rowLimit2_mdymt {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
-} .comment__rowLimit5_mke1z {
+} .comment__rowLimit5_mdymt {
     display: -webkit-box;
     -webkit-line-clamp: 5;
     -webkit-box-orient: vertical;

package/comment/modern/Component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { Typography } from '../../typography/modern';
 
-const styles = {"component":"comment__component_mke1z","rowLimit2":"comment__rowLimit2_mke1z","rowLimit5":"comment__rowLimit5_mke1z"};
+const styles = {"component":"comment__component_mdymt","rowLimit2":"comment__rowLimit2_mdymt","rowLimit5":"comment__rowLimit5_mdymt"};
 require('./index.css');
 
 const Comment = ({ className, dataTestId, children, rowLimit }) => {

package/comment/modern/index.css

@@ -18,19 +18,19 @@
     --gap-m: 16px;
 } :root {
 } :root {
-} .comment__component_mke1z {
+} .comment__component_mdymt {
     width: -moz-fit-content;
     width: fit-content;
     padding: 10px var(--gap-m);
     background-color: var(--color-light-neutral-100);
     border-radius: var(--border-radius-s) var(--border-radius-xxl) var(--border-radius-xxl)
         var(--border-radius-xxl);
-} .comment__rowLimit2_mke1z {
+} .comment__rowLimit2_mdymt {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
-} .comment__rowLimit5_mke1z {
+} .comment__rowLimit5_mdymt {
     display: -webkit-box;
     -webkit-line-clamp: 5;
     -webkit-box-orient: vertical;

package/confirmation/components/base-confirmation/component.js

@@ -17,7 +17,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":"confirmation__component_a4t95"};
+var styles = {"component":"confirmation__component_1t8ar"};
 require('./index.css');
 
 var confirmationScreens = {
@@ -27,7 +27,7 @@ var confirmationScreens = {
     TEMP_BLOCK: components_screens_tempBlock_component.TempBlock,
 };
 var BaseConfirmation = function (_a) {
-    var state = _a.state, screen = _a.screen, _b = _a.alignContent, alignContent = _b === void 0 ? 'left' : _b; _a.children; var _c = _a.requiredCharAmount, requiredCharAmount = _c === void 0 ? 5 : _c, _d = _a.countdownDuration, countdownDuration = _d === void 0 ? utils.ONE_MINUTE : _d, _e = _a.tempBlockDuration, tempBlockDuration = _e === void 0 ? utils.ONE_DAY : _e, phone = _a.phone, blockSmsRetry = _a.blockSmsRetry, dataTestId = _a.dataTestId, className = _a.className, getScreensMap = _a.getScreensMap, onInputFinished = _a.onInputFinished, onChangeState = _a.onChangeState, onSmsRetryClick = _a.onSmsRetryClick, onChangeScreen = _a.onChangeScreen, onFatalErrorOkButtonClick = _a.onFatalErrorOkButtonClick, onTempBlockFinished = _a.onTempBlockFinished, mobile = _a.mobile, _f = _a.clearCodeOnError, clearCodeOnError = _f === void 0 ? true : _f, _g = _a.hideCountdownSection, hideCountdownSection = _g === void 0 ? false : _g, _h = _a.breakpoint, breakpoint = _h === void 0 ? 1024 : _h, initialScreenHintSlot = _a.initialScreenHintSlot, restProps = tslib.__rest(_a, ["state", "screen", "alignContent", "children", "requiredCharAmount", "countdownDuration", "tempBlockDuration", "phone", "blockSmsRetry", "dataTestId", "className", "getScreensMap", "onInputFinished", "onChangeState", "onSmsRetryClick", "onChangeScreen", "onFatalErrorOkButtonClick", "onTempBlockFinished", "mobile", "clearCodeOnError", "hideCountdownSection", "breakpoint", "initialScreenHintSlot"]);
+    var state = _a.state, screen = _a.screen, _b = _a.alignContent, alignContent = _b === void 0 ? 'left' : _b; _a.children; var _c = _a.requiredCharAmount, requiredCharAmount = _c === void 0 ? 5 : _c, _d = _a.countdownDuration, countdownDuration = _d === void 0 ? utils.ONE_MINUTE : _d, _e = _a.tempBlockDuration, tempBlockDuration = _e === void 0 ? utils.ONE_DAY : _e, phone = _a.phone, blockSmsRetry = _a.blockSmsRetry, dataTestId = _a.dataTestId, className = _a.className, getScreensMap = _a.getScreensMap, onInputFinished = _a.onInputFinished, onChangeState = _a.onChangeState, onSmsRetryClick = _a.onSmsRetryClick, onChangeScreen = _a.onChangeScreen, onFatalErrorOkButtonClick = _a.onFatalErrorOkButtonClick, onTempBlockFinished = _a.onTempBlockFinished, mobile = _a.mobile, _f = _a.clearCodeOnError, clearCodeOnError = _f === void 0 ? true : _f, _g = _a.hideCountdownSection, hideCountdownSection = _g === void 0 ? false : _g, _h = _a.breakpoint, breakpoint = _h === void 0 ? 1024 : _h, initialScreenHintSlot = _a.initialScreenHintSlot, errorVisibleDuration = _a.errorVisibleDuration, restProps = tslib.__rest(_a, ["state", "screen", "alignContent", "children", "requiredCharAmount", "countdownDuration", "tempBlockDuration", "phone", "blockSmsRetry", "dataTestId", "className", "getScreensMap", "onInputFinished", "onChangeState", "onSmsRetryClick", "onChangeScreen", "onFatalErrorOkButtonClick", "onTempBlockFinished", "mobile", "clearCodeOnError", "hideCountdownSection", "breakpoint", "initialScreenHintSlot", "errorVisibleDuration"]);
     var _j = utils.useCountdown(countdownDuration), timeLeft = _j[0], startTimer = _j[1], stopTimer = _j[2];
     var prevState = hooks.usePrevious(state);
     React.useEffect(function () {
@@ -80,6 +80,7 @@ var BaseConfirmation = function (_a) {
         onChangeState: onChangeState,
         onChangeScreen: onChangeScreen,
         clearCodeOnError: clearCodeOnError,
+        errorVisibleDuration: errorVisibleDuration,
         initialScreenHintSlot: initialScreenHintSlot,
         onInputFinished: handleInputFinished,
         onSmsRetryClick: handleSmsRetry,