@alfalab/core-components-confirmation 14.0.1 → 14.1.0

package/modern/components/screens/hint/index.css

@@ -10,50 +10,48 @@
     --gap-24: var(--gap-xl);
     --gap-32: var(--gap-2xl);
 } :root {
-    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
-        sans-serif;
+    --font-family-system:
+        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
 } :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 */
-} .confirmation__component_uanaf {
+} .confirmation__component_t001a {
     display: flex;
     flex-direction: column;
-    align-items: flex-start
-} .confirmation__component_uanaf span:last-of-type {
+    align-items: flex-start;
+} .confirmation__component_t001a span:last-of-type {
         margin-bottom: var(--gap-0);
-    } .confirmation__center_uanaf {
+    } .confirmation__center_t001a {
     align-items: center;
     text-align: center;
-} .confirmation__text_uanaf.confirmation__text_uanaf {
+} .confirmation__text_t001a.confirmation__text_t001a {
     margin-bottom: var(--gap-24);
-} .confirmation__typographyTheme_uanaf.confirmation__typographyTheme_uanaf {
+} .confirmation__typographyTheme_t001a.confirmation__typographyTheme_t001a {
     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_uanaf.confirmation__typographyThemeMobile_uanaf {
+} .confirmation__typographyThemeMobile_t001a.confirmation__typographyThemeMobile_t001a {
     color: var(--color-light-text-secondary);
-} .confirmation__phonesWrap_uanaf {
+} .confirmation__phonesWrap_t001a {
     display: flex;
     flex-direction: column;
     margin-bottom: var(--gap-24);
-} .confirmation__phoneWrap_uanaf {
-    margin-bottom: var(--gap-8)
-} .confirmation__phoneWrap_uanaf:last-child {
+} .confirmation__phoneWrap_t001a {
+    margin-bottom: var(--gap-8);
+} .confirmation__phoneWrap_t001a:last-child {
         margin-bottom: var(--gap-0);
-    } .confirmation__phoneLink_uanaf.confirmation__phoneLink_uanaf {
+    } .confirmation__phoneLink_t001a.confirmation__phoneLink_t001a {
     font-size: 16px;
     line-height: 24px;
     font-weight: 500;
-} .confirmation__hintButton_uanaf {
+} .confirmation__hintButton_t001a {
     margin-top: var(--gap-32);
-} .confirmation__phoneContentMobile_uanaf {
+} .confirmation__phoneContentMobile_t001a {
     display: flex;
     flex-direction: column;
 }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"confirmation__component_uanaf","center":"confirmation__center_uanaf","text":"confirmation__text_uanaf","typographyTheme":"confirmation__typographyTheme_uanaf","typographyThemeMobile":"confirmation__typographyThemeMobile_uanaf","phonesWrap":"confirmation__phonesWrap_uanaf","phoneWrap":"confirmation__phoneWrap_uanaf","phoneLink":"confirmation__phoneLink_uanaf","hintButton":"confirmation__hintButton_uanaf","phoneContentMobile":"confirmation__phoneContentMobile_uanaf"};
