@alfalab/core-components-confirmation 14.0.1 → 14.1.0

package/moderncssm/components/screens/initial/index.module.css

@@ -1,11 +1,11 @@
+
+
 :root {
     --confirmation-text-font-size: 16px;
     --confirmation-text-line-height: 24px;
     --confirmation-text-font-weight: 400;
     --confirmation-text-font-family: var(--font-family-system);
     --confirmation-text-color: var(--color-light-text-primary)
-
-    /* header */
 }
 
 .component {
@@ -45,7 +45,7 @@
 
 .center {
     align-items: center;
-    text-align: center
+    text-align: center;
 }
 
 .center .loaderWrap {

package/moderncssm/components/screens/temp-block/component.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 export declare type TempBlockProps = {
     /**
      * Отображать в мобильной версии экран компонента

package/moderncssm/components/screens/temp-block/component.js

@@ -8,7 +8,7 @@ import { Header } from '../../header/component.js';
 import styles from './index.module.css';
 
 const TempBlock = ({ mobile }) => {
-    const { alignContent, texts, tempBlockDuration, onChangeScreen, onTempBlockFinished } = useContext(ConfirmationContext);
+    const { alignContent, titleTag, texts, tempBlockDuration, onChangeScreen, onTempBlockFinished, } = useContext(ConfirmationContext);
     const [timeLeft, startTimer] = useCountdown(tempBlockDuration);
     useEffect(() => {
         startTimer();
@@ -19,7 +19,7 @@ const TempBlock = ({ mobile }) => {
         }
     }, [timeLeft, onChangeScreen, onTempBlockFinished]);
     return (React.createElement("div", { className: cn(styles.component, styles[alignContent]) },
-        React.createElement(Header, { mobile: mobile }, texts.tempBlockTitle),
+        React.createElement(Header, { mobile: mobile, titleTag: titleTag }, texts.tempBlockTitle),
         React.createElement(Text, { view: 'primary-medium', color: 'primary', className: cn(styles.description, {
                 [styles.typographyTheme]: !mobile,
                 [styles.typographyThemeMobile]: mobile,

package/moderncssm/components/screens/temp-block/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../../src/components/screens/temp-block/component.tsx"],"sourcesContent":["import React, { FC, useContext, useEffect } from 'react';\nimport cn from 'classnames';\n\nimport { Text } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { formatMsAsMinutes, useCountdown } from '../../../utils';\nimport { CountdownLoader } from '../../countdown-loader';\nimport { Header } from '../../header';\n\nimport styles from './index.module.css';\n\nexport type TempBlockProps = {\n    /**\n     * Отображать в мобильной версии экран компонента\n     */\n    mobile?: boolean;\n};\n\nexport const TempBlock: FC<TempBlockProps> = ({ mobile }) => {\n    const { alignContent, texts, tempBlockDuration, onChangeScreen, onTempBlockFinished } =\n        useContext(ConfirmationContext);\n\n    const [timeLeft, startTimer] = useCountdown(tempBlockDuration);\n\n    useEffect(() => {\n        startTimer();\n    }, [startTimer]);\n\n    useEffect(() => {\n        if (timeLeft === 0 && onTempBlockFinished) {\n            onTempBlockFinished();\n        }\n    }, [timeLeft, onChangeScreen, onTempBlockFinished]);\n\n    return (\n        <div className={cn(styles.component, styles[alignContent])}>\n            <Header mobile={mobile}>{texts.tempBlockTitle}</Header>\n\n            <Text\n                view='primary-medium'\n                color='primary'\n                className={cn(styles.description, {\n                    [styles.typographyTheme]: !mobile,\n                    [styles.typographyThemeMobile]: mobile,\n                })}\n            >\n                {texts.tempBlockDescription}\n            </Text>\n\n            <div className={cn(styles.countdownWrap, { [styles.typographyTheme]: !mobile })}>\n                <CountdownLoader\n                    progress={1 - timeLeft / tempBlockDuration}\n                    className={styles.loader}\n                />\n                <time className={styles.timeCounter}>{formatMsAsMinutes(timeLeft)}</time>\n            </div>\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;MAmBa,SAAS,GAAuB,CAAC,EAAE,MAAM,EAAE,KAAI;AACxD,IAAA,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,mBAAmB,EAAE,GACjF,UAAU,CAAC,mBAAmB,CAAC;IAEnC,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,YAAY,CAAC,iBAAiB,CAAC;IAE9D,SAAS,CAAC,MAAK;AACX,QAAA,UAAU,EAAE;AAChB,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC;IAEhB,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,QAAQ,KAAK,CAAC,IAAI,mBAAmB,EAAE;AACvC,YAAA,mBAAmB,EAAE;AACxB;KACJ,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,mBAAmB,CAAC,CAAC;AAEnD,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,EAAA;QACtD,KAAC,CAAA,aAAA,CAAA,MAAM,IAAC,MAAM,EAAE,MAAM,EAAG,EAAA,KAAK,CAAC,cAAc,CAAU;AAEvD,QAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EACD,EAAA,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,SAAS,EACf,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE;AAC9B,gBAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;AACjC,gBAAA,CAAC,MAAM,CAAC,qBAAqB,GAAG,MAAM;AACzC,aAAA,CAAC,EAED,EAAA,KAAK,CAAC,oBAAoB,CACxB;AAEP,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM,EAAE,CAAC,EAAA;AAC3E,YAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EAAA,EACZ,QAAQ,EAAE,CAAC,GAAG,QAAQ,GAAG,iBAAiB,EAC1C,SAAS,EAAE,MAAM,CAAC,MAAM,EAC1B,CAAA;AACF,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,WAAW,EAAG,EAAA,iBAAiB,CAAC,QAAQ,CAAC,CAAQ,CACvE,CACJ;AAEd;;;;"}
+{"version":3,"file":"component.js","sources":["../../../../src/components/screens/temp-block/component.tsx"],"sourcesContent":["import React, { type FC, useContext, useEffect } from 'react';\nimport cn from 'classnames';\n\nimport { Text } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { formatMsAsMinutes, useCountdown } from '../../../utils';\nimport { CountdownLoader } from '../../countdown-loader';\nimport { Header } from '../../header';\n\nimport styles from './index.module.css';\n\nexport type TempBlockProps = {\n    /**\n     * Отображать в мобильной версии экран компонента\n     */\n    mobile?: boolean;\n};\n\nexport const TempBlock: FC<TempBlockProps> = ({ mobile }) => {\n    const {\n        alignContent,\n        titleTag,\n        texts,\n        tempBlockDuration,\n        onChangeScreen,\n        onTempBlockFinished,\n    } = useContext(ConfirmationContext);\n\n    const [timeLeft, startTimer] = useCountdown(tempBlockDuration);\n\n    useEffect(() => {\n        startTimer();\n    }, [startTimer]);\n\n    useEffect(() => {\n        if (timeLeft === 0 && onTempBlockFinished) {\n            onTempBlockFinished();\n        }\n    }, [timeLeft, onChangeScreen, onTempBlockFinished]);\n\n    return (\n        <div className={cn(styles.component, styles[alignContent])}>\n            <Header mobile={mobile} titleTag={titleTag}>\n                {texts.tempBlockTitle}\n            </Header>\n\n            <Text\n                view='primary-medium'\n                color='primary'\n                className={cn(styles.description, {\n                    [styles.typographyTheme]: !mobile,\n                    [styles.typographyThemeMobile]: mobile,\n                })}\n            >\n                {texts.tempBlockDescription}\n            </Text>\n\n            <div className={cn(styles.countdownWrap, { [styles.typographyTheme]: !mobile })}>\n                <CountdownLoader\n                    progress={1 - timeLeft / tempBlockDuration}\n                    className={styles.loader}\n                />\n                <time className={styles.timeCounter}>{formatMsAsMinutes(timeLeft)}</time>\n            </div>\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;MAmBa,SAAS,GAAuB,CAAC,EAAE,MAAM,EAAE,KAAI;AACxD,IAAA,MAAM,EACF,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,iBAAiB,EACjB,cAAc,EACd,mBAAmB,GACtB,GAAG,UAAU,CAAC,mBAAmB,CAAC;IAEnC,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,GAAG,YAAY,CAAC,iBAAiB,CAAC;IAE9D,SAAS,CAAC,MAAK;AACX,QAAA,UAAU,EAAE;AAChB,KAAC,EAAE,CAAC,UAAU,CAAC,CAAC;IAEhB,SAAS,CAAC,MAAK;AACX,QAAA,IAAI,QAAQ,KAAK,CAAC,IAAI,mBAAmB,EAAE;AACvC,YAAA,mBAAmB,EAAE;AACxB;KACJ,EAAE,CAAC,QAAQ,EAAE,cAAc,EAAE,mBAAmB,CAAC,CAAC;AAEnD,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,EAAA;AACtD,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAA,EACrC,KAAK,CAAC,cAAc,CAChB;AAET,QAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EACD,EAAA,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,SAAS,EACf,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE;AAC9B,gBAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;AACjC,gBAAA,CAAC,MAAM,CAAC,qBAAqB,GAAG,MAAM;AACzC,aAAA,CAAC,EAED,EAAA,KAAK,CAAC,oBAAoB,CACxB;AAEP,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM,EAAE,CAAC,EAAA;AAC3E,YAAA,KAAA,CAAA,aAAA,CAAC,eAAe,EAAA,EACZ,QAAQ,EAAE,CAAC,GAAG,QAAQ,GAAG,iBAAiB,EAC1C,SAAS,EAAE,MAAM,CAAC,MAAM,EAC1B,CAAA;AACF,YAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,WAAW,EAAG,EAAA,iBAAiB,CAAC,QAAQ,CAAC,CAAQ,CACvE,CACJ;AAEd;;;;"}

package/moderncssm/components/screens/temp-block/index.module.css

@@ -1,11 +1,11 @@
+
+
 :root {
     --confirmation-text-font-size: 16px;
     --confirmation-text-line-height: 24px;
     --confirmation-text-font-weight: 400;
     --confirmation-text-font-family: var(--font-family-system);
     --confirmation-text-color: var(--color-light-text-primary)
-
-    /* header */
 }
 
 .component {

package/moderncssm/components/screens/temp-block-over/component.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 export declare type TempBlockOverProps = {
     /**
      * Отображать в мобильной версии экран компонента

package/moderncssm/components/screens/temp-block-over/component.js

@@ -7,13 +7,13 @@ import { Header } from '../../header/component.js';
 import styles from './index.module.css';
 
 const TempBlockOver = ({ mobile }) => {
-    const { alignContent, texts, breakpoint, client, onChangeScreen, onChangeState } = useContext(ConfirmationContext);
+    const { alignContent, titleTag, texts, breakpoint, client, onChangeScreen, onChangeState } = useContext(ConfirmationContext);
     const handleReturnButtonClick = () => {
         onChangeScreen('INITIAL');
         onChangeState('INITIAL');
     };
     return (React.createElement("div", { className: cn(styles.component, styles[alignContent]) },
-        React.createElement(Header, { mobile: mobile }, texts.tempBlockOverTitle),
+        React.createElement(Header, { mobile: mobile, titleTag: titleTag }, texts.tempBlockOverTitle),
         React.createElement(Text, { view: 'primary-medium', color: 'primary', className: cn(styles.description, {
                 [styles.typographyTheme]: !mobile,
                 [styles.typographyThemeMobile]: mobile,

package/moderncssm/components/screens/temp-block-over/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../../src/components/screens/temp-block-over/component.tsx"],"sourcesContent":["import React, { FC, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { Text } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { Header } from '../../header';\n\nimport styles from './index.module.css';\n\nexport type TempBlockOverProps = {\n    /**\n     * Отображать в мобильной версии экран компонента\n     */\n    mobile?: boolean;\n};\n\nexport const TempBlockOver: FC<TempBlockOverProps> = ({ mobile }) => {\n    const { alignContent, texts, breakpoint, client, onChangeScreen, onChangeState } =\n        useContext(ConfirmationContext);\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}>{texts.tempBlockOverTitle}</Header>\n\n            <Text\n                view='primary-medium'\n                color='primary'\n                className={cn(styles.description, {\n                    [styles.typographyTheme]: !mobile,\n                    [styles.typographyThemeMobile]: mobile,\n                })}\n            >\n                {texts.tempBlockOverDescription}\n            </Text>\n\n            <Button\n                size={mobile ? 'xs' : 's'}\n                view='secondary'\n                onClick={handleReturnButtonClick}\n                className={styles.button}\n                breakpoint={breakpoint}\n                client={client}\n            >\n                {texts.tempBlockOverButton}\n            </Button>\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;MAkBa,aAAa,GAA2B,CAAC,EAAE,MAAM,EAAE,KAAI;AAChE,IAAA,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,cAAc,EAAE,aAAa,EAAE,GAC5E,UAAU,CAAC,mBAAmB,CAAC;IAEnC,MAAM,uBAAuB,GAAG,MAAK;QACjC,cAAc,CAAC,SAAS,CAAC;QACzB,aAAa,CAAC,SAAS,CAAC;AAC5B,KAAC;AAED,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,EAAA;QACtD,KAAC,CAAA,aAAA,CAAA,MAAM,IAAC,MAAM,EAAE,MAAM,EAAG,EAAA,KAAK,CAAC,kBAAkB,CAAU;AAE3D,QAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EACD,EAAA,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,SAAS,EACf,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE;AAC9B,gBAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;AACjC,gBAAA,CAAC,MAAM,CAAC,qBAAqB,GAAG,MAAM;AACzC,aAAA,CAAC,EAED,EAAA,KAAK,CAAC,wBAAwB,CAC5B;AAEP,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EACH,EAAA,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,GAAG,EACzB,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,uBAAuB,EAChC,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,IAEb,KAAK,CAAC,mBAAmB,CACrB,CACP;AAEd;;;;"}
+{"version":3,"file":"component.js","sources":["../../../../src/components/screens/temp-block-over/component.tsx"],"sourcesContent":["import React, { type FC, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { Text } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { Header } from '../../header';\n\nimport styles from './index.module.css';\n\nexport type TempBlockOverProps = {\n    /**\n     * Отображать в мобильной версии экран компонента\n     */\n    mobile?: boolean;\n};\n\nexport const TempBlockOver: FC<TempBlockOverProps> = ({ mobile }) => {\n    const { alignContent, titleTag, texts, breakpoint, client, onChangeScreen, onChangeState } =\n        useContext(ConfirmationContext);\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.tempBlockOverTitle}\n            </Header>\n\n            <Text\n                view='primary-medium'\n                color='primary'\n                className={cn(styles.description, {\n                    [styles.typographyTheme]: !mobile,\n                    [styles.typographyThemeMobile]: mobile,\n                })}\n            >\n                {texts.tempBlockOverDescription}\n            </Text>\n\n            <Button\n                size={mobile ? 'xs' : 's'}\n                view='secondary'\n                onClick={handleReturnButtonClick}\n                className={styles.button}\n                breakpoint={breakpoint}\n                client={client}\n            >\n                {texts.tempBlockOverButton}\n            </Button>\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;MAkBa,aAAa,GAA2B,CAAC,EAAE,MAAM,EAAE,KAAI;IAChE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,cAAc,EAAE,aAAa,EAAE,GACtF,UAAU,CAAC,mBAAmB,CAAC;IAEnC,MAAM,uBAAuB,GAAG,MAAK;QACjC,cAAc,CAAC,SAAS,CAAC;QACzB,aAAa,CAAC,SAAS,CAAC;AAC5B,KAAC;AAED,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,EAAA;AACtD,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAA,EACrC,KAAK,CAAC,kBAAkB,CACpB;AAET,QAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EACD,EAAA,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,SAAS,EACf,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,EAAE;AAC9B,gBAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;AACjC,gBAAA,CAAC,MAAM,CAAC,qBAAqB,GAAG,MAAM;AACzC,aAAA,CAAC,EAED,EAAA,KAAK,CAAC,wBAAwB,CAC5B;AAEP,QAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EACH,EAAA,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,GAAG,EACzB,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,uBAAuB,EAChC,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,IAEb,KAAK,CAAC,mBAAmB,CACrB,CACP;AAEd;;;;"}

package/moderncssm/components/screens/temp-block-over/index.module.css

@@ -1,11 +1,11 @@
+
+
 :root {
     --confirmation-text-font-size: 16px;
     --confirmation-text-line-height: 24px;
     --confirmation-text-font-weight: 400;
     --confirmation-text-font-family: var(--font-family-system);
     --confirmation-text-color: var(--color-light-text-primary)
-
-    /* header */
 }
 
 .component {

package/moderncssm/context.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { TConfirmationContext } from './types';
+import { type TConfirmationContext } from './types';
 export declare const ConfirmationContext: import("react").Context<TConfirmationContext>;

package/moderncssm/context.js

@@ -4,6 +4,7 @@ import { ONE_DAY, ONE_MINUTE } from './utils.js';
 const mockFn = () => undefined;
 const ConfirmationContext = createContext({
     alignContent: 'left',
+    titleTag: 'h3',
     texts: {},
     state: 'INITIAL',
     screen: 'INITIAL',

package/moderncssm/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","sources":["../src/context.ts"],"sourcesContent":["import { createContext } from 'react';\n\nimport { TConfirmationContext } from './types';\nimport { ONE_DAY, ONE_MINUTE } from './utils';\n\nconst mockFn = () => undefined;\n\nexport const ConfirmationContext = createContext<TConfirmationContext>({\n    alignContent: 'left',\n    texts: {},\n    state: 'INITIAL',\n    screen: 'INITIAL',\n    requiredCharAmount: 5,\n    countdownDuration: ONE_MINUTE,\n    timeLeft: ONE_MINUTE,\n    tempBlockDuration: ONE_DAY,\n    phone: '',\n    hideCountdownSection: false,\n    breakpoint: 1024,\n    client: 'desktop',\n    initialScreenHintSlot: null,\n    onTempBlockFinished: mockFn,\n    onInputFinished: mockFn,\n    onChangeState: mockFn,\n    onSmsRetryClick: mockFn,\n    onChangeScreen: mockFn,\n    onFatalErrorOkButtonClick: mockFn,\n});\n"],"names":[],"mappings":";;;AAKA,MAAM,MAAM,GAAG,MAAM,SAAS;AAEvB,MAAM,mBAAmB,GAAG,aAAa,CAAuB;AACnE,IAAA,YAAY,EAAE,MAAM;AACpB,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,KAAK,EAAE,SAAS;AAChB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,kBAAkB,EAAE,CAAC;AACrB,IAAA,iBAAiB,EAAE,UAAU;AAC7B,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,iBAAiB,EAAE,OAAO;AAC1B,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,oBAAoB,EAAE,KAAK;AAC3B,IAAA,UAAU,EAAE,IAAI;AAChB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,qBAAqB,EAAE,IAAI;AAC3B,IAAA,mBAAmB,EAAE,MAAM;AAC3B,IAAA,eAAe,EAAE,MAAM;AACvB,IAAA,aAAa,EAAE,MAAM;AACrB,IAAA,eAAe,EAAE,MAAM;AACvB,IAAA,cAAc,EAAE,MAAM;AACtB,IAAA,yBAAyB,EAAE,MAAM;AACpC,CAAA;;;;"}
+{"version":3,"file":"context.js","sources":["../src/context.ts"],"sourcesContent":["import { createContext } from 'react';\n\nimport { type TConfirmationContext } from './types';\nimport { ONE_DAY, ONE_MINUTE } from './utils';\n\nconst mockFn = () => undefined;\n\nexport const ConfirmationContext = createContext<TConfirmationContext>({\n    alignContent: 'left',\n    titleTag: 'h3',\n    texts: {},\n    state: 'INITIAL',\n    screen: 'INITIAL',\n    requiredCharAmount: 5,\n    countdownDuration: ONE_MINUTE,\n    timeLeft: ONE_MINUTE,\n    tempBlockDuration: ONE_DAY,\n    phone: '',\n    hideCountdownSection: false,\n    breakpoint: 1024,\n    client: 'desktop',\n    initialScreenHintSlot: null,\n    onTempBlockFinished: mockFn,\n    onInputFinished: mockFn,\n    onChangeState: mockFn,\n    onSmsRetryClick: mockFn,\n    onChangeScreen: mockFn,\n    onFatalErrorOkButtonClick: mockFn,\n});\n"],"names":[],"mappings":";;;AAKA,MAAM,MAAM,GAAG,MAAM,SAAS;AAEvB,MAAM,mBAAmB,GAAG,aAAa,CAAuB;AACnE,IAAA,YAAY,EAAE,MAAM;AACpB,IAAA,QAAQ,EAAE,IAAI;AACd,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,KAAK,EAAE,SAAS;AAChB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,kBAAkB,EAAE,CAAC;AACrB,IAAA,iBAAiB,EAAE,UAAU;AAC7B,IAAA,QAAQ,EAAE,UAAU;AACpB,IAAA,iBAAiB,EAAE,OAAO;AAC1B,IAAA,KAAK,EAAE,EAAE;AACT,IAAA,oBAAoB,EAAE,KAAK;AAC3B,IAAA,UAAU,EAAE,IAAI;AAChB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,qBAAqB,EAAE,IAAI;AAC3B,IAAA,mBAAmB,EAAE,MAAM;AAC3B,IAAA,eAAe,EAAE,MAAM;AACvB,IAAA,aAAa,EAAE,MAAM;AACrB,IAAA,eAAe,EAAE,MAAM;AACvB,IAAA,cAAc,EAAE,MAAM;AACtB,IAAA,yBAAyB,EAAE,MAAM;AACpC,CAAA;;;;"}

package/moderncssm/desktop/component.desktop.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
-import { ConfirmationProps } from '../types';
+import { type FC } from 'react';
+import { type ConfirmationProps } from '../types';
 export declare type DesktopConfirmationProps = Omit<ConfirmationProps, 'mobile' | 'breakpoint'>;
 export declare const ConfirmationDesktop: FC<DesktopConfirmationProps>;

package/moderncssm/desktop/component.desktop.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.desktop.js","sources":["../../src/desktop/component.desktop.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { BaseConfirmation } from '../components/base-confirmation';\nimport { ConfirmationProps } from '../types';\n\nexport type DesktopConfirmationProps = Omit<ConfirmationProps, 'mobile' | 'breakpoint'>;\n\nexport const ConfirmationDesktop: FC<DesktopConfirmationProps> = (props) => (\n    <BaseConfirmation {...props} />\n);\n"],"names":[],"mappings":";;;AAOa,MAAA,mBAAmB,GAAiC,CAAC,KAAK,MACnE,oBAAC,gBAAgB,EAAA,EAAA,GAAK,KAAK,EAAA,CAAI;;;;"}
+{"version":3,"file":"component.desktop.js","sources":["../../src/desktop/component.desktop.tsx"],"sourcesContent":["import React, { type FC } from 'react';\n\nimport { BaseConfirmation } from '../components/base-confirmation';\nimport { type ConfirmationProps } from '../types';\n\nexport type DesktopConfirmationProps = Omit<ConfirmationProps, 'mobile' | 'breakpoint'>;\n\nexport const ConfirmationDesktop: FC<DesktopConfirmationProps> = (props) => (\n    <BaseConfirmation {...props} />\n);\n"],"names":[],"mappings":";;;AAOa,MAAA,mBAAmB,GAAiC,CAAC,KAAK,MACnE,oBAAC,gBAAgB,EAAA,EAAA,GAAK,KAAK,EAAA,CAAI;;;;"}

package/moderncssm/mobile/component.mobile.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
-import { ConfirmationProps } from '../types';
+import { type FC } from 'react';
+import { type ConfirmationProps } from '../types';
 export declare type MobileConfirmationProps = Omit<ConfirmationProps, 'mobile'>;
 export declare const ConfirmationMobile: FC<MobileConfirmationProps>;

package/moderncssm/mobile/component.mobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.mobile.js","sources":["../../src/mobile/component.mobile.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport cn from 'classnames';\n\nimport { BaseConfirmation } from '../components/base-confirmation';\nimport { ConfirmationProps } from '../types';\n\nimport styles from './mobile.module.css';\n\nexport type MobileConfirmationProps = Omit<ConfirmationProps, 'mobile'>;\n\nexport const ConfirmationMobile: FC<MobileConfirmationProps> = ({ className, ...resProps }) => (\n    <BaseConfirmation mobile={true} className={cn(className, styles.container)} {...resProps} />\n);\n"],"names":[],"mappings":";;;;;AAUa,MAAA,kBAAkB,GAAgC,CAAC,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,MACtF,oBAAC,gBAAgB,EAAA,EAAC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,EAAA,GAAM,QAAQ,EAAA,CAAI;;;;"}
+{"version":3,"file":"component.mobile.js","sources":["../../src/mobile/component.mobile.tsx"],"sourcesContent":["import React, { type FC } from 'react';\nimport cn from 'classnames';\n\nimport { BaseConfirmation } from '../components/base-confirmation';\nimport { type ConfirmationProps } from '../types';\n\nimport styles from './mobile.module.css';\n\nexport type MobileConfirmationProps = Omit<ConfirmationProps, 'mobile'>;\n\nexport const ConfirmationMobile: FC<MobileConfirmationProps> = ({ className, ...resProps }) => (\n    <BaseConfirmation mobile={true} className={cn(className, styles.container)} {...resProps} />\n);\n"],"names":[],"mappings":";;;;;AAUa,MAAA,kBAAkB,GAAgC,CAAC,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,MACtF,oBAAC,gBAAgB,EAAA,EAAC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,EAAA,GAAM,QAAQ,EAAA,CAAI;;;;"}

package/moderncssm/types.d.ts

@@ -1,5 +1,5 @@
-import { ComponentType, ReactNode } from 'react';
-export declare type ConfirmationProps = {
+import { type ComponentType, type ReactNode } from 'react';
+export interface ConfirmationProps {
     /**
      * Экран компонента
      */
@@ -16,6 +16,11 @@ export declare type ConfirmationProps = {
      * Позиционирование контента
      */
     alignContent?: 'left' | 'center';
+    /**
+     * HTML тег для заголовка
+     * @default 'h3'
+     */
+    titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     /**
      * Объект с текстами
      */
@@ -107,11 +112,11 @@ export declare type ConfirmationProps = {
      * @default 1300
      */
     errorVisibleDuration?: number;
-};
-export declare type TConfirmationContext = Required<Pick<ConfirmationProps, 'alignContent' | 'texts' | 'state' | 'screen' | 'requiredCharAmount' | 'onInputFinished' | 'countdownDuration' | 'onChangeState' | 'onSmsRetryClick' | 'onChangeScreen' | 'onFatalErrorOkButtonClick' | 'tempBlockDuration' | 'hideCountdownSection'>> & Pick<ConfirmationProps, 'phone' | 'blockSmsRetry' | 'onTempBlockFinished' | 'clearCodeOnError' | 'initialScreenHintSlot' | 'errorVisibleDuration' | 'breakpoint' | 'client'> & {
+}
+export declare type TConfirmationContext = Required<Pick<ConfirmationProps, 'alignContent' | 'titleTag' | 'texts' | 'state' | 'screen' | 'requiredCharAmount' | 'onInputFinished' | 'countdownDuration' | 'onChangeState' | 'onSmsRetryClick' | 'onChangeScreen' | 'onFatalErrorOkButtonClick' | 'tempBlockDuration' | 'hideCountdownSection'>> & Pick<ConfirmationProps, 'phone' | 'blockSmsRetry' | 'onTempBlockFinished' | 'clearCodeOnError' | 'initialScreenHintSlot' | 'errorVisibleDuration' | 'breakpoint' | 'client'> & {
     timeLeft: number;
 };
-export declare type ConfirmationTexts = {
+export interface ConfirmationTexts {
     /**
      * Экран INITIAL
      */
@@ -152,10 +157,10 @@ export declare type ConfirmationTexts = {
     tempBlockOverTitle?: ReactNode;
     tempBlockOverDescription?: ReactNode;
     tempBlockOverButton?: string;
-};
+}
 export declare type ConfirmationScreen = 'INITIAL' | 'HINT' | 'FATAL_ERROR' | 'TEMP_BLOCK' | 'TEMP_BLOCK_OVER';
 export declare type ConfirmationState = 'INITIAL' | 'CODE_CHECKING' | 'CODE_SENDING' | 'CODE_ERROR' | 'CODE_EXPIRED' | 'CODE_EXPIRED_ENDED';
-export declare type ScreensMap = {
+export interface ScreensMap {
     [key: string]: ComponentType;
-};
+}
 export declare const defaultTexts: ConfirmationTexts;

package/moderncssm/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../src/types.ts"],"sourcesContent":["import { ComponentType, ReactNode } from 'react';\n\nexport type ConfirmationProps = {\n    /**\n     * Экран компонента\n     */\n    screen: ConfirmationScreen | string;\n\n    /**\n     * Состояние компонента\n     */\n    state: ConfirmationState | string;\n\n    /**\n     * Мобильная версия компонента для экрана\n     */\n    mobile?: boolean;\n\n    /**\n     * Позиционирование контента\n     */\n    alignContent?: 'left' | 'center';\n\n    /**\n     * Объект с текстами\n     */\n    texts?: ConfirmationTexts;\n\n    /**\n     * Количество символов, которое можно ввести в поле ввода подписания до того, как произойдет автоотправка\n     */\n    requiredCharAmount?: number;\n\n    /**\n     * Длительность обратного отсчета на кнопке повторного запроса сообщения, в милисекундах\n     */\n    countdownDuration?: number;\n\n    /**\n     * Продолжительность блокировки формы (ms)\n     */\n    tempBlockDuration?: number;\n\n    /**\n     * Номер телефона, на который отправлен код\n     */\n    phone?: string;\n\n    /**\n     * Не осталось попыток ввода кода\n     */\n    blockSmsRetry?: boolean;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Сss класс для стилизации общей обёртки\n     */\n    className?: string;\n\n    /**\n     * Флаг - нужно ли очищать код при возникновении ошибки\n     */\n    clearCodeOnError?: boolean;\n\n    /**\n     * Функция обновления состояния компонента\n     */\n    onChangeState: (state: ConfirmationState | string) => void;\n\n    /**\n     * Функция обновления состояния компонента\n     */\n    onChangeScreen: (state: ConfirmationScreen | string) => void;\n\n    /**\n     * Обработчик события завершения ввода кода подписания\n     */\n    onInputFinished: (code: string) => void;\n\n    /**\n     * Обработчик события нажатия на кнопку \"Запросить код\"\n     */\n    onSmsRetryClick: () => void;\n\n    /**\n     * Клик по кнопке \"Понятно\" на экране фатальной ошибки\n     */\n    onFatalErrorOkButtonClick?: () => void;\n\n    /**\n     * Временная блокировка формы закончилась\n     */\n    onTempBlockFinished?: () => void;\n\n    /**\n     * Возвращает объект, где ключ - название экрана (screen), значение - компонент для экрана\n     */\n    getScreensMap?: (defaultScreensMap: ScreensMap) => ScreensMap;\n\n    /**\n     * Дочерние элементы\n     */\n    children?: ReactNode;\n\n    /**\n     * Скрыть секцию с повторной отправкой кода\n     * @default false\n     */\n    hideCountdownSection?: boolean;\n\n    /**\n     *  Слот для контента с подсказкой на главном экране\n     */\n    initialScreenHintSlot?: ReactNode;\n\n    /**\n     * Контрольная точка для кнопки, с нее начинается desktop версия\n     * @default 1024\n     */\n    breakpoint?: number;\n\n    /**\n     * Версия, которая будет использоваться при серверном рендеринге\n     */\n    client?: 'desktop' | 'mobile';\n\n    /**\n     * Продолжительность отображения ошибки\n     * @default 1300\n     */\n    errorVisibleDuration?: number;\n};\n\nexport type TConfirmationContext = Required<\n    Pick<\n        ConfirmationProps,\n        | 'alignContent'\n        | 'texts'\n        | 'state'\n        | 'screen'\n        | 'requiredCharAmount'\n        | 'onInputFinished'\n        | 'countdownDuration'\n        | 'onChangeState'\n        | 'onSmsRetryClick'\n        | 'onChangeScreen'\n        | 'onFatalErrorOkButtonClick'\n        | 'tempBlockDuration'\n        | 'hideCountdownSection'\n    >\n> &\n    Pick<\n        ConfirmationProps,\n        | 'phone'\n        | 'blockSmsRetry'\n        | 'onTempBlockFinished'\n        | 'clearCodeOnError'\n        | 'initialScreenHintSlot'\n        | 'errorVisibleDuration'\n        | 'breakpoint'\n        | 'client'\n    > & {\n        timeLeft: number;\n    };\n\nexport type ConfirmationTexts = {\n    /**\n     * Экран INITIAL\n     */\n    title?: ReactNode; // заголовок\n    codeError?: string; // ошибка проверки кода\n    codeErrorExpired?: string; // код устарел, запросите новый\n    codeErrorExpiredEnded?: string; // код устарел\n    codeChecking?: string; // код проверяется\n    codeSending?: string; // код отправляется\n    codeSended?: string; // код отправлен\n    buttonRetry?: string; // кнопка повторной отправки кода\n    linkToHint?: string; // ссылка на экран HINT\n    noAttemptsLeft?: string; // не осталось попыток запроса кода\n    countdown?: string; // 'запросить повторно можно через'\n\n    /**\n     * Экран HINT\n     */\n    hintTitle?: string; // заголовок\n    hintDescription?: string; // описание\n    hintNotification?: string; // уведомление\n    hintButton?: string; // кнопка 'Вернуться'\n    domesticPhone?: string; // номер телефона для звонков по России\n    internationalPhone?: string; // номер телефона для звонков из-за границы\n\n    /**\n     * Экран FATAL_ERROR\n     */\n    fatalErrorTitle?: ReactNode; // заголовок\n    fatalErrorDescription?: ReactNode; // описание\n    fatalErrorButton?: string; // кнопка\n\n    /**\n     * Экран TEMP_BLOCK\n     */\n    tempBlockTitle?: ReactNode; // заголовок\n    tempBlockDescription?: ReactNode; // описание\n\n    /**\n     * Экран TEMP_BLOCK_OVER\n     */\n    tempBlockOverTitle?: ReactNode; // заголовок\n    tempBlockOverDescription?: ReactNode; // описание\n    tempBlockOverButton?: string; // кнопка\n};\n\nexport type ConfirmationScreen =\n    | 'INITIAL' // начальный экран\n    | 'HINT' // экран \"Не приходит смс?\"\n    | 'FATAL_ERROR' // экран критической ошибки\n    | 'TEMP_BLOCK' // экран временной блокировки\n    | 'TEMP_BLOCK_OVER'; // экран todo\n\nexport type ConfirmationState =\n    | 'INITIAL' // начальное состояние\n    | 'CODE_CHECKING' // проверка кода\n    | 'CODE_SENDING' // повторная отправка кода\n    | 'CODE_ERROR' // ошибка, когда ввели неверный код\n    | 'CODE_EXPIRED' // ошибка, когда код устарел, но можно запросить новый\n    | 'CODE_EXPIRED_ENDED'; // ошибка, когда код устарел\n\nexport type ScreensMap = {\n    [key: string]: ComponentType;\n};\n\nexport const defaultTexts: ConfirmationTexts = {\n    title: 'Введите код из\\xa0уведомления',\n    codeError: 'Код не подходит, проверьте его',\n    codeErrorExpired: 'Код устарел, запросите новый',\n    codeErrorExpiredEnded: 'Код устарел',\n    codeChecking: '',\n    codeSending: '',\n    buttonRetry: 'Запросить код',\n    hintTitle: 'Не\\xa0приходит код?',\n    hintDescription: 'Если\\xa0сменили номер, позвоните нам или обратитесь в\\xa0любой офис банка.',\n    hintNotification:\n        'Если номер не\\xa0меняли, попробуйте запросить код позже — возможно, перегружен сервис отправки уведомлений.',\n    linkToHint: 'Не\\xa0приходит код?',\n    hintButton: 'Вернуться к\\xa0вводу кода',\n    noAttemptsLeft: 'Не\\xa0осталось попыток запроса кода',\n    fatalErrorTitle: 'Ввести код больше нельзя',\n    fatalErrorDescription:\n        'Мы ограничили следующие попытки ввода, потому\\xa0что код был введён неверно больше 5 раз.',\n    fatalErrorButton: 'Понятно',\n    tempBlockTitle: 'Ввести код пока нельзя',\n    tempBlockDescription: 'Слишком много неверных попыток. Запросите новый позже',\n    tempBlockOverTitle: 'Ввод разблокирован',\n    tempBlockOverDescription: 'Теперь можно запросить новый код',\n    tempBlockOverButton: 'Запросить новый код',\n    codeSended: 'Код отправлен',\n    countdown: 'Запросить новый можно через',\n    domesticPhone: '8 800 200 00 00',\n    internationalPhone: '+7 495 78 888 78',\n};\n"],"names":[],"mappings":"AA2Oa,MAAA,YAAY,GAAsB;AAC3C,IAAA,KAAK,EAAE,+BAA+B;AACtC,IAAA,SAAS,EAAE,gCAAgC;AAC3C,IAAA,gBAAgB,EAAE,8BAA8B;AAChD,IAAA,qBAAqB,EAAE,aAAa;AACpC,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,WAAW,EAAE,eAAe;AAC5B,IAAA,SAAS,EAAE,qBAAqB;AAChC,IAAA,eAAe,EAAE,4EAA4E;AAC7F,IAAA,gBAAgB,EACZ,6GAA6G;AACjH,IAAA,UAAU,EAAE,qBAAqB;AACjC,IAAA,UAAU,EAAE,2BAA2B;AACvC,IAAA,cAAc,EAAE,qCAAqC;AACrD,IAAA,eAAe,EAAE,0BAA0B;AAC3C,IAAA,qBAAqB,EACjB,2FAA2F;AAC/F,IAAA,gBAAgB,EAAE,SAAS;AAC3B,IAAA,cAAc,EAAE,wBAAwB;AACxC,IAAA,oBAAoB,EAAE,uDAAuD;AAC7E,IAAA,kBAAkB,EAAE,oBAAoB;AACxC,IAAA,wBAAwB,EAAE,kCAAkC;AAC5D,IAAA,mBAAmB,EAAE,qBAAqB;AAC1C,IAAA,UAAU,EAAE,eAAe;AAC3B,IAAA,SAAS,EAAE,6BAA6B;AACxC,IAAA,aAAa,EAAE,iBAAiB;AAChC,IAAA,kBAAkB,EAAE,kBAAkB;;;;;"}
+{"version":3,"file":"types.js","sources":["../src/types.ts"],"sourcesContent":["import { type ComponentType, type ReactNode } from 'react';\n\nexport interface ConfirmationProps {\n    /**\n     * Экран компонента\n     */\n    screen: ConfirmationScreen | string;\n\n    /**\n     * Состояние компонента\n     */\n    state: ConfirmationState | string;\n\n    /**\n     * Мобильная версия компонента для экрана\n     */\n    mobile?: boolean;\n\n    /**\n     * Позиционирование контента\n     */\n    alignContent?: 'left' | 'center';\n\n    /**\n     * HTML тег для заголовка\n     * @default 'h3'\n     */\n    titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n    /**\n     * Объект с текстами\n     */\n    texts?: ConfirmationTexts;\n\n    /**\n     * Количество символов, которое можно ввести в поле ввода подписания до того, как произойдет автоотправка\n     */\n    requiredCharAmount?: number;\n\n    /**\n     * Длительность обратного отсчета на кнопке повторного запроса сообщения, в милисекундах\n     */\n    countdownDuration?: number;\n\n    /**\n     * Продолжительность блокировки формы (ms)\n     */\n    tempBlockDuration?: number;\n\n    /**\n     * Номер телефона, на который отправлен код\n     */\n    phone?: string;\n\n    /**\n     * Не осталось попыток ввода кода\n     */\n    blockSmsRetry?: boolean;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n\n    /**\n     * Сss класс для стилизации общей обёртки\n     */\n    className?: string;\n\n    /**\n     * Флаг - нужно ли очищать код при возникновении ошибки\n     */\n    clearCodeOnError?: boolean;\n\n    /**\n     * Функция обновления состояния компонента\n     */\n    onChangeState: (state: ConfirmationState | string) => void;\n\n    /**\n     * Функция обновления состояния компонента\n     */\n    onChangeScreen: (state: ConfirmationScreen | string) => void;\n\n    /**\n     * Обработчик события завершения ввода кода подписания\n     */\n    onInputFinished: (code: string) => void;\n\n    /**\n     * Обработчик события нажатия на кнопку \"Запросить код\"\n     */\n    onSmsRetryClick: () => void;\n\n    /**\n     * Клик по кнопке \"Понятно\" на экране фатальной ошибки\n     */\n    onFatalErrorOkButtonClick?: () => void;\n\n    /**\n     * Временная блокировка формы закончилась\n     */\n    onTempBlockFinished?: () => void;\n\n    /**\n     * Возвращает объект, где ключ - название экрана (screen), значение - компонент для экрана\n     */\n    getScreensMap?: (defaultScreensMap: ScreensMap) => ScreensMap;\n\n    /**\n     * Дочерние элементы\n     */\n    children?: ReactNode;\n\n    /**\n     * Скрыть секцию с повторной отправкой кода\n     * @default false\n     */\n    hideCountdownSection?: boolean;\n\n    /**\n     *  Слот для контента с подсказкой на главном экране\n     */\n    initialScreenHintSlot?: ReactNode;\n\n    /**\n     * Контрольная точка для кнопки, с нее начинается desktop версия\n     * @default 1024\n     */\n    breakpoint?: number;\n\n    /**\n     * Версия, которая будет использоваться при серверном рендеринге\n     */\n    client?: 'desktop' | 'mobile';\n\n    /**\n     * Продолжительность отображения ошибки\n     * @default 1300\n     */\n    errorVisibleDuration?: number;\n}\n\nexport type TConfirmationContext = Required<\n    Pick<\n        ConfirmationProps,\n        | 'alignContent'\n        | 'titleTag'\n        | 'texts'\n        | 'state'\n        | 'screen'\n        | 'requiredCharAmount'\n        | 'onInputFinished'\n        | 'countdownDuration'\n        | 'onChangeState'\n        | 'onSmsRetryClick'\n        | 'onChangeScreen'\n        | 'onFatalErrorOkButtonClick'\n        | 'tempBlockDuration'\n        | 'hideCountdownSection'\n    >\n> &\n    Pick<\n        ConfirmationProps,\n        | 'phone'\n        | 'blockSmsRetry'\n        | 'onTempBlockFinished'\n        | 'clearCodeOnError'\n        | 'initialScreenHintSlot'\n        | 'errorVisibleDuration'\n        | 'breakpoint'\n        | 'client'\n    > & {\n        timeLeft: number;\n    };\n\nexport interface ConfirmationTexts {\n    /**\n     * Экран INITIAL\n     */\n    title?: ReactNode; // заголовок\n    codeError?: string; // ошибка проверки кода\n    codeErrorExpired?: string; // код устарел, запросите новый\n    codeErrorExpiredEnded?: string; // код устарел\n    codeChecking?: string; // код проверяется\n    codeSending?: string; // код отправляется\n    codeSended?: string; // код отправлен\n    buttonRetry?: string; // кнопка повторной отправки кода\n    linkToHint?: string; // ссылка на экран HINT\n    noAttemptsLeft?: string; // не осталось попыток запроса кода\n    countdown?: string; // 'запросить повторно можно через'\n\n    /**\n     * Экран HINT\n     */\n    hintTitle?: string; // заголовок\n    hintDescription?: string; // описание\n    hintNotification?: string; // уведомление\n    hintButton?: string; // кнопка 'Вернуться'\n    domesticPhone?: string; // номер телефона для звонков по России\n    internationalPhone?: string; // номер телефона для звонков из-за границы\n\n    /**\n     * Экран FATAL_ERROR\n     */\n    fatalErrorTitle?: ReactNode; // заголовок\n    fatalErrorDescription?: ReactNode; // описание\n    fatalErrorButton?: string; // кнопка\n\n    /**\n     * Экран TEMP_BLOCK\n     */\n    tempBlockTitle?: ReactNode; // заголовок\n    tempBlockDescription?: ReactNode; // описание\n\n    /**\n     * Экран TEMP_BLOCK_OVER\n     */\n    tempBlockOverTitle?: ReactNode; // заголовок\n    tempBlockOverDescription?: ReactNode; // описание\n    tempBlockOverButton?: string; // кнопка\n}\n\nexport type ConfirmationScreen =\n    | 'INITIAL' // начальный экран\n    | 'HINT' // экран \"Не приходит смс?\"\n    | 'FATAL_ERROR' // экран критической ошибки\n    | 'TEMP_BLOCK' // экран временной блокировки\n    | 'TEMP_BLOCK_OVER'; // экран todo\n\nexport type ConfirmationState =\n    | 'INITIAL' // начальное состояние\n    | 'CODE_CHECKING' // проверка кода\n    | 'CODE_SENDING' // повторная отправка кода\n    | 'CODE_ERROR' // ошибка, когда ввели неверный код\n    | 'CODE_EXPIRED' // ошибка, когда код устарел, но можно запросить новый\n    | 'CODE_EXPIRED_ENDED'; // ошибка, когда код устарел\n\nexport interface ScreensMap {\n    [key: string]: ComponentType;\n}\n\nexport const defaultTexts: ConfirmationTexts = {\n    title: 'Введите код из\\xa0уведомления',\n    codeError: 'Код не подходит, проверьте его',\n    codeErrorExpired: 'Код устарел, запросите новый',\n    codeErrorExpiredEnded: 'Код устарел',\n    codeChecking: '',\n    codeSending: '',\n    buttonRetry: 'Запросить код',\n    hintTitle: 'Не\\xa0приходит код?',\n    hintDescription: 'Если\\xa0сменили номер, позвоните нам или обратитесь в\\xa0любой офис банка.',\n    hintNotification:\n        'Если номер не\\xa0меняли, попробуйте запросить код позже — возможно, перегружен сервис отправки уведомлений.',\n    linkToHint: 'Не\\xa0приходит код?',\n    hintButton: 'Вернуться к\\xa0вводу кода',\n    noAttemptsLeft: 'Не\\xa0осталось попыток запроса кода',\n    fatalErrorTitle: 'Ввести код больше нельзя',\n    fatalErrorDescription:\n        'Мы ограничили следующие попытки ввода, потому\\xa0что код был введён неверно больше 5 раз.',\n    fatalErrorButton: 'Понятно',\n    tempBlockTitle: 'Ввести код пока нельзя',\n    tempBlockDescription: 'Слишком много неверных попыток. Запросите новый позже',\n    tempBlockOverTitle: 'Ввод разблокирован',\n    tempBlockOverDescription: 'Теперь можно запросить новый код',\n    tempBlockOverButton: 'Запросить новый код',\n    codeSended: 'Код отправлен',\n    countdown: 'Запросить новый можно через',\n    domesticPhone: '8 800 200 00 00',\n    internationalPhone: '+7 495 78 888 78',\n};\n"],"names":[],"mappings":"AAkPa,MAAA,YAAY,GAAsB;AAC3C,IAAA,KAAK,EAAE,+BAA+B;AACtC,IAAA,SAAS,EAAE,gCAAgC;AAC3C,IAAA,gBAAgB,EAAE,8BAA8B;AAChD,IAAA,qBAAqB,EAAE,aAAa;AACpC,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,WAAW,EAAE,EAAE;AACf,IAAA,WAAW,EAAE,eAAe;AAC5B,IAAA,SAAS,EAAE,qBAAqB;AAChC,IAAA,eAAe,EAAE,4EAA4E;AAC7F,IAAA,gBAAgB,EACZ,6GAA6G;AACjH,IAAA,UAAU,EAAE,qBAAqB;AACjC,IAAA,UAAU,EAAE,2BAA2B;AACvC,IAAA,cAAc,EAAE,qCAAqC;AACrD,IAAA,eAAe,EAAE,0BAA0B;AAC3C,IAAA,qBAAqB,EACjB,2FAA2F;AAC/F,IAAA,gBAAgB,EAAE,SAAS;AAC3B,IAAA,cAAc,EAAE,wBAAwB;AACxC,IAAA,oBAAoB,EAAE,uDAAuD;AAC7E,IAAA,kBAAkB,EAAE,oBAAoB;AACxC,IAAA,wBAAwB,EAAE,kCAAkC;AAC5D,IAAA,mBAAmB,EAAE,qBAAqB;AAC1C,IAAA,UAAU,EAAE,eAAe;AAC3B,IAAA,SAAS,EAAE,6BAA6B;AACxC,IAAA,aAAa,EAAE,iBAAiB;AAChC,IAAA,kBAAkB,EAAE,kBAAkB;;;;;"}

package/moderncssm/utils.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ConfirmationProps } from './types';
+import { type ConfirmationProps } from './types';
 /**
  * Форматирование миллисекунд в hh:mm:ss.
  *

package/moderncssm/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { ConfirmationProps } from './types';\n\n/**\n * Форматирование миллисекунд в hh:mm:ss.\n *\n * @param {Number} ms миллисекунды\n * @returns {String} время в формате mm:ss\n */\nexport function formatMsAsMinutes(ms: number) {\n    const totalSeconds = Math.ceil(ms / 1000);\n    const totalMinutes = Math.floor(totalSeconds / 60);\n    const totalHours = Math.floor(totalMinutes / 60);\n\n    const seconds = totalSeconds % 60;\n    const paddedSeconds = `00${seconds}`.slice(-2);\n\n    if (totalHours > 0) {\n        const minutes = totalMinutes % 60;\n\n        const paddedMinutes = `00${minutes}`.slice(-2);\n        const paddedHours = `00${totalHours}`.slice(-2);\n\n        return `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;\n    }\n\n    const paddedMinutes = `00${totalMinutes}`.slice(-2);\n\n    return `${paddedMinutes}:${paddedSeconds}`;\n}\n\ntype UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];\n\n/**\n * Возвращает время, которое осталось до истечения таймера в ms\n */\nexport const useCountdown: UseCountdown = (countdownDuration, tick = 1000) => {\n    const timerId = useRef(0);\n\n    const start = useRef(0);\n\n    const [timePassed, setTimePassed] = useState(0);\n\n    const stopTimer = useCallback(() => {\n        window.clearInterval(timerId.current);\n    }, []);\n\n    const updateProgress = useCallback(() => {\n        const passed = Date.now() - start.current;\n\n        if (passed >= countdownDuration) {\n            stopTimer();\n\n            setTimePassed(countdownDuration);\n        } else {\n            setTimePassed(passed);\n        }\n    }, [countdownDuration, stopTimer]);\n\n    const startTimer = useCallback(() => {\n        stopTimer();\n\n        start.current = Date.now();\n\n        updateProgress();\n\n        timerId.current = window.setInterval(updateProgress, tick);\n    }, [stopTimer, updateProgress, tick]);\n\n    const timeLeft = countdownDuration - timePassed;\n\n    useEffect(\n        () => () => {\n            stopTimer();\n        },\n        [stopTimer],\n    );\n\n    return [timeLeft, startTimer, stopTimer];\n};\n\nexport const ONE_DAY = 24 * 60 * 60 * 1000;\nexport const ONE_MINUTE = 60 * 1000;\n\ntype UseConfirmationParams = {\n    state?: ConfirmationProps['state'];\n    screen?: ConfirmationProps['screen'];\n    blockSmsRetry?: ConfirmationProps['blockSmsRetry'];\n};\n\nexport const useConfirmation = ({ state, screen, blockSmsRetry }: UseConfirmationParams = {}) => {\n    const [confirmationState, setConfirmationState] = useState(state ?? 'INITIAL');\n    const [confirmationScreen, setConfirmationScreen] = useState(screen ?? 'INITIAL');\n    const [confirmationBlockSmsRetry, setConfirmationBlockSmsRetry] = useState(\n        blockSmsRetry ?? false,\n    );\n\n    return {\n        confirmationState,\n        confirmationScreen,\n        confirmationBlockSmsRetry,\n        setConfirmationState,\n        setConfirmationScreen,\n        setConfirmationBlockSmsRetry,\n    };\n};\n\nconst NON_NUMBER_OR_PLUS_REGEXP = new RegExp(/[^\\d+]/g);\n\n/**\n * @returns ссылку для набора номера\n */\nexport function getPhoneHref(phone: string): string {\n    return `tel:${phone.replace(NON_NUMBER_OR_PLUS_REGEXP, '')}`;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { type ConfirmationProps } from './types';\n\n/**\n * Форматирование миллисекунд в hh:mm:ss.\n *\n * @param {Number} ms миллисекунды\n * @returns {String} время в формате mm:ss\n */\nexport function formatMsAsMinutes(ms: number) {\n    const totalSeconds = Math.ceil(ms / 1000);\n    const totalMinutes = Math.floor(totalSeconds / 60);\n    const totalHours = Math.floor(totalMinutes / 60);\n\n    const seconds = totalSeconds % 60;\n    const paddedSeconds = `00${seconds}`.slice(-2);\n\n    if (totalHours > 0) {\n        const minutes = totalMinutes % 60;\n\n        const paddedMinutes = `00${minutes}`.slice(-2);\n        const paddedHours = `00${totalHours}`.slice(-2);\n\n        return `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;\n    }\n\n    const paddedMinutes = `00${totalMinutes}`.slice(-2);\n\n    return `${paddedMinutes}:${paddedSeconds}`;\n}\n\ntype UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];\n\n/**\n * Возвращает время, которое осталось до истечения таймера в ms\n */\nexport const useCountdown: UseCountdown = (countdownDuration, tick = 1000) => {\n    const timerId = useRef(0);\n\n    const start = useRef(0);\n\n    const [timePassed, setTimePassed] = useState(0);\n\n    const stopTimer = useCallback(() => {\n        window.clearInterval(timerId.current);\n    }, []);\n\n    const updateProgress = useCallback(() => {\n        const passed = Date.now() - start.current;\n\n        if (passed >= countdownDuration) {\n            stopTimer();\n\n            setTimePassed(countdownDuration);\n        } else {\n            setTimePassed(passed);\n        }\n    }, [countdownDuration, stopTimer]);\n\n    const startTimer = useCallback(() => {\n        stopTimer();\n\n        start.current = Date.now();\n\n        updateProgress();\n\n        timerId.current = window.setInterval(updateProgress, tick);\n    }, [stopTimer, updateProgress, tick]);\n\n    const timeLeft = countdownDuration - timePassed;\n\n    useEffect(\n        () => () => {\n            stopTimer();\n        },\n        [stopTimer],\n    );\n\n    return [timeLeft, startTimer, stopTimer];\n};\n\nexport const ONE_DAY = 24 * 60 * 60 * 1000;\nexport const ONE_MINUTE = 60 * 1000;\n\ntype UseConfirmationParams = {\n    state?: ConfirmationProps['state'];\n    screen?: ConfirmationProps['screen'];\n    blockSmsRetry?: ConfirmationProps['blockSmsRetry'];\n};\n\nexport const useConfirmation = ({ state, screen, blockSmsRetry }: UseConfirmationParams = {}) => {\n    const [confirmationState, setConfirmationState] = useState(state ?? 'INITIAL');\n    const [confirmationScreen, setConfirmationScreen] = useState(screen ?? 'INITIAL');\n    const [confirmationBlockSmsRetry, setConfirmationBlockSmsRetry] = useState(\n        blockSmsRetry ?? false,\n    );\n\n    return {\n        confirmationState,\n        confirmationScreen,\n        confirmationBlockSmsRetry,\n        setConfirmationState,\n        setConfirmationScreen,\n        setConfirmationBlockSmsRetry,\n    };\n};\n\nconst NON_NUMBER_OR_PLUS_REGEXP = new RegExp(/[^\\d+]/g);\n\n/**\n * @returns ссылку для набора номера\n */\nexport function getPhoneHref(phone: string): string {\n    return `tel:${phone.replace(NON_NUMBER_OR_PLUS_REGEXP, '')}`;\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-confirmation",
-    "version": "14.0.1",
+    "version": "14.1.0",
     "description": "Sms confirmation component",
     "keywords": [],
     "license": "MIT",
@@ -15,7 +15,7 @@
         "@alfalab/core-components-link": "^6.0.0",
         "@alfalab/core-components-mq": "^5.0.1",
         "@alfalab/core-components-spinner": "^5.0.1",
-        "@alfalab/core-components-typography": "^5.0.1",
+        "@alfalab/core-components-typography": "^5.0.2",
         "@alfalab/hooks": "^1.13.1",
         "classnames": "^2.5.1",
         "tslib": "^2.4.0"
@@ -28,6 +28,6 @@
         "access": "public",
         "directory": "dist"
     },
-    "themesVersion": "14.1.0",
+    "themesVersion": "14.1.2",
     "varsVersion": "10.1.0"
 }

package/src/component.responsive.tsx

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 
 import { useIsDesktop } from '@alfalab/core-components-mq';
 
 import { ConfirmationDesktop } from './desktop';
 import { ConfirmationMobile } from './mobile';
-import { ConfirmationProps } from './types';
+import { type ConfirmationProps } from './types';
 
 export type ResponsiveConfirmationProps = Omit<
     ConfirmationProps,

package/src/components/base-confirmation/component.tsx

@@ -1,10 +1,10 @@
-import React, { ComponentType, FC, useEffect, useMemo } from 'react';
+import React, { type ComponentType, type FC, useEffect, useMemo } from 'react';
 import cn from 'classnames';
 
 import { usePrevious } from '@alfalab/hooks';
 
 import { ConfirmationContext } from '../../context';
-import { ConfirmationProps, defaultTexts, TConfirmationContext } from '../../types';
+import { type ConfirmationProps, defaultTexts, type TConfirmationContext } from '../../types';
 import { ONE_DAY, ONE_MINUTE, useCountdown } from '../../utils';
 import { FatalError, Hint, Initial, TempBlock, TempBlockOver } from '../screens';
 
@@ -21,6 +21,7 @@ const confirmationScreens: { [key: string]: ComponentType<{ mobile?: boolean }>
 export const BaseConfirmation: FC<ConfirmationProps> = ({
     state,
     screen,
+    titleTag = 'h3',
     alignContent = 'left',
     children,
     requiredCharAmount = 5,
@@ -97,6 +98,7 @@ export const BaseConfirmation: FC<ConfirmationProps> = ({
     const contextValue: TConfirmationContext = {
         hideCountdownSection,
         alignContent,
+        titleTag,
         texts: { ...defaultTexts, ...restProps.texts },
         state,
         screen,
@@ -119,10 +121,7 @@ export const BaseConfirmation: FC<ConfirmationProps> = ({
         onFatalErrorOkButtonClick: handleFatalErrorOkButtonClick,
     };
 
-    const customScreen = useMemo(
-        () => getScreensMap && getScreensMap(confirmationScreens),
-        [getScreensMap],
-    );
+    const customScreen = useMemo(() => getScreensMap?.(confirmationScreens), [getScreensMap]);
 
     const screensMap = customScreen || confirmationScreens;
 

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

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
 
 .component {
     width: 100%;

package/src/components/countdown-loader/component.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 
 import styles from './index.module.css';
 

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

@@ -1,4 +1,4 @@
-@import '@alfalab/core-components-vars/src/index.css';
+@import '@alfalab/core-components-vars/src/no-typography-index.css';
 
 .circle {
     fill: transparent;

package/src/components/header/component.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import React, { type FC, type ReactNode } from 'react';
 import cn from 'classnames';
 
 import { TitleDesktop } from '@alfalab/core-components-typography';
@@ -15,12 +15,18 @@ export type HeaderProps = {
      * Отображать в мобильной версии экран компонента
      */
     mobile?: boolean;
+
+    /**
+     * HTML тег для заголовка
+     * @default 'h3'
+     */
+    titleTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 };
 
-export const Header: FC<HeaderProps> = ({ mobile, children }) => (
+export const Header: FC<HeaderProps> = ({ mobile, children, titleTag = 'h3' }) => (
     <TitleDesktop
         className={cn(styles.header, styles.typography, { [styles.typographyMobile]: mobile })}
-        tag='h3'
+        tag={titleTag}
         color='primary'
     >
         {children}

package/src/components/screens/fatal-error/component.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useContext } from 'react';
+import React, { type FC, useContext } from 'react';
 import cn from 'classnames';
 
 import { Button } from '@alfalab/core-components-button';
@@ -17,12 +17,14 @@ export type FatalErrorProps = {
 };
 
 export const FatalError: FC<FatalErrorProps> = ({ mobile }) => {
-    const { alignContent, texts, onFatalErrorOkButtonClick, breakpoint, client } =
+    const { alignContent, titleTag, texts, onFatalErrorOkButtonClick, breakpoint, client } =
         useContext(ConfirmationContext);
 
     return (
         <div className={cn(styles.component, styles[alignContent])}>
-            <Header mobile={mobile}>{texts.fatalErrorTitle}</Header>
+            <Header mobile={mobile} titleTag={titleTag}>
+                {texts.fatalErrorTitle}
+            </Header>
 
             <Text
                 view='primary-medium'

package/src/components/screens/hint/component.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useContext } from 'react';
+import React, { type FC, useContext } from 'react';
 import cn from 'classnames';
 
 import { Button } from '@alfalab/core-components-button';
@@ -19,7 +19,7 @@ export type HintProps = {
 };
 
 export const Hint: FC<HintProps> = ({ mobile }) => {
-    const { alignContent, texts, onChangeScreen, onChangeState, breakpoint, client } =
+    const { alignContent, titleTag, texts, onChangeScreen, onChangeState, breakpoint, client } =
         useContext(ConfirmationContext);
 
     const { domesticPhone = '', internationalPhone = '', hintButton } = texts;
@@ -31,7 +31,9 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
 
     return (
         <div className={cn(styles.component, styles[alignContent])}>
-            <Header mobile={mobile}>{texts.hintTitle}</Header>
+            <Header mobile={mobile} titleTag={titleTag}>
+                {texts.hintTitle}
+            </Header>
 
             <Text
                 view='primary-medium'

package/src/components/screens/initial/component.tsx

@@ -1,10 +1,13 @@
-import React, { FC, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import React, { type FC, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import cn from 'classnames';
 
 import { ButtonMobile } from '@alfalab/core-components-button/mobile';
 import { CodeInputDesktop } from '@alfalab/core-components-code-input/desktop';
 import { CodeInputMobile } from '@alfalab/core-components-code-input/mobile';
-import { BaseCodeInputProps, CustomInputRef } from '@alfalab/core-components-code-input/shared';
+import {
+    type BaseCodeInputProps,
+    type CustomInputRef,
+} from '@alfalab/core-components-code-input/shared';
 import { Link } from '@alfalab/core-components-link';
 import { Text } from '@alfalab/core-components-typography';
 import { useLayoutEffect_SAFE_FOR_SSR, usePrevious } from '@alfalab/hooks';
@@ -29,6 +32,7 @@ export const Initial: FC<InitialProps> = ({ mobile }) => {
     const {
         state,
         alignContent,
+        titleTag,
         texts,
         requiredCharAmount,
         timeLeft,
@@ -169,7 +173,9 @@ export const Initial: FC<InitialProps> = ({ mobile }) => {
 
     return (
         <div className={cn(styles.component, styles[alignContent])}>
-            <Header mobile={mobile}>{texts.title}</Header>
+            <Header mobile={mobile} titleTag={titleTag}>
+                {texts.title}
+            </Header>
 
             {phone ? (
                 <Text

package/src/components/screens/initial/countdown-section.tsx

@@ -1,4 +1,4 @@
-import React, { FC, Fragment, ReactNode, useContext } from 'react';
+import React, { type FC, Fragment, type ReactNode, useContext } from 'react';
 import cn from 'classnames';
 
 import { Button } from '@alfalab/core-components-button';

package/src/components/screens/temp-block/component.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useContext, useEffect } from 'react';
+import React, { type FC, useContext, useEffect } from 'react';
 import cn from 'classnames';
 
 import { Text } from '@alfalab/core-components-typography';
@@ -18,8 +18,14 @@ export type TempBlockProps = {
 };
 
 export const TempBlock: FC<TempBlockProps> = ({ mobile }) => {
-    const { alignContent, texts, tempBlockDuration, onChangeScreen, onTempBlockFinished } =
-        useContext(ConfirmationContext);
+    const {
+        alignContent,
+        titleTag,
+        texts,
+        tempBlockDuration,
+        onChangeScreen,
+        onTempBlockFinished,
+    } = useContext(ConfirmationContext);
 
     const [timeLeft, startTimer] = useCountdown(tempBlockDuration);
 
@@ -35,7 +41,9 @@ export const TempBlock: FC<TempBlockProps> = ({ mobile }) => {
 
     return (
         <div className={cn(styles.component, styles[alignContent])}>
-            <Header mobile={mobile}>{texts.tempBlockTitle}</Header>
+            <Header mobile={mobile} titleTag={titleTag}>
+                {texts.tempBlockTitle}
+            </Header>
 
             <Text
                 view='primary-medium'