@alfalab/core-components-confirmation 13.9.3 → 13.9.4

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

@@ -1,12 +1,12 @@
 import React, { useContext, useEffect } from 'react';
 import cn from 'classnames';
-import { Typography } from '@alfalab/core-components-typography/modern';
+import { Text } from '@alfalab/core-components-typography/modern';
 import { ConfirmationContext } from '../../../context.js';
 import { useCountdown, formatMsAsMinutes } from '../../../utils.js';
 import { CountdownLoader } from '../../countdown-loader/component.js';
 import { Header } from '../../header/component.js';
 
-const styles = {"component":"confirmation__component_1ezj5","center":"confirmation__center_1ezj5","typographyTheme":"confirmation__typographyTheme_1ezj5","typographyThemeMobile":"confirmation__typographyThemeMobile_1ezj5","description":"confirmation__description_1ezj5","countdownWrap":"confirmation__countdownWrap_1ezj5","loader":"confirmation__loader_1ezj5"};
+const styles = {"component":"confirmation__component_1kb5d","center":"confirmation__center_1kb5d","typographyTheme":"confirmation__typographyTheme_1kb5d","typographyThemeMobile":"confirmation__typographyThemeMobile_1kb5d","description":"confirmation__description_1kb5d","countdownWrap":"confirmation__countdownWrap_1kb5d","loader":"confirmation__loader_1kb5d"};
 require('./index.css')
 
 const TempBlock = ({ mobile }) => {
@@ -22,7 +22,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(Typography.Text, { view: 'primary-medium', color: 'primary', className: cn(styles.description, {
+        React.createElement(Text, { view: 'primary-medium', color: 'primary', className: cn(styles.description, {
                 [styles.typographyTheme]: !mobile,
                 [styles.typographyThemeMobile]: mobile,
             }) }, texts.tempBlockDescription),

package/modern/components/screens/temp-block/index.css

@@ -1,4 +1,4 @@
-/* hash: 1bf4k */
+/* hash: 15olb */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-text-primary: rgba(3, 3, 6, 0.88);
@@ -37,25 +37,25 @@
     --confirmation-text-color: var(--color-light-text-primary)
 
     /* header */
-} .confirmation__component_1ezj5 {
+} .confirmation__component_1kb5d {
     display: flex;
     flex-direction: column;
-} .confirmation__center_1ezj5 {
+} .confirmation__center_1kb5d {
     align-items: center;
     text-align: center;
-} .confirmation__typographyTheme_1ezj5.confirmation__typographyTheme_1ezj5 {
+} .confirmation__typographyTheme_1kb5d.confirmation__typographyTheme_1kb5d {
     font-size: var(--confirmation-text-font-size);
     line-height: var(--confirmation-text-line-height);
     font-weight: var(--confirmation-text-font-weight);
     font-family: var(--confirmation-text-font-family);
     color: var(--confirmation-text-color);
-} .confirmation__typographyThemeMobile_1ezj5.confirmation__typographyThemeMobile_1ezj5 {
+} .confirmation__typographyThemeMobile_1kb5d.confirmation__typographyThemeMobile_1kb5d {
     color: var(--color-light-text-secondary);
-} .confirmation__description_1ezj5.confirmation__description_1ezj5 {
+} .confirmation__description_1kb5d.confirmation__description_1kb5d {
     margin-bottom: var(--gap-8);
-} .confirmation__countdownWrap_1ezj5 {
+} .confirmation__countdownWrap_1kb5d {
     display: flex;
     align-items: center;
-} .confirmation__loader_1ezj5 {
+} .confirmation__loader_1kb5d {
     margin-right: var(--gap-8);
 }

package/modern/{countdown-section-b5274538.js → countdown-section-9c4f8600.js}

@@ -2,16 +2,16 @@ import React, { useContext } from 'react';
 import cn from 'classnames';
 import { Button } from '@alfalab/core-components-button/modern';
 import { Spinner } from '@alfalab/core-components-spinner/modern';
-import { Typography } from '@alfalab/core-components-typography/modern';
+import { Text } from '@alfalab/core-components-typography/modern';
 import { ConfirmationContext } from './context.js';
 import { formatMsAsMinutes } from './utils.js';
 
-const styles = {"component":"confirmation__component_1vqjl","phone":"confirmation__phone_1vqjl","typographyTheme":"confirmation__typographyTheme_1vqjl","typographyThemeMobile":"confirmation__typographyThemeMobile_1vqjl","compact":"confirmation__compact_1vqjl","loaderWrap":"confirmation__loaderWrap_1vqjl","left":"confirmation__left_1vqjl","center":"confirmation__center_1vqjl","codeInput":"confirmation__codeInput_1vqjl","smsBtn":"confirmation__smsBtn_1vqjl","smsComeLink":"confirmation__smsComeLink_1vqjl","countdownContainer":"confirmation__countdownContainer_1vqjl","countdownMobile":"confirmation__countdownMobile_1vqjl","countdownLoaderMobile":"confirmation__countdownLoaderMobile_1vqjl","getCodeButton":"confirmation__getCodeButton_1vqjl","getCodeButtonMobile":"confirmation__getCodeButtonMobile_1vqjl","containerInput":"confirmation__containerInput_1vqjl"};
+const styles = {"component":"confirmation__component_211r3","phone":"confirmation__phone_211r3","typographyTheme":"confirmation__typographyTheme_211r3","typographyThemeMobile":"confirmation__typographyThemeMobile_211r3","compact":"confirmation__compact_211r3","loaderWrap":"confirmation__loaderWrap_211r3","left":"confirmation__left_211r3","center":"confirmation__center_211r3","codeInput":"confirmation__codeInput_211r3","smsBtn":"confirmation__smsBtn_211r3","smsComeLink":"confirmation__smsComeLink_211r3","countdownContainer":"confirmation__countdownContainer_211r3","countdownMobile":"confirmation__countdownMobile_211r3","countdownLoaderMobile":"confirmation__countdownLoaderMobile_211r3","getCodeButton":"confirmation__getCodeButton_211r3","getCodeButtonMobile":"confirmation__getCodeButtonMobile_211r3","containerInput":"confirmation__containerInput_211r3"};
 require('./components/screens/initial/index.css')
 
 const CountdownSection = ({ codeSendHintVisible, timePassed, processing, mobile, handleSmsRetryClick, }) => {
     const { state, texts, timeLeft, blockSmsRetry, breakpoint, client } = useContext(ConfirmationContext);
-    const renderText = (text) => (React.createElement(Typography.Text, { className: cn(styles.countdownContainer, {
+    const renderText = (text) => (React.createElement(Text, { className: cn(styles.countdownContainer, {
             [styles.countdownMobile]: mobile,
             [styles.typographyTheme]: !mobile,
         }), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' }, text));

package/modern/mobile/component.mobile.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import { BaseConfirmation } from '../components/base-confirmation/component.js';
 
-const styles = {"container":"confirmation__container_iioqg"};
+const styles = {"container":"confirmation__container_kgw6l"};
 require('./mobile.css')
 
 const ConfirmationMobile = ({ className, ...resProps }) => (React.createElement(BaseConfirmation, { mobile: true, className: cn(className, styles.container), ...resProps }));

package/modern/mobile/mobile.css

@@ -1,4 +1,4 @@
-/* hash: w1lrh */
-.confirmation__container_iioqg {
+/* hash: 1xzp4 */
+.confirmation__container_kgw6l {
     max-width: 288px;
 }

package/moderncssm/components/header/component.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import cn from 'classnames';
-import { Typography } from '@alfalab/core-components-typography/moderncssm';
+import { TitleDesktop } from '@alfalab/core-components-typography/moderncssm';
 import styles from './index.module.css';
 
-const Header = ({ mobile, children }) => (React.createElement(Typography.Title, { className: cn(styles.header, styles.typography, { [styles.typographyMobile]: mobile }), tag: 'h3', color: 'primary' }, children));
+const Header = ({ mobile, children }) => (React.createElement(TitleDesktop, { className: cn(styles.header, styles.typography, { [styles.typographyMobile]: mobile }), tag: 'h3', color: 'primary' }, children));
 
 export { Header };

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

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import cn from 'classnames';
 import { Button } from '@alfalab/core-components-button/moderncssm';
-import { Typography } from '@alfalab/core-components-typography/moderncssm';
+import { Text } from '@alfalab/core-components-typography/moderncssm';
 import { ConfirmationContext } from '../../../context.js';
 import { Header } from '../../header/component.js';
 import styles from './index.module.css';
@@ -10,7 +10,7 @@ const FatalError = ({ mobile }) => {
     const { alignContent, texts, onFatalErrorOkButtonClick, breakpoint, client } = useContext(ConfirmationContext);
     return (React.createElement("div", { className: cn(styles.component, styles[alignContent]) },
         React.createElement(Header, { mobile: mobile }, texts.fatalErrorTitle),
-        React.createElement(Typography.Text, { view: 'primary-medium', color: 'primary', className: cn({
+        React.createElement(Text, { view: 'primary-medium', color: 'primary', className: cn({
                 [styles.typographyTheme]: !mobile,
                 [styles.typographyThemeMobile]: mobile,
             }) }, texts.fatalErrorDescription),

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

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import cn from 'classnames';
 import { Button } from '@alfalab/core-components-button/moderncssm';
 import { Link } from '@alfalab/core-components-link/moderncssm';
-import { Typography } from '@alfalab/core-components-typography/moderncssm';
+import { Text } from '@alfalab/core-components-typography/moderncssm';
 import { ConfirmationContext } from '../../../context.js';
 import { getPhoneHref } from '../../../utils.js';
 import { Header } from '../../header/component.js';
@@ -17,7 +17,7 @@ const Hint = ({ mobile }) => {
     };
     return (React.createElement("div", { className: cn(styles.component, styles[alignContent]) },
         React.createElement(Header, { mobile: mobile }, "\u041D\u0435\u00A0\u043F\u0440\u0438\u0445\u043E\u0434\u0438\u0442 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0435?"),
-        React.createElement(Typography.Text, { view: 'primary-medium', color: 'primary', className: cn(styles.text, {
+        React.createElement(Text, { view: 'primary-medium', color: 'primary', className: cn(styles.text, {
                 [styles.typographyTheme]: !mobile,
                 [styles.typographyThemeMobile]: mobile,
             }) }, "\u0415\u0441\u043B\u0438 \u0443\u00A0\u0432\u0430\u0441 \u0438\u0437\u043C\u0435\u043D\u0438\u043B\u0441\u044F \u043D\u043E\u043C\u0435\u0440 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430, \u043F\u043E\u0437\u0432\u043E\u043D\u0438\u0442\u0435 \u043D\u0430\u043C \u0438\u043B\u0438 \u043E\u0431\u0440\u0430\u0442\u0438\u0442\u0435\u0441\u044C \u0432\u00A0\u043B\u044E\u0431\u043E\u0435 \u043E\u0442\u0434\u0435\u043B\u0435\u043D\u0438\u0435 \u0431\u0430\u043D\u043A\u0430."),
@@ -26,7 +26,7 @@ const Hint = ({ mobile }) => {
             }) },
             React.createElement("div", { className: cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile }) },
                 React.createElement(Link, { href: getPhoneHref(domesticPhone), underline: false, className: cn(styles.phoneLink, { [styles.typographyThemeMobile]: mobile }) }, domesticPhone),
-                React.createElement(Typography.Text, { view: 'primary-medium', color: 'primary', className: cn(styles.text, {
+                React.createElement(Text, { view: 'primary-medium', color: 'primary', className: cn(styles.text, {
                         [styles.typographyTheme]: !mobile,
                         [styles.typographyThemeMobile]: mobile,
                     }) }, mobile
@@ -34,13 +34,13 @@ const Hint = ({ mobile }) => {
                     : ' \u2014\u00A0для звонков по\u00A0России')),
             React.createElement("div", { className: cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile }) },
                 React.createElement(Link, { href: getPhoneHref(internationalPhone), underline: false, className: cn(styles.phoneLink, { [styles.typographyThemeMobile]: mobile }) }, internationalPhone),
-                React.createElement(Typography.Text, { view: 'primary-medium', color: 'primary', className: cn(styles.text, {
+                React.createElement(Text, { view: 'primary-medium', color: 'primary', className: cn(styles.text, {
                         [styles.typographyTheme]: !mobile,
                         [styles.typographyThemeMobile]: mobile,
                     }) }, mobile
                     ? 'В\u00A0Москве и\u00A0за\u00A0границей'
                     : ' \u2014\u00A0в\u00A0Москве и\u00A0за\u00A0границей'))),
-        React.createElement(Typography.Text, { view: 'primary-medium', color: 'primary', className: cn(styles.text, {
+        React.createElement(Text, { view: 'primary-medium', color: 'primary', className: cn(styles.text, {
                 [styles.typographyTheme]: !mobile,
                 [styles.typographyThemeMobile]: mobile,
             }) }, "\u0415\u0441\u043B\u0438 \u043D\u043E\u043C\u0435\u0440 \u043D\u0435\u00A0\u043C\u0435\u043D\u044F\u043B\u0441\u044F, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E, \u043F\u0435\u0440\u0435\u0433\u0440\u0443\u0436\u0435\u043D \u0441\u0435\u0440\u0432\u0438\u0441 \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u0438 \u0441\u043E\u043E\u0431\u0449\u0435\u043D\u0438\u0439. \u041F\u043E\u043F\u0440\u043E\u0431\u0443\u0439\u0442\u0435 \u043F\u043E\u0432\u0442\u043E\u0440\u0438\u0442\u044C \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u043D\u0435\u0441\u043A\u043E\u043B\u044C\u043A\u043E \u043C\u0438\u043D\u0443\u0442."),

package/moderncssm/components/screens/initial/component.js

@@ -4,7 +4,7 @@ import { ButtonMobile } from '@alfalab/core-components-button/moderncssm/mobile'
 import { CodeInputDesktop } from '@alfalab/core-components-code-input/moderncssm/desktop';
 import { CodeInputMobile } from '@alfalab/core-components-code-input/moderncssm/mobile';
 import { Link } from '@alfalab/core-components-link/moderncssm';
-import { Typography } from '@alfalab/core-components-typography/moderncssm';
+import { Text } from '@alfalab/core-components-typography/moderncssm';
 import { usePrevious, useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 import { ConfirmationContext } from '../../../context.js';
 import { Header } from '../../header/component.js';
@@ -91,7 +91,7 @@ const Initial = ({ mobile }) => {
     const ComponentCodeInput = mobile ? CodeInputMobile : CodeInputDesktop;
     return (React.createElement("div", { className: cn(styles.component, styles[alignContent]) },
         React.createElement(Header, { mobile: mobile }, texts.title),
-        phone ? (React.createElement(Typography.Text, { view: 'primary-medium', color: 'primary', className: cn(styles.phone, {
+        phone ? (React.createElement(Text, { view: 'primary-medium', color: 'primary', className: cn(styles.phone, {
                 [styles.typographyTheme]: !mobile,
                 [styles.typographyThemeMobile]: mobile,
             }) },

package/moderncssm/components/screens/initial/countdown-section.js

@@ -2,14 +2,14 @@ import React, { useContext } from 'react';
 import cn from 'classnames';
 import { Button } from '@alfalab/core-components-button/moderncssm';
 import { Spinner } from '@alfalab/core-components-spinner/moderncssm';
-import { Typography } from '@alfalab/core-components-typography/moderncssm';
+import { Text } from '@alfalab/core-components-typography/moderncssm';
 import { ConfirmationContext } from '../../../context.js';
 import { formatMsAsMinutes } from '../../../utils.js';
 import styles from './index.module.css';
 
 const CountdownSection = ({ codeSendHintVisible, timePassed, processing, mobile, handleSmsRetryClick, }) => {
     const { state, texts, timeLeft, blockSmsRetry, breakpoint, client } = useContext(ConfirmationContext);
-    const renderText = (text) => (React.createElement(Typography.Text, { className: cn(styles.countdownContainer, {
+    const renderText = (text) => (React.createElement(Text, { className: cn(styles.countdownContainer, {
             [styles.countdownMobile]: mobile,
             [styles.typographyTheme]: !mobile,
         }), view: mobile ? 'primary-small' : 'primary-medium', tag: 'div' }, text));

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

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect } from 'react';
 import cn from 'classnames';
-import { Typography } from '@alfalab/core-components-typography/moderncssm';
+import { Text } from '@alfalab/core-components-typography/moderncssm';
 import { ConfirmationContext } from '../../../context.js';
 import { useCountdown, formatMsAsMinutes } from '../../../utils.js';
 import { CountdownLoader } from '../../countdown-loader/component.js';
@@ -20,7 +20,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(Typography.Text, { view: 'primary-medium', color: 'primary', className: cn(styles.description, {
+        React.createElement(Text, { view: 'primary-medium', color: 'primary', className: cn(styles.description, {
                 [styles.typographyTheme]: !mobile,
                 [styles.typographyThemeMobile]: mobile,
             }) }, texts.tempBlockDescription),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-confirmation",
-    "version": "13.9.3",
+    "version": "13.9.4",
     "description": "Sms confirmation component",
     "keywords": [],
     "license": "MIT",
@@ -10,15 +10,16 @@
         "access": "public",
         "directory": "dist"
     },
+    "sideEffects": false,
     "dependencies": {
-        "@alfalab/core-components-button": "^11.11.0",
-        "@alfalab/core-components-code-input": "^3.9.2",
-        "@alfalab/core-components-link": "^5.3.1",
-        "@alfalab/core-components-spinner": "^4.0.0",
-        "@alfalab/core-components-typography": "^4.11.0",
+        "@alfalab/core-components-button": "^11.11.1",
+        "@alfalab/core-components-code-input": "^3.9.3",
+        "@alfalab/core-components-link": "^5.3.2",
+        "@alfalab/core-components-spinner": "^4.0.1",
+        "@alfalab/core-components-typography": "^4.11.1",
         "@alfalab/core-components-mq": "^4.4.0",
         "@alfalab/hooks": "^1.13.0",
-        "classnames": "^2.3.1",
+        "classnames": "^2.5.1",
         "tslib": "^2.4.0",
         "@alfalab/core-components-shared": "^0.14.0"
     },

package/src/components/header/component.tsx

@@ -1,7 +1,7 @@
 import React, { FC, ReactNode } from 'react';
 import cn from 'classnames';
 
-import { Typography } from '@alfalab/core-components-typography';
+import { TitleDesktop } from '@alfalab/core-components-typography';
 
 import styles from './index.module.css';
 
@@ -18,11 +18,11 @@ export type HeaderProps = {
 };
 
 export const Header: FC<HeaderProps> = ({ mobile, children }) => (
-    <Typography.Title
+    <TitleDesktop
         className={cn(styles.header, styles.typography, { [styles.typographyMobile]: mobile })}
         tag='h3'
         color='primary'
     >
         {children}
-    </Typography.Title>
+    </TitleDesktop>
 );

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

@@ -2,7 +2,7 @@ import React, { FC, useContext } from 'react';
 import cn from 'classnames';
 
 import { Button } from '@alfalab/core-components-button';
-import { Typography } from '@alfalab/core-components-typography';
+import { Text } from '@alfalab/core-components-typography';
 
 import { ConfirmationContext } from '../../../context';
 import { Header } from '../../header';
@@ -24,7 +24,7 @@ export const FatalError: FC<FatalErrorProps> = ({ mobile }) => {
         <div className={cn(styles.component, styles[alignContent])}>
             <Header mobile={mobile}>{texts.fatalErrorTitle}</Header>
 
-            <Typography.Text
+            <Text
                 view='primary-medium'
                 color='primary'
                 className={cn({
@@ -33,7 +33,7 @@ export const FatalError: FC<FatalErrorProps> = ({ mobile }) => {
                 })}
             >
                 {texts.fatalErrorDescription}
-            </Typography.Text>
+            </Text>
 
             <Button
                 size={mobile ? 'xs' : 's'}

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

@@ -3,7 +3,7 @@ import cn from 'classnames';
 
 import { Button } from '@alfalab/core-components-button';
 import { Link } from '@alfalab/core-components-link';
-import { Typography } from '@alfalab/core-components-typography';
+import { Text } from '@alfalab/core-components-typography';
 
 import { ConfirmationContext } from '../../../context';
 import { getPhoneHref } from '../../../utils';
@@ -33,7 +33,7 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
         <div className={cn(styles.component, styles[alignContent])}>
             <Header mobile={mobile}>Не&nbsp;приходит сообщение?</Header>
 
-            <Typography.Text
+            <Text
                 view='primary-medium'
                 color='primary'
                 className={cn(styles.text, {
@@ -43,7 +43,7 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
             >
                 Если у&nbsp;вас изменился номер телефона, позвоните нам или обратитесь в&nbsp;любое
                 отделение банка.
-            </Typography.Text>
+            </Text>
 
             <div
                 className={cn(styles.phonesWrap, {
@@ -58,7 +58,7 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
                     >
                         {domesticPhone}
                     </Link>
-                    <Typography.Text
+                    <Text
                         view='primary-medium'
                         color='primary'
                         className={cn(styles.text, {
@@ -69,7 +69,7 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
                         {mobile
                             ? 'Для\u00A0звонков по\u00A0России'
                             : ' \u2014\u00A0для звонков по\u00A0России'}
-                    </Typography.Text>
+                    </Text>
                 </div>
 
                 <div className={cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile })}>
@@ -80,7 +80,7 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
                     >
                         {internationalPhone}
                     </Link>
-                    <Typography.Text
+                    <Text
                         view='primary-medium'
                         color='primary'
                         className={cn(styles.text, {
@@ -91,11 +91,11 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
                         {mobile
                             ? 'В\u00A0Москве и\u00A0за\u00A0границей'
                             : ' \u2014\u00A0в\u00A0Москве и\u00A0за\u00A0границей'}
-                    </Typography.Text>
+                    </Text>
                 </div>
             </div>
 
-            <Typography.Text
+            <Text
                 view='primary-medium'
                 color='primary'
                 className={cn(styles.text, {
@@ -105,7 +105,7 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
             >
                 Если номер не&nbsp;менялся, возможно, перегружен сервис отправки сообщений.
                 Попробуйте повторить действие через несколько минут.
-            </Typography.Text>
+            </Text>
 
             <Button
                 size={mobile ? 'xs' : 's'}

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

@@ -6,7 +6,7 @@ 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 { Link } from '@alfalab/core-components-link';
-import { Typography } from '@alfalab/core-components-typography';
+import { Text } from '@alfalab/core-components-typography';
 import { useLayoutEffect_SAFE_FOR_SSR, usePrevious } from '@alfalab/hooks';
 
 import { ConfirmationContext } from '../../../context';
@@ -168,7 +168,7 @@ export const Initial: FC<InitialProps> = ({ mobile }) => {
             <Header mobile={mobile}>{texts.title}</Header>
 
             {phone ? (
-                <Typography.Text
+                <Text
                     view='primary-medium'
                     color='primary'
                     className={cn(styles.phone, {
@@ -177,7 +177,7 @@ export const Initial: FC<InitialProps> = ({ mobile }) => {
                     })}
                 >
                     Код отправлен на {phone}
-                </Typography.Text>
+                </Text>
             ) : null}
             <ComponentCodeInput
                 disabled={processing}

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

@@ -3,7 +3,7 @@ import cn from 'classnames';
 
 import { Button } from '@alfalab/core-components-button';
 import { Spinner } from '@alfalab/core-components-spinner';
-import { Typography } from '@alfalab/core-components-typography';
+import { Text } from '@alfalab/core-components-typography';
 
 import { ConfirmationContext } from '../../../context';
 import { formatMsAsMinutes } from '../../../utils';
@@ -29,7 +29,7 @@ export const CountdownSection: FC<CountdownSectionProps> = ({
         useContext(ConfirmationContext);
 
     const renderText = (text?: string) => (
-        <Typography.Text
+        <Text
             className={cn(styles.countdownContainer, {
                 [styles.countdownMobile]: mobile,
                 [styles.typographyTheme]: !mobile,
@@ -38,7 +38,7 @@ export const CountdownSection: FC<CountdownSectionProps> = ({
             tag='div'
         >
             {text}
-        </Typography.Text>
+        </Text>
     );
 
     if (codeSendHintVisible) return renderText(texts.codeSended);

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

@@ -1,7 +1,7 @@
 import React, { FC, useContext, useEffect } from 'react';
 import cn from 'classnames';
 
-import { Typography } from '@alfalab/core-components-typography';
+import { Text } from '@alfalab/core-components-typography';
 
 import { ConfirmationContext } from '../../../context';
 import { formatMsAsMinutes, useCountdown } from '../../../utils';
@@ -37,7 +37,7 @@ export const TempBlock: FC<TempBlockProps> = ({ mobile }) => {
         <div className={cn(styles.component, styles[alignContent])}>
             <Header mobile={mobile}>{texts.tempBlockTitle}</Header>
 
-            <Typography.Text
+            <Text
                 view='primary-medium'
                 color='primary'
                 className={cn(styles.description, {
@@ -46,7 +46,7 @@ export const TempBlock: FC<TempBlockProps> = ({ mobile }) => {
                 })}
             >
                 {texts.tempBlockDescription}
-            </Typography.Text>
+            </Text>
 
             <div className={cn(styles.countdownWrap, { [styles.typographyTheme]: !mobile })}>
                 <CountdownLoader