@alfalab/core-components-confirmation 15.1.1 → 15.2.0-alfasans

package/components/base-confirmation/index.css

@@ -4,11 +4,11 @@
 :root {
     --gap-0: 0px;
 }
-.confirmation__component_1smkm {
+.confirmation__component_qx2rg {
     width: 100%;
     max-width: 388px;
     color: var(--color-light-text-secondary);
 }
-.confirmation__component_1smkm.confirmation__center_1smkm {
+.confirmation__component_qx2rg.confirmation__center_qx2rg {
         margin: var(--gap-0) auto;
     }

package/components/base-confirmation/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"confirmation__component_1smkm","center":"confirmation__center_1smkm"};
+var styles = {"component":"confirmation__component_qx2rg","center":"confirmation__center_qx2rg"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/countdown-loader/index.css

@@ -1,7 +1,7 @@
 :root {
     --color-light-neutral-500: #babbc2;
 }
-.confirmation__circle_cq7rs {
+.confirmation__circle_1946z {
     fill: transparent;
     stroke: var(--color-light-neutral-500);
     stroke-width: 2px;

package/components/countdown-loader/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"circle":"confirmation__circle_cq7rs"};
+var styles = {"circle":"confirmation__circle_1946z"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/header/component.js

@@ -3,17 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var cn = require('classnames');
 var coreComponentsTypography = require('@alfalab/core-components-typography');
 var index_module = require('./index.module.css.js');
 
 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 Header = function (_a) {
     var mobile = _a.mobile, children = _a.children, _b = _a.titleTag, titleTag = _b === void 0 ? 'h3' : _b;
     var Tag = mobile ? coreComponentsTypography.TitleMobile : coreComponentsTypography.TitleDesktop;
-    return (React__default.default.createElement(Tag, { font: 'system', view: 'small', className: index_module.header, tag: titleTag, color: 'primary', defaultMargins: false }, children));
+    return (React__default.default.createElement(Tag, { font: 'system', view: 'small', className: cn__default.default(mobile ? index_module.headerMobile : index_module.header), tag: titleTag, color: 'primary', defaultMargins: false }, children));
 };
 
 exports.Header = Header;

package/components/header/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../src/components/header/component.tsx"],"sourcesContent":["import React, { type FC, type ReactNode } from 'react';\n\nimport { TitleDesktop, TitleMobile } from '@alfalab/core-components-typography';\n\nimport styles from './index.module.css';\n\nexport type HeaderProps = {\n    /**\n     * Контент шапки\n     */\n    children?: ReactNode;\n\n    /**\n     * Отображать в мобильной версии экран компонента\n     */\n    mobile?: boolean;\n\n    /**\n     * HTML тег для заголовка\n     * @default 'h3'\n     */\n    titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n};\n\nexport const Header: FC<HeaderProps> = ({ mobile, children, titleTag = 'h3' }) => {\n    const Tag = mobile ? TitleMobile : TitleDesktop;\n\n    return (\n        <Tag\n            font='system'\n            view='small'\n            className={styles.header}\n            tag={titleTag}\n            color='primary'\n            defaultMargins={false}\n        >\n            {children}\n        </Tag>\n    );\n};\n"],"names":["TitleMobile","TitleDesktop","React","styles"],"mappings":";;;;;;;;;;;;AAwBO,IAAM,MAAM,GAAoB,UAAC,EAAqC,EAAA;QAAnC,MAAM,GAAA,EAAA,CAAA,MAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,gBAAe,EAAf,QAAQ,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,GAAA,EAAA;IACvE,IAAM,GAAG,GAAG,MAAM,GAAGA,oCAAW,GAAGC,qCAAY;AAE/C,IAAA,QACIC,sBAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EACA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,OAAO,EACZ,SAAS,EAAEC,YAAM,CAAC,MAAM,EACxB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAC,SAAS,EACf,cAAc,EAAE,KAAK,EAAA,EAEpB,QAAQ,CACP;AAEd;;;;"}
+{"version":3,"file":"component.js","sources":["../../src/components/header/component.tsx"],"sourcesContent":["import React, { type FC, type ReactNode } from 'react';\nimport cn from 'classnames';\n\nimport { TitleDesktop, TitleMobile } from '@alfalab/core-components-typography';\n\nimport styles from './index.module.css';\n\nexport type HeaderProps = {\n    /**\n     * Контент шапки\n     */\n    children?: ReactNode;\n\n    /**\n     * Отображать в мобильной версии экран компонента\n     */\n    mobile?: boolean;\n\n    /**\n     * HTML тег для заголовка\n     * @default 'h3'\n     */\n    titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n};\n\nexport const Header: FC<HeaderProps> = ({ mobile, children, titleTag = 'h3' }) => {\n    const Tag = mobile ? TitleMobile : TitleDesktop;\n\n    return (\n        <Tag\n            font='system'\n            view='small'\n            className={cn(mobile ? styles.headerMobile : styles.header)}\n            tag={titleTag}\n            color='primary'\n            defaultMargins={false}\n        >\n            {children}\n        </Tag>\n    );\n};\n"],"names":["TitleMobile","TitleDesktop","React","cn","styles"],"mappings":";;;;;;;;;;;;;;AAyBO,IAAM,MAAM,GAAoB,UAAC,EAAqC,EAAA;QAAnC,MAAM,GAAA,EAAA,CAAA,MAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,gBAAe,EAAf,QAAQ,GAAG,EAAA,KAAA,MAAA,GAAA,IAAI,GAAA,EAAA;IACvE,IAAM,GAAG,GAAG,MAAM,GAAGA,oCAAW,GAAGC,qCAAY;IAE/C,QACIC,qCAAC,GAAG,EAAA,EACA,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,OAAO,EACZ,SAAS,EAAEC,mBAAE,CAAC,MAAM,GAAGC,YAAM,CAAC,YAAY,GAAGA,YAAM,CAAC,MAAM,CAAC,EAC3D,GAAG,EAAE,QAAQ,EACb,KAAK,EAAC,SAAS,EACf,cAAc,EAAE,KAAK,EAEpB,EAAA,QAAQ,CACP;AAEd;;;;"}

package/components/header/index.css

@@ -1,6 +1,45 @@
+:root {
+    --color-light-text-primary: rgba(3, 3, 6, 0.88);
+}
 :root {
     --gap-24: 24px;
 }
-.confirmation__header_mycid.confirmation__header_mycid {
-    margin-bottom: var(--gap-24);
+:root {
+    --font-family-alfasans:
+        'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Helvetica, sans-serif;
+}
+:root {
+    --confirmation-header-font-family: var(--font-family-alfasans);
+    --confirmation-header-font-size: 22px;
+    --confirmation-header-font-weight: 700;
+    --confirmation-header-line-height: 26px;
+    --confirmation-header-letter-spacing: 0.2px;
+    --confirmation-header-color: var(--color-light-text-primary);
+    --confirmation-header-margin-bottom: var(--gap-24);
+    --confirmation-header-font-family-mobile: var(--font-family-alfasans);
+    --confirmation-header-font-size-mobile: 20px;
+    --confirmation-header-font-weight-mobile: 600;
+    --confirmation-header-line-height-mobile: 28px;
+    --confirmation-header-line-letter-spacing-mobile: -0.15px;
+    --confirmation-header-color-mobile: var(--color-light-text-primary);
+    --confirmation-header-margin-bottom-mobile: var(--gap-24);
 }
+.confirmation__header_yqoq5.confirmation__header_yqoq5 {
+        margin-bottom: var(--confirmation-header-margin-bottom);
+        font-family: var(--confirmation-header-font-family);
+        font-size: var(--confirmation-header-font-size);
+        font-weight: var(--confirmation-header-font-weight);
+        line-height: var(--confirmation-header-line-height);
+        letter-spacing: var(--confirmation-header-letter-spacing);
+        color: var(--confirmation-header-color);
+    }
+.confirmation__headerMobile_yqoq5.confirmation__headerMobile_yqoq5 {
+        margin-bottom: var(--confirmation-header-margin-bottom-mobile);
+        font-family: var(--confirmation-header-font-family-mobile);
+        font-size: var(--confirmation-header-font-size-mobile);
+        font-weight: var(--confirmation-header-font-weight-mobile);
+        line-height: var(--confirmation-header-line-height-mobile);
+        letter-spacing: var(--confirmation-header-line-letter-spacing-mobile);
+        color: var(--confirmation-header-color-mobile);
+    }

package/components/header/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"header":"confirmation__header_mycid"};
+var styles = {"header":"confirmation__header_yqoq5","headerMobile":"confirmation__headerMobile_yqoq5"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/header/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../src/components/header/index.module.css"],"sourcesContent":["@import '../../vars.css';\n\n.header.header {\n    margin-bottom: var(--gap-24);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,4BAA4B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../src/components/header/index.module.css"],"sourcesContent":["@import '../../vars.css';\n\n.header {\n    && {\n        margin-bottom: var(--confirmation-header-margin-bottom);\n        font-family: var(--confirmation-header-font-family);\n        font-size: var(--confirmation-header-font-size);\n        font-weight: var(--confirmation-header-font-weight);\n        line-height: var(--confirmation-header-line-height);\n        letter-spacing: var(--confirmation-header-letter-spacing);\n        color: var(--confirmation-header-color);\n    }\n}\n\n.headerMobile {\n    && {\n        margin-bottom: var(--confirmation-header-margin-bottom-mobile);\n        font-family: var(--confirmation-header-font-family-mobile);\n        font-size: var(--confirmation-header-font-size-mobile);\n        font-weight: var(--confirmation-header-font-weight-mobile);\n        line-height: var(--confirmation-header-line-height-mobile);\n        letter-spacing: var(--confirmation-header-line-letter-spacing-mobile);\n        color: var(--confirmation-header-color-mobile);\n    }\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,QAAQ,CAAC,4BAA4B,CAAC,cAAc,CAAC,kCAAkC,CAAC;;;;"}

package/components/screens/fatal-error/component.js

@@ -16,16 +16,16 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
 var FatalError = function (_a) {
-    var _b;
+    var _b, _c;
     var mobile = _a.mobile;
-    var _c = React.useContext(context.ConfirmationContext), alignContent = _c.alignContent, titleTag = _c.titleTag, texts = _c.texts, onFatalErrorOkButtonClick = _c.onFatalErrorOkButtonClick, breakpoint = _c.breakpoint, client = _c.client;
+    var _d = React.useContext(context.ConfirmationContext), alignContent = _d.alignContent, titleTag = _d.titleTag, texts = _d.texts, onFatalErrorOkButtonClick = _d.onFatalErrorOkButtonClick, breakpoint = _d.breakpoint, client = _d.client;
     return (React__default.default.createElement("div", { className: cn__default.default(index_module.component, index_module[alignContent]) },
         React__default.default.createElement(component.Header, { mobile: mobile, titleTag: titleTag }, texts.fatalErrorTitle),
         React__default.default.createElement(coreComponentsTypography.TypographyText, { view: 'primary-medium', color: 'primary', className: cn__default.default((_b = {},
                 _b[index_module.typographyTheme] = !mobile,
                 _b[index_module.typographyThemeMobile] = mobile,
                 _b)) }, texts.fatalErrorDescription),
-        React__default.default.createElement(coreComponentsButton.Button, { size: mobile ? 40 : 48, view: 'secondary', onClick: onFatalErrorOkButtonClick, className: index_module.button, breakpoint: breakpoint, client: client }, texts.fatalErrorButton)));
+        React__default.default.createElement(coreComponentsButton.Button, { size: mobile ? 40 : 48, view: 'secondary', onClick: onFatalErrorOkButtonClick, className: cn__default.default(index_module.button, (_c = {}, _c[index_module.buttonMobile] = mobile, _c)), breakpoint: breakpoint, client: client }, texts.fatalErrorButton)));
 };
 
 exports.FatalError = FatalError;

package/components/screens/fatal-error/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/screens/fatal-error/component.tsx"],"sourcesContent":["import React, { type FC, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { Header } from '../../header';\n\nimport styles from './index.module.css';\n\nexport type FatalErrorProps = {\n    /**\n     * Отображать в мобильной версии экран компонента\n     */\n    mobile?: boolean;\n};\n\nexport const FatalError: FC<FatalErrorProps> = ({ mobile }) => {\n    const { alignContent, titleTag, texts, onFatalErrorOkButtonClick, breakpoint, client } =\n        useContext(ConfirmationContext);\n\n    return (\n        <div className={cn(styles.component, styles[alignContent])}>\n            <Header mobile={mobile} titleTag={titleTag}>\n                {texts.fatalErrorTitle}\n            </Header>\n\n            <TypographyText\n                view='primary-medium'\n                color='primary'\n                className={cn({\n                    [styles.typographyTheme]: !mobile,\n                    [styles.typographyThemeMobile]: mobile,\n                })}\n            >\n                {texts.fatalErrorDescription}\n            </TypographyText>\n\n            <Button\n                size={mobile ? 40 : 48}\n                view='secondary'\n                onClick={onFatalErrorOkButtonClick}\n                className={styles.button}\n                breakpoint={breakpoint}\n                client={client}\n            >\n                {texts.fatalErrorButton}\n            </Button>\n        </div>\n    );\n};\n"],"names":["useContext","ConfirmationContext","React","cn","styles","Header","TypographyText","Button"],"mappings":";;;;;;;;;;;;;;;;;AAkBO,IAAM,UAAU,GAAwB,UAAC,EAAU,EAAA;;AAAR,IAAA,IAAA,MAAM,GAAA,EAAA,CAAA,MAAA;IAC9C,IAAA,EAAA,GACFA,gBAAU,CAACC,2BAAmB,CAAC,EAD3B,YAAY,GAAA,EAAA,CAAA,YAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,yBAAyB,GAAA,EAAA,CAAA,yBAAA,EAAE,UAAU,GAAA,EAAA,CAAA,UAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MACjD;AAEnC,IAAA,QACIC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,SAAS,EAAEA,YAAM,CAAC,YAAY,CAAC,CAAC,EAAA;AACtD,QAAAF,sBAAA,CAAA,aAAA,CAACG,gBAAM,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAA,EACrC,KAAK,CAAC,eAAe,CACjB;AAET,QAAAH,sBAAA,CAAA,aAAA,CAACI,uCAAc,EAAA,EACX,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,SAAS,EACf,SAAS,EAAEH,mBAAE,EAAA,EAAA,GAAA,EAAA;AACT,gBAAA,EAAA,CAACC,YAAM,CAAC,eAAe,CAAA,GAAG,CAAC,MAAM;AACjC,gBAAA,EAAA,CAACA,YAAM,CAAC,qBAAqB,CAAA,GAAG,MAAM;oBACxC,EAED,EAAA,KAAK,CAAC,qBAAqB,CACf;AAEjB,QAAAF,sBAAA,CAAA,aAAA,CAACK,2BAAM,EACH,EAAA,IAAI,EAAE,MAAM,GAAG,EAAE,GAAG,EAAE,EACtB,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,yBAAyB,EAClC,SAAS,EAAEH,YAAM,CAAC,MAAM,EACxB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,IAEb,KAAK,CAAC,gBAAgB,CAClB,CACP;AAEd;;;;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/screens/fatal-error/component.tsx"],"sourcesContent":["import React, { type FC, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { Header } from '../../header';\n\nimport styles from './index.module.css';\n\nexport type FatalErrorProps = {\n    /**\n     * Отображать в мобильной версии экран компонента\n     */\n    mobile?: boolean;\n};\n\nexport const FatalError: FC<FatalErrorProps> = ({ mobile }) => {\n    const { alignContent, titleTag, texts, onFatalErrorOkButtonClick, breakpoint, client } =\n        useContext(ConfirmationContext);\n\n    return (\n        <div className={cn(styles.component, styles[alignContent])}>\n            <Header mobile={mobile} titleTag={titleTag}>\n                {texts.fatalErrorTitle}\n            </Header>\n\n            <TypographyText\n                view='primary-medium'\n                color='primary'\n                className={cn({\n                    [styles.typographyTheme]: !mobile,\n                    [styles.typographyThemeMobile]: mobile,\n                })}\n            >\n                {texts.fatalErrorDescription}\n            </TypographyText>\n\n            <Button\n                size={mobile ? 40 : 48}\n                view='secondary'\n                onClick={onFatalErrorOkButtonClick}\n                className={cn(styles.button, { [styles.buttonMobile]: mobile })}\n                breakpoint={breakpoint}\n                client={client}\n            >\n                {texts.fatalErrorButton}\n            </Button>\n        </div>\n    );\n};\n"],"names":["useContext","ConfirmationContext","React","cn","styles","Header","TypographyText","Button"],"mappings":";;;;;;;;;;;;;;;;;AAkBO,IAAM,UAAU,GAAwB,UAAC,EAAU,EAAA;;AAAR,IAAA,IAAA,MAAM,GAAA,EAAA,CAAA,MAAA;IAC9C,IAAA,EAAA,GACFA,gBAAU,CAACC,2BAAmB,CAAC,EAD3B,YAAY,GAAA,EAAA,CAAA,YAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,yBAAyB,GAAA,EAAA,CAAA,yBAAA,EAAE,UAAU,GAAA,EAAA,CAAA,UAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MACjD;AAEnC,IAAA,QACIC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,mBAAE,CAACC,YAAM,CAAC,SAAS,EAAEA,YAAM,CAAC,YAAY,CAAC,CAAC,EAAA;AACtD,QAAAF,sBAAA,CAAA,aAAA,CAACG,gBAAM,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAA,EACrC,KAAK,CAAC,eAAe,CACjB;AAET,QAAAH,sBAAA,CAAA,aAAA,CAACI,uCAAc,EAAA,EACX,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,SAAS,EACf,SAAS,EAAEH,mBAAE,EAAA,EAAA,GAAA,EAAA;AACT,gBAAA,EAAA,CAACC,YAAM,CAAC,eAAe,CAAA,GAAG,CAAC,MAAM;AACjC,gBAAA,EAAA,CAACA,YAAM,CAAC,qBAAqB,CAAA,GAAG,MAAM;oBACxC,EAED,EAAA,KAAK,CAAC,qBAAqB,CACf;QAEjBF,sBAAC,CAAA,aAAA,CAAAK,2BAAM,EACH,EAAA,IAAI,EAAE,MAAM,GAAG,EAAE,GAAG,EAAE,EACtB,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,yBAAyB,EAClC,SAAS,EAAEJ,mBAAE,CAACC,YAAM,CAAC,MAAM,GAAI,EAAA,GAAA,EAAA,EAAA,EAAA,CAACA,YAAM,CAAC,YAAY,CAAG,GAAA,MAAM,EAAG,EAAA,EAAA,EAC/D,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EAEb,EAAA,KAAK,CAAC,gBAAgB,CAClB,CACP;AAEd;;;;"}

package/components/screens/fatal-error/index.css

@@ -6,33 +6,53 @@
     --gap-32: 32px;
 }
 :root {
-    --font-family-system:
-        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
+    --font-family-alfasans:
+        'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Helvetica, sans-serif;
 }
 :root {
-    --confirmation-text-color: var(--color-light-text-primary)
-}
-.confirmation__component_6zhqf {
+    --confirmation-text-color: var(--color-light-text-primary);
+    --confirmation-text-font-size: 16px;
+    --confirmation-text-font-weight: 400;
+    --confirmation-text-line-height: 24px;
+    --confirmation-text-letter-spacing: -0.24px;
+    --confirmation-text-font-size-mobile: 16px;
+    --confirmation-text-line-height-mobile: 24px;
+    --confirmation-text-letter-spacing-mobile: -0.24px;
+    --confirmation-fatal-error-description-color: var(--color-light-text-primary);
+    --confirmation-fatal-error-button-margin-top: var(--gap-32);
+    --confirmation-fatal-error-description-color-mobile: var(--color-light-text-secondary);
+    --confirmation-fatal-error-button-margin-top-mobile: var(--gap-32);
+}
+.confirmation__component_18fga {
     display: flex;
     flex-direction: column;
 }
-.confirmation__typographyTheme_6zhqf.confirmation__typographyTheme_6zhqf {
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 400;
-    font-family: var(--font-family-system);
+.confirmation__typographyTheme_18fga.confirmation__typographyTheme_18fga {
+    font-size: var(--confirmation-text-font-size);
+    line-height: var(--confirmation-text-line-height);
+    letter-spacing: var(--confirmation-text-letter-spacing);
+    font-weight: var(--confirmation-text-font-weight);
+    font-family: var(--font-family-alfasans);
     color: var(--confirmation-text-color);
+    color: var(--confirmation-fatal-error-description-color);
 }
-.confirmation__typographyThemeMobile_6zhqf.confirmation__typographyThemeMobile_6zhqf {
-    color: var(--color-light-text-secondary);
+.confirmation__typographyThemeMobile_18fga.confirmation__typographyThemeMobile_18fga {
+    font-size: var(--confirmation-text-font-size-mobile);
+    line-height: var(--confirmation-text-line-height-mobile);
+    letter-spacing: var(--confirmation-text-letter-spacing-mobile);
+    color: var(--confirmation-fatal-error-description-color-mobile);
 }
-.confirmation__left_6zhqf {
+.confirmation__left_18fga {
     align-items: flex-start;
 }
-.confirmation__center_6zhqf {
+.confirmation__center_18fga {
     align-items: center;
     text-align: center;
 }
-.confirmation__button_6zhqf.confirmation__button_6zhqf {
-    margin-top: var(--gap-32);
+.confirmation__button_18fga.confirmation__button_18fga {
+    margin-top: var(--confirmation-fatal-error-button-margin-top);
+}
+.confirmation__button_18fga.confirmation__buttonMobile_18fga {
+    margin-top: var(--confirmation-fatal-error-button-margin-top-mobile);
 }

package/components/screens/fatal-error/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"confirmation__component_6zhqf","typographyTheme":"confirmation__typographyTheme_6zhqf","typographyThemeMobile":"confirmation__typographyThemeMobile_6zhqf","left":"confirmation__left_6zhqf","center":"confirmation__center_6zhqf","button":"confirmation__button_6zhqf"};
+var styles = {"component":"confirmation__component_18fga","typographyTheme":"confirmation__typographyTheme_18fga","typographyThemeMobile":"confirmation__typographyThemeMobile_18fga","left":"confirmation__left_18fga","center":"confirmation__center_18fga","button":"confirmation__button_18fga","buttonMobile":"confirmation__buttonMobile_18fga"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/screens/fatal-error/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../../src/components/screens/fatal-error/index.module.css"],"sourcesContent":["@import '../../../vars.css';\n\n.component {\n    display: flex;\n    flex-direction: column;\n}\n\n.typographyTheme.typographyTheme {\n    @mixin _confirmation-text;\n}\n\n.typographyThemeMobile.typographyThemeMobile {\n    color: var(--color-light-text-secondary);\n}\n\n.left {\n    align-items: flex-start;\n}\n\n.center {\n    align-items: center;\n    text-align: center;\n}\n\n.button.button {\n    margin-top: var(--gap-32);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,MAAM,CAAC,0BAA0B,CAAC,QAAQ,CAAC,4BAA4B,CAAC,QAAQ,CAAC,4BAA4B,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../../src/components/screens/fatal-error/index.module.css"],"sourcesContent":["@import '../../../vars.css';\n\n.component {\n    display: flex;\n    flex-direction: column;\n}\n\n.typographyTheme.typographyTheme {\n    @mixin _confirmation-text;\n    color: var(--confirmation-fatal-error-description-color);\n}\n\n.typographyThemeMobile.typographyThemeMobile {\n    font-size: var(--confirmation-text-font-size-mobile);\n    line-height: var(--confirmation-text-line-height-mobile);\n    letter-spacing: var(--confirmation-text-letter-spacing-mobile);\n    color: var(--confirmation-fatal-error-description-color-mobile);\n}\n\n.left {\n    align-items: flex-start;\n}\n\n.center {\n    align-items: center;\n    text-align: center;\n}\n\n.button.button {\n    margin-top: var(--confirmation-fatal-error-button-margin-top);\n}\n\n.button.buttonMobile {\n    margin-top: var(--confirmation-fatal-error-button-margin-top-mobile);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,MAAM,CAAC,0BAA0B,CAAC,QAAQ,CAAC,4BAA4B,CAAC,QAAQ,CAAC,4BAA4B,CAAC,cAAc,CAAC,kCAAkC,CAAC;;;;"}

package/components/screens/hint/component.js

@@ -18,10 +18,10 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
 var Hint = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var mobile = _a.mobile;
-    var _l = React.useContext(context.ConfirmationContext), alignContent = _l.alignContent, titleTag = _l.titleTag, texts = _l.texts, onChangeScreen = _l.onChangeScreen, onChangeState = _l.onChangeState, breakpoint = _l.breakpoint, client = _l.client;
-    var _m = texts.domesticPhone, domesticPhone = _m === void 0 ? '' : _m, _o = texts.internationalPhone, internationalPhone = _o === void 0 ? '' : _o, hintButton = texts.hintButton;
+    var _m = React.useContext(context.ConfirmationContext), alignContent = _m.alignContent, titleTag = _m.titleTag, texts = _m.texts, onChangeScreen = _m.onChangeScreen, onChangeState = _m.onChangeState, breakpoint = _m.breakpoint, client = _m.client;
+    var _o = texts.domesticPhone, domesticPhone = _o === void 0 ? '' : _o, _p = texts.internationalPhone, internationalPhone = _p === void 0 ? '' : _p, hintButton = texts.hintButton;
     var handleReturnButtonClick = function () {
         onChangeScreen('INITIAL');
         onChangeState('INITIAL');
@@ -31,31 +31,49 @@ var Hint = function (_a) {
         React__default.default.createElement(coreComponentsTypography.TypographyText, { view: 'primary-medium', color: 'primary', className: cn__default.default(index_module.text, (_b = {},
                 _b[index_module.typographyTheme] = !mobile,
                 _b[index_module.typographyThemeMobile] = mobile,
+                _b[index_module.textMobile] = mobile,
                 _b)) }, texts.hintDescription),
         React__default.default.createElement("div", { className: cn__default.default(index_module.phonesWrap, (_c = {},
                 _c[index_module.phonesWrapMobile] = mobile,
                 _c)) },
-            React__default.default.createElement("div", { className: cn__default.default(index_module.phoneWrap, (_d = {}, _d[index_module.phoneContentMobile] = mobile, _d)) },
-                React__default.default.createElement(coreComponentsLink.Link, { href: utils.getPhoneHref(internationalPhone), underline: false, className: cn__default.default(index_module.phoneLink, (_e = {}, _e[index_module.typographyThemeMobile] = mobile, _e)) }, internationalPhone),
-                React__default.default.createElement(coreComponentsTypography.TypographyText, { view: 'primary-medium', color: 'primary', className: cn__default.default(index_module.text, (_f = {},
+            React__default.default.createElement("div", { className: cn__default.default(index_module.phoneWrap, (_d = {},
+                    _d[index_module.phoneContentMobile] = mobile,
+                    _d[index_module.phoneWrapMobile] = mobile,
+                    _d)) },
+                React__default.default.createElement(coreComponentsLink.Link, { href: utils.getPhoneHref(internationalPhone), underline: false, className: cn__default.default(index_module.phoneLink, (_e = {},
+                        _e[index_module.phoneLinkMobile] = mobile,
+                        _e[index_module.typographyThemeMobile] = mobile,
+                        _e)) }, internationalPhone),
+                React__default.default.createElement(coreComponentsTypography.TypographyText, { view: 'primary-medium', color: 'primary', className: cn__default.default(index_module.text, index_module.phoneDescription, (_f = {},
                         _f[index_module.typographyTheme] = !mobile,
                         _f[index_module.typographyThemeMobile] = mobile,
+                        _f[index_module.phoneDescriptionMobile] = mobile,
+                        _f[index_module.textMobile] = mobile,
                         _f)) }, mobile
                     ? 'В\u00A0Москве и\u00A0за\u00A0границей'
                     : ' \u2014\u00A0в\u00A0Москве и\u00A0за\u00A0границей')),
-            React__default.default.createElement("div", { className: cn__default.default(index_module.phoneWrap, (_g = {}, _g[index_module.phoneContentMobile] = mobile, _g)) },
-                React__default.default.createElement(coreComponentsLink.Link, { href: utils.getPhoneHref(domesticPhone), underline: false, className: cn__default.default(index_module.phoneLink, (_h = {}, _h[index_module.typographyThemeMobile] = mobile, _h)) }, domesticPhone),
-                React__default.default.createElement(coreComponentsTypography.TypographyText, { view: 'primary-medium', color: 'primary', className: cn__default.default(index_module.text, (_j = {},
+            React__default.default.createElement("div", { className: cn__default.default(index_module.phoneWrap, (_g = {},
+                    _g[index_module.phoneContentMobile] = mobile,
+                    _g[index_module.phoneWrapMobile] = mobile,
+                    _g)) },
+                React__default.default.createElement(coreComponentsLink.Link, { href: utils.getPhoneHref(domesticPhone), underline: false, className: cn__default.default(index_module.phoneLink, (_h = {},
+                        _h[index_module.phoneLinkMobile] = mobile,
+                        _h[index_module.typographyThemeMobile] = mobile,
+                        _h)) }, domesticPhone),
+                React__default.default.createElement(coreComponentsTypography.TypographyText, { view: 'primary-medium', color: 'primary', className: cn__default.default(index_module.text, index_module.phoneDescription, (_j = {},
                         _j[index_module.typographyTheme] = !mobile,
                         _j[index_module.typographyThemeMobile] = mobile,
+                        _j[index_module.phoneDescriptionMobile] = mobile,
+                        _j[index_module.textMobile] = mobile,
                         _j)) }, mobile
                     ? 'Для\u00A0звонков по\u00A0России'
                     : ' \u2014\u00A0для звонков по\u00A0России'))),
         React__default.default.createElement(coreComponentsTypography.TypographyText, { view: 'primary-medium', color: 'primary', className: cn__default.default(index_module.text, (_k = {},
                 _k[index_module.typographyTheme] = !mobile,
                 _k[index_module.typographyThemeMobile] = mobile,
+                _k[index_module.textMobile] = mobile,
                 _k)) }, texts.hintNotification),
-        React__default.default.createElement(coreComponentsButton.Button, { size: mobile ? 40 : 48, view: 'secondary', onClick: handleReturnButtonClick, className: index_module.hintButton, breakpoint: breakpoint, client: client }, hintButton)));
+        React__default.default.createElement(coreComponentsButton.Button, { size: mobile ? 40 : 48, view: 'secondary', onClick: handleReturnButtonClick, className: cn__default.default(index_module.hintButton, (_l = {}, _l[index_module.hintButtonMobile] = mobile, _l)), breakpoint: breakpoint, client: client }, hintButton)));
 };
 
 exports.Hint = Hint;

package/components/screens/hint/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/screens/hint/component.tsx"],"sourcesContent":["import React, { type FC, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { Link } from '@alfalab/core-components-link';\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { getPhoneHref } from '../../../utils';\nimport { Header } from '../../header';\n\nimport styles from './index.module.css';\n\nexport type HintProps = {\n    /**\n     * Отображать в мобильной версии экран компонента\n     */\n    mobile?: boolean;\n};\n\nexport const Hint: FC<HintProps> = ({ mobile }) => {\n    const { alignContent, titleTag, texts, onChangeScreen, onChangeState, breakpoint, client } =\n        useContext(ConfirmationContext);\n\n    const { domesticPhone = '', internationalPhone = '', hintButton } = texts;\n\n    const handleReturnButtonClick = () => {\n        onChangeScreen('INITIAL');\n        onChangeState('INITIAL');\n    };\n\n    return (\n        <div className={cn(styles.component, styles[alignContent])}>\n            <Header mobile={mobile} titleTag={titleTag}>\n                {texts.hintTitle}\n            </Header>\n\n            <TypographyText\n                view='primary-medium'\n                color='primary'\n                className={cn(styles.text, {\n                    [styles.typographyTheme]: !mobile,\n                    [styles.typographyThemeMobile]: mobile,\n                })}\n            >\n                {texts.hintDescription}\n            </TypographyText>\n\n            <div\n                className={cn(styles.phonesWrap, {\n                    [styles.phonesWrapMobile]: mobile,\n                })}\n            >\n                <div className={cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile })}>\n                    <Link\n                        href={getPhoneHref(internationalPhone)}\n                        underline={false}\n                        className={cn(styles.phoneLink, { [styles.typographyThemeMobile]: mobile })}\n                    >\n                        {internationalPhone}\n                    </Link>\n                    <TypographyText\n                        view='primary-medium'\n                        color='primary'\n                        className={cn(styles.text, {\n                            [styles.typographyTheme]: !mobile,\n                            [styles.typographyThemeMobile]: mobile,\n                        })}\n                    >\n                        {mobile\n                            ? 'В\\u00A0Москве и\\u00A0за\\u00A0границей'\n                            : ' \\u2014\\u00A0в\\u00A0Москве и\\u00A0за\\u00A0границей'}\n                    </TypographyText>\n                </div>\n\n                <div className={cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile })}>\n                    <Link\n                        href={getPhoneHref(domesticPhone)}\n                        underline={false}\n                        className={cn(styles.phoneLink, { [styles.typographyThemeMobile]: mobile })}\n                    >\n                        {domesticPhone}\n                    </Link>\n                    <TypographyText\n                        view='primary-medium'\n                        color='primary'\n                        className={cn(styles.text, {\n                            [styles.typographyTheme]: !mobile,\n                            [styles.typographyThemeMobile]: mobile,\n                        })}\n                    >\n                        {mobile\n                            ? 'Для\\u00A0звонков по\\u00A0России'\n                            : ' \\u2014\\u00A0для звонков по\\u00A0России'}\n                    </TypographyText>\n                </div>\n            </div>\n\n            <TypographyText\n                view='primary-medium'\n                color='primary'\n                className={cn(styles.text, {\n                    [styles.typographyTheme]: !mobile,\n                    [styles.typographyThemeMobile]: mobile,\n                })}\n            >\n                {texts.hintNotification}\n            </TypographyText>\n            <Button\n                size={mobile ? 40 : 48}\n                view='secondary'\n                onClick={handleReturnButtonClick}\n                className={styles.hintButton}\n                breakpoint={breakpoint}\n                client={client}\n            >\n                {hintButton}\n            </Button>\n        </div>\n    );\n};\n"],"names":["useContext","ConfirmationContext","React","cn","styles","Header","TypographyText","Link","getPhoneHref","Button"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/screens/hint/component.tsx"],"sourcesContent":["import React, { type FC, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { Link } from '@alfalab/core-components-link';\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { getPhoneHref } from '../../../utils';\nimport { Header } from '../../header';\n\nimport styles from './index.module.css';\n\nexport type HintProps = {\n    /**\n     * Отображать в мобильной версии экран компонента\n     */\n    mobile?: boolean;\n};\n\nexport const Hint: FC<HintProps> = ({ mobile }) => {\n    const { alignContent, titleTag, texts, onChangeScreen, onChangeState, breakpoint, client } =\n        useContext(ConfirmationContext);\n\n    const { domesticPhone = '', internationalPhone = '', hintButton } = texts;\n\n    const handleReturnButtonClick = () => {\n        onChangeScreen('INITIAL');\n        onChangeState('INITIAL');\n    };\n\n    return (\n        <div className={cn(styles.component, styles[alignContent])}>\n            <Header mobile={mobile} titleTag={titleTag}>\n                {texts.hintTitle}\n            </Header>\n\n            <TypographyText\n                view='primary-medium'\n                color='primary'\n                className={cn(styles.text, {\n                    [styles.typographyTheme]: !mobile,\n                    [styles.typographyThemeMobile]: mobile,\n                    [styles.textMobile]: mobile,\n                })}\n            >\n                {texts.hintDescription}\n            </TypographyText>\n\n            <div\n                className={cn(styles.phonesWrap, {\n                    [styles.phonesWrapMobile]: mobile,\n                })}\n            >\n                <div\n                    className={cn(styles.phoneWrap, {\n                        [styles.phoneContentMobile]: mobile,\n                        [styles.phoneWrapMobile]: mobile,\n                    })}\n                >\n                    <Link\n                        href={getPhoneHref(internationalPhone)}\n                        underline={false}\n                        className={cn(styles.phoneLink, {\n                            [styles.phoneLinkMobile]: mobile,\n                            [styles.typographyThemeMobile]: mobile,\n                        })}\n                    >\n                        {internationalPhone}\n                    </Link>\n                    <TypographyText\n                        view='primary-medium'\n                        color='primary'\n                        className={cn(styles.text, styles.phoneDescription, {\n                            [styles.typographyTheme]: !mobile,\n                            [styles.typographyThemeMobile]: mobile,\n                            [styles.phoneDescriptionMobile]: mobile,\n                            [styles.textMobile]: mobile,\n                        })}\n                    >\n                        {mobile\n                            ? 'В\\u00A0Москве и\\u00A0за\\u00A0границей'\n                            : ' \\u2014\\u00A0в\\u00A0Москве и\\u00A0за\\u00A0границей'}\n                    </TypographyText>\n                </div>\n\n                <div\n                    className={cn(styles.phoneWrap, {\n                        [styles.phoneContentMobile]: mobile,\n                        [styles.phoneWrapMobile]: mobile,\n                    })}\n                >\n                    <Link\n                        href={getPhoneHref(domesticPhone)}\n                        underline={false}\n                        className={cn(styles.phoneLink, {\n                            [styles.phoneLinkMobile]: mobile,\n                            [styles.typographyThemeMobile]: mobile,\n                        })}\n                    >\n                        {domesticPhone}\n                    </Link>\n                    <TypographyText\n                        view='primary-medium'\n                        color='primary'\n                        className={cn(styles.text, styles.phoneDescription, {\n                            [styles.typographyTheme]: !mobile,\n                            [styles.typographyThemeMobile]: mobile,\n                            [styles.phoneDescriptionMobile]: mobile,\n                            [styles.textMobile]: mobile,\n                        })}\n                    >\n                        {mobile\n                            ? 'Для\\u00A0звонков по\\u00A0России'\n                            : ' \\u2014\\u00A0для звонков по\\u00A0России'}\n                    </TypographyText>\n                </div>\n            </div>\n\n            <TypographyText\n                view='primary-medium'\n                color='primary'\n                className={cn(styles.text, {\n                    [styles.typographyTheme]: !mobile,\n                    [styles.typographyThemeMobile]: mobile,\n                    [styles.textMobile]: mobile,\n                })}\n            >\n                {texts.hintNotification}\n            </TypographyText>\n            <Button\n                size={mobile ? 40 : 48}\n                view='secondary'\n                onClick={handleReturnButtonClick}\n                className={cn(styles.hintButton, { [styles.hintButtonMobile]: mobile })}\n                breakpoint={breakpoint}\n                client={client}\n            >\n                {hintButton}\n            </Button>\n        </div>\n    );\n};\n"],"names":["useContext","ConfirmationContext","React","cn","styles","Header","TypographyText","Link","getPhoneHref","Button"],"mappings":"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"}

package/components/screens/hint/index.css

@@ -9,58 +9,110 @@
     --gap-32: 32px;
 }
 :root {
-    --font-family-system:
-        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
+    --font-family-alfasans:
+        'Alfa Interface Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Helvetica, sans-serif;
 }
 :root {
-    --confirmation-text-color: var(--color-light-text-primary)
+    --confirmation-text-color: var(--color-light-text-primary);
+    --confirmation-text-font-size: 16px;
+    --confirmation-text-font-weight: 400;
+    --confirmation-text-line-height: 24px;
+    --confirmation-text-letter-spacing: -0.24px;
+    --confirmation-text-font-size-mobile: 16px;
+    --confirmation-text-line-height-mobile: 24px;
+    --confirmation-text-letter-spacing-mobile: -0.24px;
+    --confirmation-hint-text-color: var(--color-light-text-primary);
+    --confirmation-hint-phone-description-color: var(--color-light-text-primary);
+    --confirmation-hint-text-margin-bottom: var(--gap-24);
+    --confirmation-hint-phones-margin-bottom: var(--gap-24);
+    --confirmation-hint-phone-item-margin-bottom: var(--gap-8);
+    --confirmation-hint-button-margin-top: var(--gap-32);
+    --confirmation-hint-text-color-mobile: var(--color-light-text-secondary);
+    --confirmation-hint-phone-description-color-mobile: var(--color-light-text-secondary);
+    --confirmation-hint-text-margin-bottom-mobile: var(--gap-24);
+    --confirmation-hint-phones-margin-bottom-mobile: var(--gap-24);
+    --confirmation-hint-phone-item-margin-bottom-mobile: var(--gap-8);
+    --confirmation-hint-button-margin-top-mobile: var(--gap-32);
 }
-.confirmation__component_1hpky {
+.confirmation__component_14n4o {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
 }
-.confirmation__component_1hpky span:last-of-type {
+.confirmation__component_14n4o span:last-of-type {
         margin-bottom: var(--gap-0);
     }
-.confirmation__center_1hpky {
+.confirmation__center_14n4o {
     align-items: center;
     text-align: center;
 }
-.confirmation__text_1hpky.confirmation__text_1hpky {
-    margin-bottom: var(--gap-24);
+.confirmation__text_14n4o.confirmation__text_14n4o {
+    margin-bottom: var(--confirmation-hint-text-margin-bottom);
 }
-.confirmation__typographyTheme_1hpky.confirmation__typographyTheme_1hpky {
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 400;
-    font-family: var(--font-family-system);
+.confirmation__text_14n4o.confirmation__textMobile_14n4o {
+    margin-bottom: var(--confirmation-hint-text-margin-bottom-mobile);
+}
+.confirmation__typographyTheme_14n4o.confirmation__typographyTheme_14n4o {
+    font-size: var(--confirmation-text-font-size);
+    line-height: var(--confirmation-text-line-height);
+    letter-spacing: var(--confirmation-text-letter-spacing);
+    font-weight: var(--confirmation-text-font-weight);
+    font-family: var(--font-family-alfasans);
     color: var(--confirmation-text-color);
+    color: var(--confirmation-hint-text-color);
 }
-.confirmation__typographyThemeMobile_1hpky.confirmation__typographyThemeMobile_1hpky {
-    color: var(--color-light-text-secondary);
+.confirmation__typographyThemeMobile_14n4o.confirmation__typographyThemeMobile_14n4o {
+    font-size: var(--confirmation-text-font-size-mobile);
+    line-height: var(--confirmation-text-line-height-mobile);
+    letter-spacing: var(--confirmation-text-letter-spacing-mobile);
+    color: var(--confirmation-hint-text-color-mobile);
 }
-.confirmation__phonesWrap_1hpky {
+.confirmation__phoneDescription_14n4o.confirmation__phoneDescription_14n4o {
+    color: var(--confirmation-hint-phone-description-color);
+}
+.confirmation__phoneDescriptionMobile_14n4o.confirmation__phoneDescriptionMobile_14n4o {
+    color: var(--confirmation-hint-phone-description-color-mobile);
+}
+.confirmation__phonesWrap_14n4o {
     display: flex;
     flex-direction: column;
-    margin-bottom: var(--gap-24);
+    margin-bottom: var(--confirmation-hint-phones-margin-bottom);
+}
+.confirmation__phonesWrap_14n4o.confirmation__phonesWrapMobile_14n4o {
+    margin-bottom: var(--confirmation-hint-phones-margin-bottom-mobile);
 }
-.confirmation__phoneWrap_1hpky {
-    margin-bottom: var(--gap-8);
+.confirmation__phoneWrap_14n4o {
+    margin-bottom: var(--confirmation-hint-phone-item-margin-bottom);
 }
-.confirmation__phoneWrap_1hpky:last-child {
+.confirmation__phoneWrap_14n4o:last-child {
         margin-bottom: var(--gap-0);
     }
-.confirmation__phoneLink_1hpky.confirmation__phoneLink_1hpky {
+.confirmation__phoneWrap_14n4o.confirmation__phoneWrapMobile_14n4o {
+    margin-bottom: var(--confirmation-hint-phone-item-margin-bottom-mobile);
+}
+.confirmation__phoneWrap_14n4o.confirmation__phoneWrapMobile_14n4o:last-child {
+        margin-bottom: var(--gap-0);
+    }
+.confirmation__phoneLink_14n4o.confirmation__phoneLink_14n4o {
     font-size: 16px;
     line-height: 24px;
     font-weight: 500;
-    font-family: var(--font-family-system);
+    letter-spacing: -0.05px;
+    font-family: var(--font-family-alfasans);
+}
+.confirmation__phoneLink_14n4o.confirmation__phoneLinkMobile_14n4o {
+    font-size: var(--confirmation-text-font-size-mobile);
+    line-height: var(--confirmation-text-line-height-mobile);
+    letter-spacing: var(--confirmation-text-letter-spacing-mobile);
+}
+.confirmation__hintButton_14n4o {
+    margin-top: var(--confirmation-hint-button-margin-top);
 }
-.confirmation__hintButton_1hpky {
-    margin-top: var(--gap-32);
+.confirmation__hintButton_14n4o.confirmation__hintButtonMobile_14n4o {
+    margin-top: var(--confirmation-hint-button-margin-top-mobile);
 }
-.confirmation__phoneContentMobile_1hpky {
+.confirmation__phoneContentMobile_14n4o {
     display: flex;
     flex-direction: column;
 }

package/components/screens/hint/index.module.css.js

@@ -2,7 +2,7 @@
 
 require('./index.css');
 
-var styles = {"component":"confirmation__component_1hpky","center":"confirmation__center_1hpky","text":"confirmation__text_1hpky","typographyTheme":"confirmation__typographyTheme_1hpky","typographyThemeMobile":"confirmation__typographyThemeMobile_1hpky","phonesWrap":"confirmation__phonesWrap_1hpky","phoneWrap":"confirmation__phoneWrap_1hpky","phoneLink":"confirmation__phoneLink_1hpky","hintButton":"confirmation__hintButton_1hpky","phoneContentMobile":"confirmation__phoneContentMobile_1hpky"};
+var styles = {"component":"confirmation__component_14n4o","center":"confirmation__center_14n4o","text":"confirmation__text_14n4o","textMobile":"confirmation__textMobile_14n4o","typographyTheme":"confirmation__typographyTheme_14n4o","typographyThemeMobile":"confirmation__typographyThemeMobile_14n4o","phoneDescription":"confirmation__phoneDescription_14n4o","phoneDescriptionMobile":"confirmation__phoneDescriptionMobile_14n4o","phonesWrap":"confirmation__phonesWrap_14n4o","phonesWrapMobile":"confirmation__phonesWrapMobile_14n4o","phoneWrap":"confirmation__phoneWrap_14n4o","phoneWrapMobile":"confirmation__phoneWrapMobile_14n4o","phoneLink":"confirmation__phoneLink_14n4o","phoneLinkMobile":"confirmation__phoneLinkMobile_14n4o","hintButton":"confirmation__hintButton_14n4o","hintButtonMobile":"confirmation__hintButtonMobile_14n4o","phoneContentMobile":"confirmation__phoneContentMobile_14n4o"};
 
 module.exports = styles;
 //# sourceMappingURL=index.module.css.js.map

package/components/screens/hint/index.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.module.css.js","sources":["../../../src/components/screens/hint/index.module.css"],"sourcesContent":["@import '../../../vars.css';\n\n.component {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    & span:last-of-type {\n        margin-bottom: var(--gap-0);\n    }\n}\n\n.center {\n    align-items: center;\n    text-align: center;\n}\n\n.text.text {\n    margin-bottom: var(--gap-24);\n}\n\n.typographyTheme.typographyTheme {\n    @mixin _confirmation-text;\n}\n\n.typographyThemeMobile.typographyThemeMobile {\n    color: var(--color-light-text-secondary);\n}\n\n.phonesWrap {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: var(--gap-24);\n}\n\n.phoneWrap {\n    margin-bottom: var(--gap-8);\n\n    &:last-child {\n        margin-bottom: var(--gap-0);\n    }\n}\n\n.phoneLink.phoneLink {\n    @mixin action_primary_medium;\n}\n\n.hintButton {\n    margin-top: var(--gap-32);\n}\n\n.phoneContentMobile {\n    display: flex;\n    flex-direction: column;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,QAAQ,CAAC,4BAA4B,CAAC,MAAM,CAAC,0BAA0B,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,YAAY,CAAC,gCAAgC,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,YAAY,CAAC,gCAAgC,CAAC,oBAAoB,CAAC,wCAAwC,CAAC;;;;"}
+{"version":3,"file":"index.module.css.js","sources":["../../../src/components/screens/hint/index.module.css"],"sourcesContent":["@import '../../../vars.css';\n\n.component {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    & span:last-of-type {\n        margin-bottom: var(--gap-0);\n    }\n}\n\n.center {\n    align-items: center;\n    text-align: center;\n}\n\n.text.text {\n    margin-bottom: var(--confirmation-hint-text-margin-bottom);\n}\n\n.text.textMobile {\n    margin-bottom: var(--confirmation-hint-text-margin-bottom-mobile);\n}\n\n.typographyTheme.typographyTheme {\n    @mixin _confirmation-text;\n    color: var(--confirmation-hint-text-color);\n}\n\n.typographyThemeMobile.typographyThemeMobile {\n    font-size: var(--confirmation-text-font-size-mobile);\n    line-height: var(--confirmation-text-line-height-mobile);\n    letter-spacing: var(--confirmation-text-letter-spacing-mobile);\n    color: var(--confirmation-hint-text-color-mobile);\n}\n\n.phoneDescription.phoneDescription {\n    color: var(--confirmation-hint-phone-description-color);\n}\n\n.phoneDescriptionMobile.phoneDescriptionMobile {\n    color: var(--confirmation-hint-phone-description-color-mobile);\n}\n\n.phonesWrap {\n    display: flex;\n    flex-direction: column;\n    margin-bottom: var(--confirmation-hint-phones-margin-bottom);\n}\n\n.phonesWrap.phonesWrapMobile {\n    margin-bottom: var(--confirmation-hint-phones-margin-bottom-mobile);\n}\n\n.phoneWrap {\n    margin-bottom: var(--confirmation-hint-phone-item-margin-bottom);\n\n    &:last-child {\n        margin-bottom: var(--gap-0);\n    }\n}\n\n.phoneWrap.phoneWrapMobile {\n    margin-bottom: var(--confirmation-hint-phone-item-margin-bottom-mobile);\n\n    &:last-child {\n        margin-bottom: var(--gap-0);\n    }\n}\n\n.phoneLink.phoneLink {\n    @mixin action_primary_medium;\n}\n\n.phoneLink.phoneLinkMobile {\n    font-size: var(--confirmation-text-font-size-mobile);\n    line-height: var(--confirmation-text-line-height-mobile);\n    letter-spacing: var(--confirmation-text-letter-spacing-mobile);\n}\n\n.hintButton {\n    margin-top: var(--confirmation-hint-button-margin-top);\n}\n\n.hintButton.hintButtonMobile {\n    margin-top: var(--confirmation-hint-button-margin-top-mobile);\n}\n\n.phoneContentMobile {\n    display: flex;\n    flex-direction: column;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,QAAQ,CAAC,4BAA4B,CAAC,MAAM,CAAC,0BAA0B,CAAC,YAAY,CAAC,gCAAgC,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,uBAAuB,CAAC,2CAA2C,CAAC,kBAAkB,CAAC,sCAAsC,CAAC,wBAAwB,CAAC,4CAA4C,CAAC,YAAY,CAAC,gCAAgC,CAAC,kBAAkB,CAAC,sCAAsC,CAAC,WAAW,CAAC,+BAA+B,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,WAAW,CAAC,+BAA+B,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,YAAY,CAAC,gCAAgC,CAAC,kBAAkB,CAAC,sCAAsC,CAAC,oBAAoB,CAAC,wCAAwC,CAAC;;;;"}

package/components/screens/initial/component.js

@@ -22,12 +22,12 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
 var CODE_SEND_HINT_VISIBLE_DURATION = 2000;
 var Initial = function (_a) {
-    var _b;
+    var _b, _c, _d, _e;
     var mobile$2 = _a.mobile;
-    var _c = React.useContext(context.ConfirmationContext), state = _c.state, alignContent = _c.alignContent, titleTag = _c.titleTag, texts = _c.texts, requiredCharAmount = _c.requiredCharAmount, timeLeft = _c.timeLeft, phone = _c.phone, clearCodeOnError = _c.clearCodeOnError, hideCountdownSection = _c.hideCountdownSection, initialScreenHintSlot = _c.initialScreenHintSlot, errorVisibleDuration = _c.errorVisibleDuration, strictFocus = _c.strictFocus, onChangeState = _c.onChangeState, onInputFinished = _c.onInputFinished, onChangeScreen = _c.onChangeScreen, onSmsRetryClick = _c.onSmsRetryClick;
+    var _f = React.useContext(context.ConfirmationContext), state = _f.state, alignContent = _f.alignContent, titleTag = _f.titleTag, texts = _f.texts, requiredCharAmount = _f.requiredCharAmount, timeLeft = _f.timeLeft, phone = _f.phone, clearCodeOnError = _f.clearCodeOnError, hideCountdownSection = _f.hideCountdownSection, initialScreenHintSlot = _f.initialScreenHintSlot, errorVisibleDuration = _f.errorVisibleDuration, strictFocus = _f.strictFocus, onChangeState = _f.onChangeState, onInputFinished = _f.onInputFinished, onChangeScreen = _f.onChangeScreen, onSmsRetryClick = _f.onSmsRetryClick;
     var prevState = hooks.usePrevious(state);
     var inputRef = React.useRef(null);
-    var _d = React.useState(false), codeSendHintVisible = _d[0], setCodeSendHintVisible = _d[1];
+    var _g = React.useState(false), codeSendHintVisible = _g[0], setCodeSendHintVisible = _g[1];
     var timerId = React.useRef(0);
     var handleInputComplete = function (code) {
         onInputFinished(code);
@@ -108,10 +108,19 @@ var Initial = function (_a) {
         phone ? (React__default.default.createElement(coreComponentsTypography.TypographyText, { view: 'primary-medium', color: 'primary', className: cn__default.default(index_module.phone, (_b = {},
                 _b[index_module.typographyTheme] = !mobile$2,
                 _b[index_module.typographyThemeMobile] = mobile$2,
+                _b[index_module.phoneMobile] = mobile$2,
                 _b)) },
-            "\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u043B\u0438 \u043D\u0430 ",
-            phone)) : null,
-        React__default.default.createElement(ComponentCodeInput, { disabled: processing, error: getCodeInputError(), ref: inputRef, fields: requiredCharAmount, strictFocus: strictFocus, className: cn__default.default(index_module.containerInput, index_module.codeInput), onComplete: handleInputComplete, onChange: handleInputChange, clearCodeOnError: clearCodeOnError, errorVisibleDuration: errorVisibleDuration, onErrorAnimationEnd: handleErrorAnimationEnd }),
+            React__default.default.createElement("span", { className: cn__default.default(index_module.phoneLabel, (_c = {},
+                    _c[index_module.phoneLabelMobile] = mobile$2,
+                    _c)) },
+                "\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u043B\u0438 \u043D\u0430",
+                '\u00A0'),
+            React__default.default.createElement("span", { className: cn__default.default(index_module.phoneNumber, (_d = {},
+                    _d[index_module.phoneNumberMobile] = mobile$2,
+                    _d)) }, phone))) : null,
+        React__default.default.createElement(ComponentCodeInput, { disabled: processing, error: getCodeInputError(), ref: inputRef, fields: requiredCharAmount, strictFocus: strictFocus, className: cn__default.default(index_module.containerInput, index_module.codeInput, (_e = {},
+                _e[index_module.codeInputMobile] = mobile$2,
+                _e)), onComplete: handleInputComplete, onChange: handleInputChange, clearCodeOnError: clearCodeOnError, errorVisibleDuration: errorVisibleDuration, onErrorAnimationEnd: handleErrorAnimationEnd }),
         !hideCountdownSection && (React__default.default.createElement(countdownSection.CountdownSection, { processing: processing, timePassed: timePassed, codeSendHintVisible: codeSendHintVisible, handleSmsRetryClick: handleSmsRetryClick, mobile: mobile$2 })),
         renderHintButton()));
 };