+const styles = {"component":"confirmation__component_t001a","center":"confirmation__center_t001a","text":"confirmation__text_t001a","typographyTheme":"confirmation__typographyTheme_t001a","typographyThemeMobile":"confirmation__typographyThemeMobile_t001a","phonesWrap":"confirmation__phonesWrap_t001a","phoneWrap":"confirmation__phoneWrap_t001a","phoneLink":"confirmation__phoneLink_t001a","hintButton":"confirmation__hintButton_t001a","phoneContentMobile":"confirmation__phoneContentMobile_t001a"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/components/screens/initial/component.d.ts

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

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

@@ -13,7 +13,7 @@ import styles from './index.module.css.js';
 
 const CODE_SEND_HINT_VISIBLE_DURATION = 2000;
 const Initial = ({ mobile }) => {
-    const { state, alignContent, texts, requiredCharAmount, timeLeft, phone, clearCodeOnError, hideCountdownSection, initialScreenHintSlot, errorVisibleDuration, onChangeState, onInputFinished, onChangeScreen, onSmsRetryClick, } = useContext(ConfirmationContext);
+    const { state, alignContent, titleTag, texts, requiredCharAmount, timeLeft, phone, clearCodeOnError, hideCountdownSection, initialScreenHintSlot, errorVisibleDuration, onChangeState, onInputFinished, onChangeScreen, onSmsRetryClick, } = useContext(ConfirmationContext);
     const prevState = usePrevious(state);
     const inputRef = useRef(null);
     const [codeSendHintVisible, setCodeSendHintVisible] = useState(false);
@@ -93,7 +93,7 @@ const Initial = ({ mobile }) => {
     const timePassed = timeLeft === 0;
     const ComponentCodeInput = mobile ? CodeInputMobile : CodeInputDesktop;
     return (React.createElement("div", { className: cn(styles.component, styles[alignContent]) },
-        React.createElement(Header, { mobile: mobile }, texts.title),
+        React.createElement(Header, { mobile: mobile, titleTag: titleTag }, texts.title),
         phone ? (React.createElement(Text, { view: 'primary-medium', color: 'primary', className: cn(styles.phone, {
                 [styles.typographyTheme]: !mobile,
                 [styles.typographyThemeMobile]: mobile,

package/modern/components/screens/initial/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../../src/components/screens/initial/component.tsx"],"sourcesContent":["import React, { FC, useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { ButtonMobile } from '@alfalab/core-components-button/mobile';\nimport { CodeInputDesktop } from '@alfalab/core-components-code-input/desktop';\nimport { CodeInputMobile } from '@alfalab/core-components-code-input/mobile';\nimport { BaseCodeInputProps, CustomInputRef } from '@alfalab/core-components-code-input/shared';\nimport { Link } from '@alfalab/core-components-link';\nimport { Text } from '@alfalab/core-components-typography';\nimport { useLayoutEffect_SAFE_FOR_SSR, usePrevious } from '@alfalab/hooks';\n\nimport { ConfirmationContext } from '../../../context';\nimport { Header } from '../../header';\n\nimport { CountdownSection } from './countdown-section';\n\nimport styles from './index.module.css';\n\nexport type InitialProps = {\n    /**\n     * Отображать в мобильной версии экран компонента\n     */\n    mobile?: boolean;\n};\n\nconst CODE_SEND_HINT_VISIBLE_DURATION = 2000;\n\nexport const Initial: FC<InitialProps> = ({ mobile }) => {\n    const {\n        state,\n        alignContent,\n        texts,\n        requiredCharAmount,\n        timeLeft,\n        phone,\n        clearCodeOnError,\n        hideCountdownSection,\n        initialScreenHintSlot,\n        errorVisibleDuration,\n        onChangeState,\n        onInputFinished,\n        onChangeScreen,\n        onSmsRetryClick,\n    } = useContext(ConfirmationContext);\n\n    const prevState = usePrevious(state);\n\n    const inputRef = useRef<CustomInputRef>(null);\n\n    const [codeSendHintVisible, setCodeSendHintVisible] = useState(false);\n\n    const timerId = useRef(0);\n\n    const handleInputComplete: BaseCodeInputProps['onComplete'] = (code) => {\n        onInputFinished(code);\n    };\n\n    const handleSmsHintLinkClick = () => {\n        onChangeScreen('HINT');\n    };\n\n    const handleInputChange = () => {\n        if (state === 'CODE_ERROR') {\n            onChangeState('INITIAL');\n        }\n    };\n\n    const handleSmsRetryClick = () => {\n        if (inputRef.current) {\n            inputRef.current.reset();\n        }\n\n        onSmsRetryClick();\n    };\n\n    const handleErrorAnimationEnd = () => {\n        if (clearCodeOnError && state !== 'INITIAL') {\n            onChangeState('INITIAL');\n        }\n    };\n\n    const clearTimer = useCallback(() => {\n        window.clearTimeout(timerId.current);\n    }, []);\n\n    useEffect(() => {\n        if (inputRef.current) {\n            inputRef.current.focus();\n        }\n\n        return () => {\n            clearTimer();\n        };\n    }, [clearTimer]);\n\n    useEffect(() => {\n        if (!inputRef.current) {\n            return;\n        }\n\n        if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {\n            inputRef.current.focus();\n        }\n    }, [prevState, state, requiredCharAmount]);\n\n    useLayoutEffect_SAFE_FOR_SSR(() => {\n        if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {\n            setCodeSendHintVisible(true);\n\n            clearTimer();\n\n            timerId.current = window.setTimeout(() => {\n                setCodeSendHintVisible(false);\n            }, CODE_SEND_HINT_VISIBLE_DURATION);\n        }\n    }, [prevState, state, clearTimer]);\n\n    const getCodeInputError = (): string | boolean => {\n        if (state === 'CODE_EXPIRED') {\n            return texts.codeErrorExpired || true;\n        }\n\n        if (state === 'CODE_EXPIRED_ENDED') {\n            return texts.codeErrorExpiredEnded || true;\n        }\n\n        if (state === 'CODE_ERROR') {\n            return texts.codeError || true;\n        }\n\n        return false;\n    };\n\n    const renderHintButton = () => {\n        if (initialScreenHintSlot) {\n            return initialScreenHintSlot;\n        }\n\n        if (mobile) {\n            return (\n                <ButtonMobile\n                    onClick={handleSmsHintLinkClick}\n                    className={styles.smsBtn}\n                    view='text'\n                    size='xs'\n                >\n                    {texts.linkToHint}\n                </ButtonMobile>\n            );\n        }\n\n        return (\n            <Link\n                onClick={handleSmsHintLinkClick}\n                className={styles.smsComeLink}\n                view={mobile ? 'primary' : 'secondary'}\n                pseudo={true}\n            >\n                {texts.linkToHint}\n            </Link>\n        );\n    };\n\n    const processing = ['CODE_CHECKING', 'CODE_SENDING'].includes(state);\n\n    const timePassed = timeLeft === 0;\n\n    const ComponentCodeInput = mobile ? CodeInputMobile : CodeInputDesktop;\n\n    return (\n        <div className={cn(styles.component, styles[alignContent])}>\n            <Header mobile={mobile}>{texts.title}</Header>\n\n            {phone ? (\n                <Text\n                    view='primary-medium'\n                    color='primary'\n                    className={cn(styles.phone, {\n                        [styles.typographyTheme]: !mobile,\n                        [styles.typographyThemeMobile]: mobile,\n                    })}\n                >\n                    Отправили на {phone}\n                </Text>\n            ) : null}\n            <ComponentCodeInput\n                disabled={processing}\n                error={getCodeInputError()}\n                ref={inputRef}\n                fields={requiredCharAmount}\n                className={cn(styles.containerInput, styles.codeInput)}\n                onComplete={handleInputComplete}\n                onChange={handleInputChange}\n                clearCodeOnError={clearCodeOnError}\n                errorVisibleDuration={errorVisibleDuration}\n                onErrorAnimationEnd={handleErrorAnimationEnd}\n            />\n            {!hideCountdownSection && (\n                <CountdownSection\n                    processing={processing}\n                    timePassed={timePassed}\n                    codeSendHintVisible={codeSendHintVisible}\n                    handleSmsRetryClick={handleSmsRetryClick}\n                    mobile={mobile}\n                />\n            )}\n\n            {renderHintButton()}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../../src/components/screens/initial/component.tsx"],"sourcesContent":["import React, { type FC, useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\n\nimport { ButtonMobile } from '@alfalab/core-components-button/mobile';\nimport { CodeInputDesktop } from '@alfalab/core-components-code-input/desktop';\nimport { CodeInputMobile } from '@alfalab/core-components-code-input/mobile';\nimport {\n    type BaseCodeInputProps,\n    type CustomInputRef,\n} from '@alfalab/core-components-code-input/shared';\nimport { Link } from '@alfalab/core-components-link';\nimport { Text } from '@alfalab/core-components-typography';\nimport { useLayoutEffect_SAFE_FOR_SSR, usePrevious } from '@alfalab/hooks';\n\nimport { ConfirmationContext } from '../../../context';\nimport { Header } from '../../header';\n\nimport { CountdownSection } from './countdown-section';\n\nimport styles from './index.module.css';\n\nexport type InitialProps = {\n    /**\n     * Отображать в мобильной версии экран компонента\n     */\n    mobile?: boolean;\n};\n\nconst CODE_SEND_HINT_VISIBLE_DURATION = 2000;\n\nexport const Initial: FC<InitialProps> = ({ mobile }) => {\n    const {\n        state,\n        alignContent,\n        titleTag,\n        texts,\n        requiredCharAmount,\n        timeLeft,\n        phone,\n        clearCodeOnError,\n        hideCountdownSection,\n        initialScreenHintSlot,\n        errorVisibleDuration,\n        onChangeState,\n        onInputFinished,\n        onChangeScreen,\n        onSmsRetryClick,\n    } = useContext(ConfirmationContext);\n\n    const prevState = usePrevious(state);\n\n    const inputRef = useRef<CustomInputRef>(null);\n\n    const [codeSendHintVisible, setCodeSendHintVisible] = useState(false);\n\n    const timerId = useRef(0);\n\n    const handleInputComplete: BaseCodeInputProps['onComplete'] = (code) => {\n        onInputFinished(code);\n    };\n\n    const handleSmsHintLinkClick = () => {\n        onChangeScreen('HINT');\n    };\n\n    const handleInputChange = () => {\n        if (state === 'CODE_ERROR') {\n            onChangeState('INITIAL');\n        }\n    };\n\n    const handleSmsRetryClick = () => {\n        if (inputRef.current) {\n            inputRef.current.reset();\n        }\n\n        onSmsRetryClick();\n    };\n\n    const handleErrorAnimationEnd = () => {\n        if (clearCodeOnError && state !== 'INITIAL') {\n            onChangeState('INITIAL');\n        }\n    };\n\n    const clearTimer = useCallback(() => {\n        window.clearTimeout(timerId.current);\n    }, []);\n\n    useEffect(() => {\n        if (inputRef.current) {\n            inputRef.current.focus();\n        }\n\n        return () => {\n            clearTimer();\n        };\n    }, [clearTimer]);\n\n    useEffect(() => {\n        if (!inputRef.current) {\n            return;\n        }\n\n        if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {\n            inputRef.current.focus();\n        }\n    }, [prevState, state, requiredCharAmount]);\n\n    useLayoutEffect_SAFE_FOR_SSR(() => {\n        if (prevState === 'CODE_SENDING' && state !== 'CODE_SENDING') {\n            setCodeSendHintVisible(true);\n\n            clearTimer();\n\n            timerId.current = window.setTimeout(() => {\n                setCodeSendHintVisible(false);\n            }, CODE_SEND_HINT_VISIBLE_DURATION);\n        }\n    }, [prevState, state, clearTimer]);\n\n    const getCodeInputError = (): string | boolean => {\n        if (state === 'CODE_EXPIRED') {\n            return texts.codeErrorExpired || true;\n        }\n\n        if (state === 'CODE_EXPIRED_ENDED') {\n            return texts.codeErrorExpiredEnded || true;\n        }\n\n        if (state === 'CODE_ERROR') {\n            return texts.codeError || true;\n        }\n\n        return false;\n    };\n\n    const renderHintButton = () => {\n        if (initialScreenHintSlot) {\n            return initialScreenHintSlot;\n        }\n\n        if (mobile) {\n            return (\n                <ButtonMobile\n                    onClick={handleSmsHintLinkClick}\n                    className={styles.smsBtn}\n                    view='text'\n                    size='xs'\n                >\n                    {texts.linkToHint}\n                </ButtonMobile>\n            );\n        }\n\n        return (\n            <Link\n                onClick={handleSmsHintLinkClick}\n                className={styles.smsComeLink}\n                view={mobile ? 'primary' : 'secondary'}\n                pseudo={true}\n            >\n                {texts.linkToHint}\n            </Link>\n        );\n    };\n\n    const processing = ['CODE_CHECKING', 'CODE_SENDING'].includes(state);\n\n    const timePassed = timeLeft === 0;\n\n    const ComponentCodeInput = mobile ? CodeInputMobile : CodeInputDesktop;\n\n    return (\n        <div className={cn(styles.component, styles[alignContent])}>\n            <Header mobile={mobile} titleTag={titleTag}>\n                {texts.title}\n            </Header>\n\n            {phone ? (\n                <Text\n                    view='primary-medium'\n                    color='primary'\n                    className={cn(styles.phone, {\n                        [styles.typographyTheme]: !mobile,\n                        [styles.typographyThemeMobile]: mobile,\n                    })}\n                >\n                    Отправили на {phone}\n                </Text>\n            ) : null}\n            <ComponentCodeInput\n                disabled={processing}\n                error={getCodeInputError()}\n                ref={inputRef}\n                fields={requiredCharAmount}\n                className={cn(styles.containerInput, styles.codeInput)}\n                onComplete={handleInputComplete}\n                onChange={handleInputChange}\n                clearCodeOnError={clearCodeOnError}\n                errorVisibleDuration={errorVisibleDuration}\n                onErrorAnimationEnd={handleErrorAnimationEnd}\n            />\n            {!hideCountdownSection && (\n                <CountdownSection\n                    processing={processing}\n                    timePassed={timePassed}\n                    codeSendHintVisible={codeSendHintVisible}\n                    handleSmsRetryClick={handleSmsRetryClick}\n                    mobile={mobile}\n                />\n            )}\n\n            {renderHintButton()}\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

package/modern/components/screens/initial/countdown-section.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { type FC } from 'react';
 declare type CountdownSectionProps = {
     codeSendHintVisible: boolean;
     timePassed: boolean;

package/modern/components/screens/initial/countdown-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"countdown-section.js","sources":["../../../../src/components/screens/initial/countdown-section.tsx"],"sourcesContent":["import React, { FC, Fragment, ReactNode, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { Spinner } from '@alfalab/core-components-spinner';\nimport { Text } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { formatMsAsMinutes } from '../../../utils';\n\nimport styles from './index.module.css';\n\ntype CountdownSectionProps = {\n    codeSendHintVisible: boolean;\n    timePassed: boolean;\n    processing: boolean;\n    mobile?: boolean;\n    handleSmsRetryClick: () => void;\n};\n\nexport const CountdownSection: FC<CountdownSectionProps> = ({\n    codeSendHintVisible,\n    timePassed,\n    processing,\n    mobile,\n    handleSmsRetryClick,\n}) => {\n    const { state, texts, timeLeft, blockSmsRetry, breakpoint, client } =\n        useContext(ConfirmationContext);\n\n    const renderText = (content: ReactNode) => (\n        <Text\n            className={cn(styles.countdownContainer, {\n                [styles.countdownMobile]: mobile,\n                [styles.typographyTheme]: !mobile,\n            })}\n            view={mobile ? 'primary-small' : 'primary-medium'}\n            tag='div'\n        >\n            {content}\n        </Text>\n    );\n\n    if (codeSendHintVisible) return renderText(texts.codeSended);\n\n    if (processing) {\n        return (\n            <div\n                className={cn(styles.loaderWrap, styles.countdownContainer, {\n                    [styles.countdownLoaderMobile]: mobile,\n                    [styles.typographyTheme]: !mobile,\n                })}\n            >\n                <Spinner preset={24} visible={true} />\n\n                <span className={styles.loaderText}>\n                    {state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending}\n                </span>\n            </div>\n        );\n    }\n\n    if (blockSmsRetry) return renderText(texts.noAttemptsLeft);\n\n    if (timePassed) {\n        return (\n            <Button\n                size={mobile ? 'xs' : 'xxs'}\n                view='secondary'\n                onClick={handleSmsRetryClick}\n                className={cn(styles.getCodeButton, { [styles.getCodeButtonMobile]: mobile })}\n                breakpoint={breakpoint}\n                client={client}\n            >\n                {texts.buttonRetry}\n            </Button>\n        );\n    }\n\n    return renderText(\n        <Fragment>\n            {texts.countdown}\n            {'\\u00A0'}\n            <time className={styles.timeCounter}>{formatMsAsMinutes(timeLeft)}</time>\n        </Fragment>,\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;AAoBa,MAAA,gBAAgB,GAA8B,CAAC,EACxD,mBAAmB,EACnB,UAAU,EACV,UAAU,EACV,MAAM,EACN,mBAAmB,GACtB,KAAI;AACD,IAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,GAC/D,UAAU,CAAC,mBAAmB,CAAC;AAEnC,IAAA,MAAM,UAAU,GAAG,CAAC,OAAkB,MAClC,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,kBAAkB,EAAE;AACrC,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,MAAM;AAChC,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;SACpC,CAAC,EACF,IAAI,EAAE,MAAM,GAAG,eAAe,GAAG,gBAAgB,EACjD,GAAG,EAAC,KAAK,IAER,OAAO,CACL,CACV;AAED,IAAA,IAAI,mBAAmB;AAAE,QAAA,OAAO,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC;AAE5D,IAAA,IAAI,UAAU,EAAE;AACZ,QAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,kBAAkB,EAAE;AACxD,gBAAA,CAAC,MAAM,CAAC,qBAAqB,GAAG,MAAM;AACtC,gBAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;aACpC,CAAC,EAAA;YAEF,KAAC,CAAA,aAAA,CAAA,OAAO,IAAC,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAI,CAAA;YAEtC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,UAAU,IAC7B,KAAK,KAAK,eAAe,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,WAAW,CAChE,CACL;AAEb;AAED,IAAA,IAAI,aAAa;AAAE,QAAA,OAAO,UAAU,CAAC,KAAK,CAAC,cAAc,CAAC;AAE1D,IAAA,IAAI,UAAU,EAAE;QACZ,QACI,KAAC,CAAA,aAAA,CAAA,MAAM,EACH,EAAA,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,EAC3B,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,mBAAmB,GAAG,MAAM,EAAE,CAAC,EAC7E,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EAEb,EAAA,KAAK,CAAC,WAAW,CACb;AAEhB;IAED,OAAO,UAAU,CACb,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA;AACJ,QAAA,KAAK,CAAC,SAAS;QACf,QAAQ;AACT,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,EAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAQ,CAClE,CACd;AACL;;;;"}
+{"version":3,"file":"countdown-section.js","sources":["../../../../src/components/screens/initial/countdown-section.tsx"],"sourcesContent":["import React, { type FC, Fragment, type ReactNode, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Button } from '@alfalab/core-components-button';\nimport { Spinner } from '@alfalab/core-components-spinner';\nimport { Text } from '@alfalab/core-components-typography';\n\nimport { ConfirmationContext } from '../../../context';\nimport { formatMsAsMinutes } from '../../../utils';\n\nimport styles from './index.module.css';\n\ntype CountdownSectionProps = {\n    codeSendHintVisible: boolean;\n    timePassed: boolean;\n    processing: boolean;\n    mobile?: boolean;\n    handleSmsRetryClick: () => void;\n};\n\nexport const CountdownSection: FC<CountdownSectionProps> = ({\n    codeSendHintVisible,\n    timePassed,\n    processing,\n    mobile,\n    handleSmsRetryClick,\n}) => {\n    const { state, texts, timeLeft, blockSmsRetry, breakpoint, client } =\n        useContext(ConfirmationContext);\n\n    const renderText = (content: ReactNode) => (\n        <Text\n            className={cn(styles.countdownContainer, {\n                [styles.countdownMobile]: mobile,\n                [styles.typographyTheme]: !mobile,\n            })}\n            view={mobile ? 'primary-small' : 'primary-medium'}\n            tag='div'\n        >\n            {content}\n        </Text>\n    );\n\n    if (codeSendHintVisible) return renderText(texts.codeSended);\n\n    if (processing) {\n        return (\n            <div\n                className={cn(styles.loaderWrap, styles.countdownContainer, {\n                    [styles.countdownLoaderMobile]: mobile,\n                    [styles.typographyTheme]: !mobile,\n                })}\n            >\n                <Spinner preset={24} visible={true} />\n\n                <span className={styles.loaderText}>\n                    {state === 'CODE_CHECKING' ? texts.codeChecking : texts.codeSending}\n                </span>\n            </div>\n        );\n    }\n\n    if (blockSmsRetry) return renderText(texts.noAttemptsLeft);\n\n    if (timePassed) {\n        return (\n            <Button\n                size={mobile ? 'xs' : 'xxs'}\n                view='secondary'\n                onClick={handleSmsRetryClick}\n                className={cn(styles.getCodeButton, { [styles.getCodeButtonMobile]: mobile })}\n                breakpoint={breakpoint}\n                client={client}\n            >\n                {texts.buttonRetry}\n            </Button>\n        );\n    }\n\n    return renderText(\n        <Fragment>\n            {texts.countdown}\n            {'\\u00A0'}\n            <time className={styles.timeCounter}>{formatMsAsMinutes(timeLeft)}</time>\n        </Fragment>,\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;AAoBa,MAAA,gBAAgB,GAA8B,CAAC,EACxD,mBAAmB,EACnB,UAAU,EACV,UAAU,EACV,MAAM,EACN,mBAAmB,GACtB,KAAI;AACD,IAAA,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,GAC/D,UAAU,CAAC,mBAAmB,CAAC;AAEnC,IAAA,MAAM,UAAU,GAAG,CAAC,OAAkB,MAClC,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACD,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,kBAAkB,EAAE;AACrC,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,MAAM;AAChC,YAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;SACpC,CAAC,EACF,IAAI,EAAE,MAAM,GAAG,eAAe,GAAG,gBAAgB,EACjD,GAAG,EAAC,KAAK,IAER,OAAO,CACL,CACV;AAED,IAAA,IAAI,mBAAmB;AAAE,QAAA,OAAO,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC;AAE5D,IAAA,IAAI,UAAU,EAAE;AACZ,QAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,kBAAkB,EAAE;AACxD,gBAAA,CAAC,MAAM,CAAC,qBAAqB,GAAG,MAAM;AACtC,gBAAA,CAAC,MAAM,CAAC,eAAe,GAAG,CAAC,MAAM;aACpC,CAAC,EAAA;YAEF,KAAC,CAAA,aAAA,CAAA,OAAO,IAAC,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAI,CAAA;YAEtC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,MAAM,CAAC,UAAU,IAC7B,KAAK,KAAK,eAAe,GAAG,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,WAAW,CAChE,CACL;AAEb;AAED,IAAA,IAAI,aAAa;AAAE,QAAA,OAAO,UAAU,CAAC,KAAK,CAAC,cAAc,CAAC;AAE1D,IAAA,IAAI,UAAU,EAAE;QACZ,QACI,KAAC,CAAA,aAAA,CAAA,MAAM,EACH,EAAA,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,KAAK,EAC3B,IAAI,EAAC,WAAW,EAChB,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,CAAC,mBAAmB,GAAG,MAAM,EAAE,CAAC,EAC7E,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EAEb,EAAA,KAAK,CAAC,WAAW,CACb;AAEhB;IAED,OAAO,UAAU,CACb,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA;AACJ,QAAA,KAAK,CAAC,SAAS;QACf,QAAQ;AACT,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,EAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAQ,CAClE,CACd;AACL;;;;"}

package/modern/components/screens/initial/index.css

@@ -16,8 +16,8 @@
     --gap-32: var(--gap-2xl);
     --gap-4-neg: var(--gap-2xs-neg);
 } :root {
-    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
-        sans-serif;
+    --font-family-system:
+        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
 } :root {
     --size-xs-height: 40px;
 } :root {
@@ -26,62 +26,60 @@
     --confirmation-text-font-weight: 400;
     --confirmation-text-font-family: var(--font-family-system);
     --confirmation-text-color: var(--color-light-text-primary)
-
-    /* header */
-} .confirmation__component_1nb2w {
+} .confirmation__component_1s4y8 {
     display: flex;
     flex-direction: column;
-} .confirmation__phone_1nb2w.confirmation__phone_1nb2w {
+} .confirmation__phone_1s4y8.confirmation__phone_1s4y8 {
     color: var(--color-light-text-primary);
     margin-bottom: var(--gap-32);
-} .confirmation__typographyTheme_1nb2w.confirmation__typographyTheme_1nb2w {
+} .confirmation__typographyTheme_1s4y8.confirmation__typographyTheme_1s4y8 {
     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_1nb2w.confirmation__typographyThemeMobile_1nb2w {
+} .confirmation__typographyThemeMobile_1s4y8.confirmation__typographyThemeMobile_1s4y8 {
     color: var(--color-light-text-secondary);
-} .confirmation__compact_1nb2w {
+} .confirmation__compact_1s4y8 {
     margin-bottom: var(--gap-24);
-} .confirmation__loaderWrap_1nb2w {
+} .confirmation__loaderWrap_1s4y8 {
     display: flex;
     align-items: center;
-} .confirmation__left_1nb2w {
+} .confirmation__left_1s4y8 {
     align-items: flex-start;
-} .confirmation__center_1nb2w {
+} .confirmation__center_1s4y8 {
     align-items: center;
-    text-align: center
-} .confirmation__center_1nb2w .confirmation__loaderWrap_1nb2w {
+    text-align: center;
+} .confirmation__center_1s4y8 .confirmation__loaderWrap_1s4y8 {
         justify-content: center;
-    } .confirmation__codeInput_1nb2w {
+    } .confirmation__codeInput_1s4y8 {
     margin-bottom: var(--gap-12);
-} .confirmation__smsBtn_1nb2w.confirmation__smsBtn_1nb2w {
+} .confirmation__smsBtn_1s4y8.confirmation__smsBtn_1s4y8 {
     min-height: var(--size-xs-height);
-} .confirmation__smsComeLink_1nb2w.confirmation__smsComeLink_1nb2w {
+} .confirmation__smsComeLink_1s4y8.confirmation__smsComeLink_1s4y8 {
     font-size: 14px;
     line-height: 20px;
     font-weight: 500;
-} .confirmation__countdownContainer_1nb2w.confirmation__countdownContainer_1nb2w {
+} .confirmation__countdownContainer_1s4y8.confirmation__countdownContainer_1s4y8 {
     color: var(--color-light-text-secondary);
     margin-bottom: var(--gap-24);
-} .confirmation__countdownMobile_1nb2w.confirmation__countdownMobile_1nb2w {
+} .confirmation__countdownMobile_1s4y8.confirmation__countdownMobile_1s4y8 {
     margin-bottom: var(--gap-20);
-} .confirmation__countdownLoaderMobile_1nb2w.confirmation__countdownLoaderMobile_1nb2w {
+} .confirmation__countdownLoaderMobile_1s4y8.confirmation__countdownLoaderMobile_1s4y8 {
     margin-bottom: var(--gap-16);
-} .confirmation__timeCounter_1nb2w {
+} .confirmation__timeCounter_1s4y8 {
     display: inline-block;
     min-width: 47px;
     color: var(--color-light-text-secondary);
     text-align: left;
     font-feature-settings: lining-nums tabular-nums;
     font-variant-numeric: lining-nums tabular-nums;
-} .confirmation__getCodeButton_1nb2w {
+} .confirmation__getCodeButton_1s4y8 {
     position: relative;
     top: var(--gap-4-neg);
     margin-bottom: var(--gap-16);
-} .confirmation__getCodeButtonMobile_1nb2w {
+} .confirmation__getCodeButtonMobile_1s4y8 {
     margin-bottom: var(--gap-0);
-} .confirmation__containerInput_1nb2w {
+} .confirmation__containerInput_1s4y8 {
     min-height: 80px;
 }

package/modern/components/screens/initial/index.module.css.js

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"confirmation__component_1nb2w","phone":"confirmation__phone_1nb2w","typographyTheme":"confirmation__typographyTheme_1nb2w","typographyThemeMobile":"confirmation__typographyThemeMobile_1nb2w","compact":"confirmation__compact_1nb2w","loaderWrap":"confirmation__loaderWrap_1nb2w","left":"confirmation__left_1nb2w","center":"confirmation__center_1nb2w","codeInput":"confirmation__codeInput_1nb2w","smsBtn":"confirmation__smsBtn_1nb2w","smsComeLink":"confirmation__smsComeLink_1nb2w","countdownContainer":"confirmation__countdownContainer_1nb2w","countdownMobile":"confirmation__countdownMobile_1nb2w","countdownLoaderMobile":"confirmation__countdownLoaderMobile_1nb2w","timeCounter":"confirmation__timeCounter_1nb2w","getCodeButton":"confirmation__getCodeButton_1nb2w","getCodeButtonMobile":"confirmation__getCodeButtonMobile_1nb2w","containerInput":"confirmation__containerInput_1nb2w"};
+const styles = {"component":"confirmation__component_1s4y8","phone":"confirmation__phone_1s4y8","typographyTheme":"confirmation__typographyTheme_1s4y8","typographyThemeMobile":"confirmation__typographyThemeMobile_1s4y8","compact":"confirmation__compact_1s4y8","loaderWrap":"confirmation__loaderWrap_1s4y8","left":"confirmation__left_1s4y8","center":"confirmation__center_1s4y8","codeInput":"confirmation__codeInput_1s4y8","smsBtn":"confirmation__smsBtn_1s4y8","smsComeLink":"confirmation__smsComeLink_1s4y8","countdownContainer":"confirmation__countdownContainer_1s4y8","countdownMobile":"confirmation__countdownMobile_1s4y8","countdownLoaderMobile":"confirmation__countdownLoaderMobile_1s4y8","timeCounter":"confirmation__timeCounter_1s4y8","getCodeButton":"confirmation__getCodeButton_1s4y8","getCodeButtonMobile":"confirmation__getCodeButtonMobile_1s4y8","containerInput":"confirmation__containerInput_1s4y8"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/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/modern/components/screens/temp-block/component.js

@@ -8,7 +8,7 @@ import { Header } from '../../header/component.js';
 import styles from './index.module.css.js';
 
 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/modern/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/modern/components/screens/temp-block/index.css

@@ -5,42 +5,40 @@
     --gap-xs: 8px;
     --gap-8: var(--gap-xs);
 } :root {
-    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
-        sans-serif;
+    --font-family-system:
+        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
 } :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 */
-} .confirmation__component_vppvo {
+} .confirmation__component_10jl7 {
     display: flex;
     flex-direction: column;
-} .confirmation__center_vppvo {
+} .confirmation__center_10jl7 {
     align-items: center;
     text-align: center;
-} .confirmation__typographyTheme_vppvo.confirmation__typographyTheme_vppvo {
+} .confirmation__typographyTheme_10jl7.confirmation__typographyTheme_10jl7 {
     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_vppvo.confirmation__typographyThemeMobile_vppvo {
+} .confirmation__typographyThemeMobile_10jl7.confirmation__typographyThemeMobile_10jl7 {
     color: var(--color-light-text-secondary);
-} .confirmation__description_vppvo.confirmation__description_vppvo {
+} .confirmation__description_10jl7.confirmation__description_10jl7 {
     margin-bottom: var(--gap-8);
-} .confirmation__countdownWrap_vppvo {
+} .confirmation__countdownWrap_10jl7 {
     display: flex;
     align-items: center;
-} .confirmation__timeCounter_vppvo {
+} .confirmation__timeCounter_10jl7 {
     display: inline-block;
     min-width: 47px;
     color: var(--color-light-text-secondary);
     text-align: left;
     font-feature-settings: lining-nums tabular-nums;
     font-variant-numeric: lining-nums tabular-nums;
-} .confirmation__loader_vppvo {
+} .confirmation__loader_10jl7 {
     margin-right: var(--gap-8);
 }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"confirmation__component_vppvo","center":"confirmation__center_vppvo","typographyTheme":"confirmation__typographyTheme_vppvo","typographyThemeMobile":"confirmation__typographyThemeMobile_vppvo","description":"confirmation__description_vppvo","countdownWrap":"confirmation__countdownWrap_vppvo","timeCounter":"confirmation__timeCounter_vppvo","loader":"confirmation__loader_vppvo"};
+const styles = {"component":"confirmation__component_10jl7","center":"confirmation__center_10jl7","typographyTheme":"confirmation__typographyTheme_10jl7","typographyThemeMobile":"confirmation__typographyThemeMobile_10jl7","description":"confirmation__description_10jl7","countdownWrap":"confirmation__countdownWrap_10jl7","timeCounter":"confirmation__timeCounter_10jl7","loader":"confirmation__loader_10jl7"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/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/modern/components/screens/temp-block-over/component.js

@@ -7,13 +7,13 @@ import { Header } from '../../header/component.js';
 import styles from './index.module.css.js';
 
 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/modern/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/modern/components/screens/temp-block-over/index.css

@@ -5,30 +5,28 @@
     --gap-2xl: 32px;
     --gap-32: var(--gap-2xl);
 } :root {
-    --font-family-system: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica,
-        sans-serif;
+    --font-family-system:
+        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
 } :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 */
-} .confirmation__component_1biyi {
+} .confirmation__component_1a8b9 {
     display: flex;
     flex-direction: column;
-} .confirmation__center_1biyi {
+} .confirmation__center_1a8b9 {
     align-items: center;
     text-align: center;
-} .confirmation__typographyTheme_1biyi.confirmation__typographyTheme_1biyi {
+} .confirmation__typographyTheme_1a8b9.confirmation__typographyTheme_1a8b9 {
     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_1biyi.confirmation__typographyThemeMobile_1biyi {
+} .confirmation__typographyThemeMobile_1a8b9.confirmation__typographyThemeMobile_1a8b9 {
     color: var(--color-light-text-secondary);
-} .confirmation__button_1biyi.confirmation__button_1biyi {
+} .confirmation__button_1a8b9.confirmation__button_1a8b9 {
     margin-top: var(--gap-32);
 }

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

@@ -1,6 +1,6 @@
 import './index.css';
 
-const styles = {"component":"confirmation__component_1biyi","center":"confirmation__center_1biyi","typographyTheme":"confirmation__typographyTheme_1biyi","typographyThemeMobile":"confirmation__typographyThemeMobile_1biyi","button":"confirmation__button_1biyi"};
+const styles = {"component":"confirmation__component_1a8b9","center":"confirmation__center_1a8b9","typographyTheme":"confirmation__typographyTheme_1a8b9","typographyThemeMobile":"confirmation__typographyThemeMobile_1a8b9","button":"confirmation__button_1a8b9"};
 
 export { styles as default };
 //# sourceMappingURL=index.module.css.js.map

package/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/mobile/mobile.css

@@ -1,3 +1,3 @@
-.confirmation__container_gb4w9 {
+.confirmation__container_bh9k2 {
     max-width: 288px;
 }

package/modern/mobile/mobile.module.css.js

@@ -1,6 +1,6 @@
 import './mobile.css';
 
-const styles = {"container":"confirmation__container_gb4w9"};
+const styles = {"container":"confirmation__container_bh9k2"};
 
 export { styles as default };
 //# sourceMappingURL=mobile.module.css.js.map