@alfalab/core-components-confirmation 10.3.1 → 10.4.0

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

@@ -1,4 +1,4 @@
-/* hash: 97tyh */
+/* hash: kspi1 */
 :root {
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: #546272;
@@ -40,18 +40,18 @@
 
     /* input */
 }
-.confirmation__center_10en3 .confirmation__phoneHintWrap_10en3 {
+.confirmation__center_dp4zg .confirmation__phoneHintWrap_dp4zg {
         align-items: center;
     }
-.confirmation__center_10en3 .confirmation__hintWrap_10en3 {
+.confirmation__center_dp4zg .confirmation__hintWrap_dp4zg {
         align-items: center;
     }
-.confirmation__hintWrap_10en3 {
+.confirmation__hintWrap_dp4zg {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
 }
-.confirmation__title_10en3 {
+.confirmation__title_dp4zg {
     margin: 0;
     margin-bottom: var(--gap-xl);
     font-size: var(--confirmation-title-font-size);
@@ -61,7 +61,7 @@
     color: var(--confirmation-title-color);
     font-feature-settings: var(--confirmation-title-font-feature-settings);
 }
-.confirmation__text_10en3 {
+.confirmation__text_dp4zg {
     font-size: var(--confirmation-text-font-size);
     line-height: var(--confirmation-text-line-height);
     font-weight: var(--confirmation-text-font-weight);
@@ -70,7 +70,7 @@
 
     margin-bottom: var(--gap-xl);
 }
-.confirmation__phonesWrap_10en3 {
+.confirmation__phonesWrap_dp4zg {
     font-size: var(--confirmation-text-font-size);
     line-height: var(--confirmation-text-line-height);
     font-weight: var(--confirmation-text-font-weight);
@@ -81,23 +81,23 @@
     flex-direction: column;
     margin-bottom: var(--gap-xl);
 }
-.confirmation__phoneWrap_10en3 {
+.confirmation__phoneWrap_dp4zg {
     margin-bottom: var(--gap-xs)
 }
-.confirmation__phoneWrap_10en3:last-child {
+.confirmation__phoneWrap_dp4zg:last-child {
         margin-bottom: 0;
     }
-.confirmation__phoneLink_10en3 {
+.confirmation__phoneLink_dp4zg {
     font-size: 16px;
     line-height: 24px;
     font-weight: 500
 }
-.confirmation__phoneLink_10en3 > span {
+.confirmation__phoneLink_dp4zg > span {
         border-bottom: none;
     }
-.confirmation__phoneDescription_10en3 {
+.confirmation__phoneDescription_dp4zg {
     color: var(--confirmation-text-color);
 }
-.confirmation__hintButton_10en3 {
+.confirmation__hintButton_dp4zg {
     margin-top: var(--gap-2xl);
 }

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

@@ -2,6 +2,6 @@ import 'react';
 import 'classnames';
 import '../../../utils.js';
 import '../../../context.js';
-import '@alfalab/core-components-link/dist/modern';
-import '@alfalab/core-components-button/dist/modern';
+import '@alfalab/core-components-link/modern';
+import '@alfalab/core-components-button/modern';
 export { Hint } from './component.js';

package/modern/components/screens/index.js

@@ -3,11 +3,11 @@ import 'classnames';
 import '@alfalab/hooks';
 import '../../utils.js';
 import '../../context.js';
-import '@alfalab/core-components-code-input/dist/modern';
-import '@alfalab/core-components-link/dist/modern';
-import '../../countdown-section-2b5dbe74.js';
-import '@alfalab/core-components-loader/dist/modern';
-import '@alfalab/core-components-button/dist/modern';
+import '@alfalab/core-components-code-input/modern';
+import '@alfalab/core-components-link/modern';
+import '../../countdown-section-184fc0e5.js';
+import '@alfalab/core-components-loader/modern';
+import '@alfalab/core-components-button/modern';
 export { Initial } from './initial/component.js';
 export { Hint } from './hint/component.js';
 export { FatalError } from './fatal-error/component.js';

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

@@ -3,11 +3,11 @@ import cn from 'classnames';
 import { usePrevious } from '@alfalab/hooks';
 import '../../../utils.js';
 import { ConfirmationContext } from '../../../context.js';
-import { CodeInput } from '@alfalab/core-components-code-input/dist/modern';
-import { Link } from '@alfalab/core-components-link/dist/modern';
-import { s as styles, C as CountdownSection } from '../../../countdown-section-2b5dbe74.js';
-import '@alfalab/core-components-loader/dist/modern';
-import '@alfalab/core-components-button/dist/modern';
+import { CodeInput } from '@alfalab/core-components-code-input/modern';
+import { Link } from '@alfalab/core-components-link/modern';
+import { s as styles, C as CountdownSection } from '../../../countdown-section-184fc0e5.js';
+import '@alfalab/core-components-loader/modern';
+import '@alfalab/core-components-button/modern';
 
 const CODE_SEND_HINT_VISIBLE_DURATION = 2000;
 const Initial = () => {

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

@@ -2,6 +2,6 @@ import 'react';
 import 'classnames';
 import '../../../utils.js';
 import '../../../context.js';
-export { C as CountdownSection } from '../../../countdown-section-2b5dbe74.js';
-import '@alfalab/core-components-loader/dist/modern';
-import '@alfalab/core-components-button/dist/modern';
+export { C as CountdownSection } from '../../../countdown-section-184fc0e5.js';
+import '@alfalab/core-components-loader/modern';
+import '@alfalab/core-components-button/modern';

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

@@ -1,4 +1,4 @@
-/* hash: 1p8cc */
+/* hash: 1kft5 */
 :root {
     --color-light-text-primary: #0b1f35;
 }
@@ -36,11 +36,11 @@
 
     /* input */
 }
-.confirmation__component_x152m {
+.confirmation__component_1lhct {
     display: flex;
     flex-direction: column;
 }
-.confirmation__header_x152m {
+.confirmation__header_1lhct {
     margin: 0;
     margin-bottom: var(--gap-xl);
     font-size: var(--confirmation-title-font-size);
@@ -50,47 +50,50 @@
     color: var(--confirmation-title-color);
     font-feature-settings: var(--confirmation-title-font-feature-settings);
 }
-.confirmation__phone_x152m {
+.confirmation__phone_1lhct {
     margin-bottom: var(--gap-2xl);
     color: var(--color-light-text-primary);
 }
-.confirmation__inputContainer_x152m {
+.confirmation__inputContainer_1lhct {
     display: flex;
     flex-direction: column;
     margin-bottom: var(--gap-2xl);
 }
-.confirmation__compact_x152m {
+.confirmation__compact_1lhct {
     margin-bottom: var(--gap-xl);
 }
-.confirmation__loaderWrap_x152m {
+.confirmation__loaderWrap_1lhct {
     display: flex;
     align-items: center;
 }
-.confirmation__center_x152m {
+.confirmation__center_1lhct {
     align-items: center;
     text-align: center
 }
-.confirmation__center_x152m .confirmation__codeInput_x152m,
-    .confirmation__center_x152m .confirmation__loaderWrap_x152m {
+.confirmation__center_1lhct .confirmation__codeInput_1lhct,
+    .confirmation__center_1lhct .confirmation__loaderWrap_1lhct {
         justify-content: center;
     }
-.confirmation__smsComeLink_x152m {
+.confirmation__center_1lhct input {
+        margin: 0 var(--gap-2xs);
+    }
+.confirmation__smsComeLink_1lhct {
     font-size: 14px;
     line-height: 20px;
     font-weight: 400;
 }
-.confirmation__countdownContainer_x152m {
+.confirmation__countdownContainer_1lhct {
     margin-bottom: var(--gap-xl);
 }
-.confirmation__getCodeButton_x152m {
+.confirmation__getCodeButton_1lhct {
     position: relative;
     top: var(--gap-2xs-neg);
     margin-bottom: var(--gap-m);
 }
-.confirmation__countdown_x152m {
+.confirmation__countdown_1lhct {
     display: flex;
 }
-.confirmation__countdownTimer_x152m {
+.confirmation__countdownTimer_1lhct {
     display: flex;
     justify-content: flex-start;
     min-width: 45px;

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

@@ -3,9 +3,9 @@ import 'classnames';
 import '@alfalab/hooks';
 import '../../../utils.js';
 import '../../../context.js';
-import '@alfalab/core-components-code-input/dist/modern';
-import '@alfalab/core-components-link/dist/modern';
-import '../../../countdown-section-2b5dbe74.js';
-import '@alfalab/core-components-loader/dist/modern';
-import '@alfalab/core-components-button/dist/modern';
+import '@alfalab/core-components-code-input/modern';
+import '@alfalab/core-components-link/modern';
+import '../../../countdown-section-184fc0e5.js';
+import '@alfalab/core-components-loader/modern';
+import '@alfalab/core-components-button/modern';
 export { Initial } from './component.js';

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

@@ -3,7 +3,7 @@ import { useCountdown, formatMsAsMinutes } from '../../../utils.js';
 import { ConfirmationContext } from '../../../context.js';
 import { CountdownLoader } from '../../countdown-loader/component.js';
 
-var styles = {"header":"confirmation__header_1or77","description":"confirmation__description_1or77","countdownWrap":"confirmation__countdownWrap_1or77","loader":"confirmation__loader_1or77"};
+var styles = {"header":"confirmation__header_1vjf3","description":"confirmation__description_1vjf3","countdownWrap":"confirmation__countdownWrap_1vjf3","loader":"confirmation__loader_1vjf3"};
 require('./index.css')
 
 const TempBlock = () => {

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

@@ -1,4 +1,4 @@
-/* hash: 1460z */
+/* hash: 1imau */
 :root {
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: #546272;
@@ -40,7 +40,7 @@
 
     /* input */
 }
-.confirmation__header_1or77 {
+.confirmation__header_1vjf3 {
     margin: 0;
     margin-bottom: var(--gap-xl);
     font-size: var(--confirmation-title-font-size);
@@ -50,7 +50,7 @@
     color: var(--confirmation-title-color);
     font-feature-settings: var(--confirmation-title-font-feature-settings);
 }
-.confirmation__description_1or77 {
+.confirmation__description_1vjf3 {
     font-size: var(--confirmation-text-font-size);
     line-height: var(--confirmation-text-line-height);
     font-weight: var(--confirmation-text-font-weight);
@@ -59,10 +59,10 @@
 
     margin-bottom: var(--gap-2xl);
 }
-.confirmation__countdownWrap_1or77 {
+.confirmation__countdownWrap_1vjf3 {
     display: flex;
     align-items: center;
 }
-.confirmation__loader_1or77 {
+.confirmation__loader_1vjf3 {
     margin-right: var(--gap-xs);
 }

package/modern/{countdown-section-2b5dbe74.js → countdown-section-184fc0e5.js}

@@ -2,10 +2,10 @@ import React, { useContext } from 'react';
 import cn from 'classnames';
 import { formatMsAsMinutes } from './utils.js';
 import { ConfirmationContext } from './context.js';
-import { Loader } from '@alfalab/core-components-loader/dist/modern';
-import { Button } from '@alfalab/core-components-button/dist/modern';
+import { Loader } from '@alfalab/core-components-loader/modern';
+import { Button } from '@alfalab/core-components-button/modern';
 
-var styles = {"component":"confirmation__component_x152m","header":"confirmation__header_x152m","phone":"confirmation__phone_x152m","inputContainer":"confirmation__inputContainer_x152m","compact":"confirmation__compact_x152m","loaderWrap":"confirmation__loaderWrap_x152m","center":"confirmation__center_x152m","codeInput":"confirmation__codeInput_x152m","smsComeLink":"confirmation__smsComeLink_x152m","countdownContainer":"confirmation__countdownContainer_x152m","getCodeButton":"confirmation__getCodeButton_x152m","countdown":"confirmation__countdown_x152m","countdownTimer":"confirmation__countdownTimer_x152m"};
+var styles = {"component":"confirmation__component_1lhct","header":"confirmation__header_1lhct","phone":"confirmation__phone_1lhct","inputContainer":"confirmation__inputContainer_1lhct","compact":"confirmation__compact_1lhct","loaderWrap":"confirmation__loaderWrap_1lhct","center":"confirmation__center_1lhct","codeInput":"confirmation__codeInput_1lhct","smsComeLink":"confirmation__smsComeLink_1lhct","countdownContainer":"confirmation__countdownContainer_1lhct","getCodeButton":"confirmation__getCodeButton_1lhct","countdown":"confirmation__countdown_1lhct","countdownTimer":"confirmation__countdownTimer_1lhct"};
 require('./components/screens/initial/index.css')
 
 const CountdownSection = ({ codeSendHintVisible, timePassed, processing, handleSmsRetryClick, }) => {

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: exuvc */
+/* hash: 3czbs */
 :root {
     --color-light-text-secondary: #546272;
 }
@@ -28,7 +28,7 @@
 
     /* input */
 }
-.confirmation__component_1y0fi {
+.confirmation__component_lotkd {
     font-size: var(--confirmation-text-font-size);
     line-height: var(--confirmation-text-line-height);
     font-weight: var(--confirmation-text-font-weight);
@@ -41,7 +41,7 @@
     max-width: 400px;
     margin: 0 auto;
 }
-.confirmation__center_1y0fi {
+.confirmation__center_lotkd {
     align-items: center;
     text-align: center;
 }

package/modern/index.js

@@ -4,11 +4,11 @@ import '@alfalab/hooks';
 export { ONE_DAY, ONE_MINUTE, formatMsAsMinutes, useConfirmation, useCountdown } from './utils.js';
 export { ConfirmationContext } from './context.js';
 export { defaultTexts } from './types.js';
-import '@alfalab/core-components-code-input/dist/modern';
-import '@alfalab/core-components-link/dist/modern';
-import './countdown-section-2b5dbe74.js';
-import '@alfalab/core-components-loader/dist/modern';
-import '@alfalab/core-components-button/dist/modern';
+import '@alfalab/core-components-code-input/modern';
+import '@alfalab/core-components-link/modern';
+import './countdown-section-184fc0e5.js';
+import '@alfalab/core-components-loader/modern';
+import '@alfalab/core-components-button/modern';
 export { Initial } from './components/screens/initial/component.js';
 export { Hint } from './components/screens/hint/component.js';
 export { FatalError } from './components/screens/fatal-error/component.js';

package/modern/types.d.ts

@@ -72,6 +72,10 @@ type ConfirmationProps = {
      * Возввращает объект, где ключ - название экрана (screen), значение - компонент для экрана
      */
     getScreensMap?: (defaulScreensMap: ScreensMap) => ScreensMap;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
 };
 type TConfirmationContext = Required<Pick<ConfirmationProps, 'alignContent' | 'texts' | 'state' | 'screen' | 'requiredCharAmount' | 'onInputFinished' | 'countdownDuration' | 'onChangeState' | 'onSmsRetryClick' | 'onChangeScreen' | 'onFatalErrorOkButtonClick' | 'tempBlockDuration'>> & Pick<ConfirmationProps, 'phone' | 'blockSmsRetry' | 'onTempBlockFinished'> & {
     timeLeft: number;

package/package.json

@@ -1,29 +1,29 @@
 {
     "name": "@alfalab/core-components-confirmation",
-    "version": "10.3.1",
+    "version": "10.4.0",
     "description": "Sms confirmation component",
     "keywords": [],
     "license": "MIT",
     "main": "index.js",
     "module": "./esm/index.js",
     "scripts": {
-        "postinstall": "node ./send-stats.js > /dev/null 2>&1 || exit 0"
+        "postinstall": "node -e \"if (require('fs').existsSync('./send-stats.js')){require('./send-stats.js')} \""
     },
     "publishConfig": {
         "access": "public",
         "directory": "dist"
     },
     "dependencies": {
-        "@alfalab/core-components-button": "^5.2.1",
-        "@alfalab/core-components-code-input": "^1.4.1",
-        "@alfalab/core-components-link": "^3.3.1",
-        "@alfalab/core-components-loader": "^2.1.1",
+        "@alfalab/core-components-button": "^5.3.0",
+        "@alfalab/core-components-code-input": "^1.5.0",
+        "@alfalab/core-components-link": "^3.4.0",
+        "@alfalab/core-components-loader": "^2.2.0",
         "@alfalab/hooks": "^1.4.1",
         "@alfalab/icons-glyph": "^2.16.0",
         "@alfalab/utils": "^1.11.0",
-        "classnames": "^2.2.6"
+        "classnames": "^2.3.1"
     },
     "peerDependencies": {
-        "react": "^16.9.0 || ^17.0.1"
+        "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     }
 }

package/types.d.ts

@@ -72,6 +72,10 @@ type ConfirmationProps = {
      * Возввращает объект, где ключ - название экрана (screen), значение - компонент для экрана
      */
     getScreensMap?: (defaulScreensMap: ScreensMap) => ScreensMap;
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
 };
 type TConfirmationContext = Required<Pick<ConfirmationProps, 'alignContent' | 'texts' | 'state' | 'screen' | 'requiredCharAmount' | 'onInputFinished' | 'countdownDuration' | 'onChangeState' | 'onSmsRetryClick' | 'onChangeScreen' | 'onFatalErrorOkButtonClick' | 'tempBlockDuration'>> & Pick<ConfirmationProps, 'phone' | 'blockSmsRetry' | 'onTempBlockFinished'> & {
     timeLeft: number;