@alfalab/core-components-confirmation 13.1.6 → 13.1.7

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

@@ -1,4 +1,4 @@
-/* hash: 11son */
+/* hash: 1rc05 */
 :root {
 } /* deprecated */ :root {
     --color-light-text-primary: #0e0e0e;
@@ -37,49 +37,49 @@
     --confirmation-text-color: var(--color-light-text-primary)
 
     /* header */
-} .confirmation__component_yvw20 {
+} .confirmation__component_1wv7u {
     display: flex;
     flex-direction: column;
-} .confirmation__typographyTheme_yvw20.confirmation__typographyTheme_yvw20 {
+} .confirmation__typographyTheme_1wv7u.confirmation__typographyTheme_1wv7u {
     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__phone_yvw20.confirmation__phone_yvw20 {
+} .confirmation__phone_1wv7u.confirmation__phone_1wv7u {
     color: var(--color-light-text-primary);
     margin-bottom: var(--gap-2xl);
-} .confirmation__compact_yvw20 {
+} .confirmation__compact_1wv7u {
     margin-bottom: var(--gap-xl);
-} .confirmation__loaderWrap_yvw20 {
+} .confirmation__loaderWrap_1wv7u {
     display: flex;
     align-items: center;
-} .confirmation__left_yvw20 {
+} .confirmation__left_1wv7u {
     align-items: flex-start;
-} .confirmation__center_yvw20 {
+} .confirmation__center_1wv7u {
     align-items: center;
     text-align: center
-} .confirmation__center_yvw20 .confirmation__loaderWrap_yvw20 {
+} .confirmation__center_1wv7u .confirmation__loaderWrap_1wv7u {
         justify-content: center;
-    } .confirmation__codeInput_yvw20 {
+    } .confirmation__codeInput_1wv7u {
     margin-bottom: var(--gap-s);
-} .confirmation__smsComeLink_yvw20.confirmation__smsComeLink_yvw20 {
+} .confirmation__smsComeLink_1wv7u.confirmation__smsComeLink_1wv7u {
     font-size: 14px;
     line-height: 20px;
     font-weight: 500;
-} .confirmation__countdownContainer_yvw20.confirmation__countdownContainer_yvw20 {
+} .confirmation__countdownContainer_1wv7u.confirmation__countdownContainer_1wv7u {
     color: var(--color-light-text-secondary);
     margin-bottom: var(--gap-xl);
-} .confirmation__countdownMobile_yvw20.confirmation__countdownMobile_yvw20 {
+} .confirmation__countdownMobile_1wv7u.confirmation__countdownMobile_1wv7u {
     margin-bottom: var(--gap-l);
-} .confirmation__countdownLoaderMobile_yvw20.confirmation__countdownLoaderMobile_yvw20 {
+} .confirmation__countdownLoaderMobile_1wv7u.confirmation__countdownLoaderMobile_1wv7u {
     margin-bottom: var(--gap-m);
-} .confirmation__getCodeButton_yvw20 {
+} .confirmation__getCodeButton_1wv7u {
     position: relative;
     top: var(--gap-2xs-neg);
     margin-bottom: var(--gap-m);
-} .confirmation__getCodeButtonMobile_yvw20 {
+} .confirmation__getCodeButtonMobile_1wv7u {
     margin-bottom: 0;
-} .confirmation__containerInput_yvw20 {
+} .confirmation__containerInput_1wv7u {
     min-height: 80px;
 }

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

@@ -10,6 +10,6 @@ import '@alfalab/hooks';
 import '../../../context.js';
 import '../../../utils.js';
 import '../../header/component.js';
-import '../../../countdown-section-f9d36879.js';
+import '../../../countdown-section-ffce9cdb.js';
 import '@alfalab/core-components-button/modern';
 import '@alfalab/core-components-spinner/modern';

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

@@ -6,7 +6,7 @@ import { useCountdown, formatMsAsMinutes } from '../../../utils.js';
 import { CountdownLoader } from '../../countdown-loader/component.js';
 import { Header } from '../../header/component.js';
 
-const styles = {"component":"confirmation__component_raowx","center":"confirmation__center_raowx","typographyTheme":"confirmation__typographyTheme_raowx","description":"confirmation__description_raowx","countdownWrap":"confirmation__countdownWrap_raowx","loader":"confirmation__loader_raowx"};
+const styles = {"component":"confirmation__component_tqagl","center":"confirmation__center_tqagl","typographyTheme":"confirmation__typographyTheme_tqagl","description":"confirmation__description_tqagl","countdownWrap":"confirmation__countdownWrap_tqagl","loader":"confirmation__loader_tqagl"};
 require('./index.css')
 
 const TempBlock = ({ mobile }) => {

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

@@ -1,4 +1,4 @@
-/* hash: lzohn */
+/* hash: 7xfg2 */
 :root {
 } /* deprecated */ :root {
     --color-light-text-primary: #0e0e0e; /* 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 */
@@ -31,23 +31,23 @@
     --confirmation-text-color: var(--color-light-text-primary)
 
     /* header */
-} .confirmation__component_raowx {
+} .confirmation__component_tqagl {
     display: flex;
     flex-direction: column;
-} .confirmation__center_raowx {
+} .confirmation__center_tqagl {
     align-items: center;
     text-align: center;
-} .confirmation__typographyTheme_raowx.confirmation__typographyTheme_raowx {
+} .confirmation__typographyTheme_tqagl.confirmation__typographyTheme_tqagl {
     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__description_raowx.confirmation__description_raowx {
+} .confirmation__description_tqagl.confirmation__description_tqagl {
     margin-bottom: var(--gap-xs);
-} .confirmation__countdownWrap_raowx {
+} .confirmation__countdownWrap_tqagl {
     display: flex;
     align-items: center;
-} .confirmation__loader_raowx {
+} .confirmation__loader_tqagl {
     margin-right: var(--gap-xs);
 }

package/modern/{countdown-section-f9d36879.js → countdown-section-ffce9cdb.js}

@@ -6,7 +6,7 @@ import { Typography } from '@alfalab/core-components-typography/modern';
 import { ConfirmationContext } from './context.js';
 import { formatMsAsMinutes } from './utils.js';
 
-const styles = {"component":"confirmation__component_yvw20","typographyTheme":"confirmation__typographyTheme_yvw20","phone":"confirmation__phone_yvw20","compact":"confirmation__compact_yvw20","loaderWrap":"confirmation__loaderWrap_yvw20","left":"confirmation__left_yvw20","center":"confirmation__center_yvw20","codeInput":"confirmation__codeInput_yvw20","smsComeLink":"confirmation__smsComeLink_yvw20","countdownContainer":"confirmation__countdownContainer_yvw20","countdownMobile":"confirmation__countdownMobile_yvw20","countdownLoaderMobile":"confirmation__countdownLoaderMobile_yvw20","getCodeButton":"confirmation__getCodeButton_yvw20","getCodeButtonMobile":"confirmation__getCodeButtonMobile_yvw20","containerInput":"confirmation__containerInput_yvw20"};
+const styles = {"component":"confirmation__component_1wv7u","typographyTheme":"confirmation__typographyTheme_1wv7u","phone":"confirmation__phone_1wv7u","compact":"confirmation__compact_1wv7u","loaderWrap":"confirmation__loaderWrap_1wv7u","left":"confirmation__left_1wv7u","center":"confirmation__center_1wv7u","codeInput":"confirmation__codeInput_1wv7u","smsComeLink":"confirmation__smsComeLink_1wv7u","countdownContainer":"confirmation__countdownContainer_1wv7u","countdownMobile":"confirmation__countdownMobile_1wv7u","countdownLoaderMobile":"confirmation__countdownLoaderMobile_1wv7u","getCodeButton":"confirmation__getCodeButton_1wv7u","getCodeButtonMobile":"confirmation__getCodeButtonMobile_1wv7u","containerInput":"confirmation__containerInput_1wv7u"};
 require('./components/screens/initial/index.css')
 
 const CountdownSection = ({ codeSendHintVisible, timePassed, processing, mobile, handleSmsRetryClick, }) => {

package/modern/desktop.js

@@ -13,7 +13,7 @@ import '@alfalab/core-components-code-input/modern/mobile';
 import '@alfalab/core-components-link/modern';
 import '@alfalab/core-components-typography/modern';
 import './components/header/component.js';
-import './countdown-section-f9d36879.js';
+import './countdown-section-ffce9cdb.js';
 import '@alfalab/core-components-button/modern';
 import '@alfalab/core-components-spinner/modern';
 import './components/screens/hint/component.js';

package/modern/index.js

@@ -15,7 +15,7 @@ import '@alfalab/core-components-code-input/modern/mobile';
 import '@alfalab/core-components-link/modern';
 import '@alfalab/core-components-typography/modern';
 import './components/header/component.js';
-import './countdown-section-f9d36879.js';
+import './countdown-section-ffce9cdb.js';
 import '@alfalab/core-components-button/modern';
 import '@alfalab/core-components-spinner/modern';
 import './components/screens/hint/component.js';

package/modern/mobile.css

@@ -1,4 +1,4 @@
-/* hash: 1emgt */
-.confirmation__container_18e25 {
+/* hash: 54o9q */
+.confirmation__container_7c9vx {
     max-width: 288px;
 }

package/modern/mobile.js

@@ -13,7 +13,7 @@ import '@alfalab/core-components-code-input/modern/mobile';
 import '@alfalab/core-components-link/modern';
 import '@alfalab/core-components-typography/modern';
 import './components/header/component.js';
-import './countdown-section-f9d36879.js';
+import './countdown-section-ffce9cdb.js';
 import '@alfalab/core-components-button/modern';
 import '@alfalab/core-components-spinner/modern';
 import './components/screens/hint/component.js';

package/modern/shared.js

@@ -15,6 +15,6 @@ import '@alfalab/core-components-link/modern';
 import '@alfalab/core-components-typography/modern';
 import '@alfalab/hooks';
 import './components/header/component.js';
-import './countdown-section-f9d36879.js';
+import './countdown-section-ffce9cdb.js';
 import '@alfalab/core-components-button/modern';
 import '@alfalab/core-components-spinner/modern';

package/modern/typings-89f0cb07.d.ts

@@ -0,0 +1,93 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type ComponentProps = {
+    /**
+     * Тип кнопки
+     * @default secondary
+     */
+    view?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Размер компонента
+     * @default m
+     */
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    /**
+     * Растягивает компонент на ширину контейнера
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
+    /**
+     * Выводит ссылку в виде кнопки
+     */
+    href?: string;
+    /**
+     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
+     */
+    Component?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Не переносить текст кнопки на новую строку
+     * @default false
+     */
+    nowrap?: boolean;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+};
+type PrivateButtonProps = {
+    /**
+     * Основные стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap: StyleColors;
+};
+type CommonButtonProps = ComponentProps & Partial<AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>>;
+type ButtonProps = CommonButtonProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+export { StyleColors, ComponentProps, PrivateButtonProps, CommonButtonProps, ButtonProps };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-confirmation",
-    "version": "13.1.6",
+    "version": "13.1.7",
     "description": "Sms confirmation component",
     "keywords": [],
     "license": "MIT",
@@ -35,7 +35,7 @@
         "directory": "dist"
     },
     "dependencies": {
-        "@alfalab/core-components-button": "^9.0.5",
+        "@alfalab/core-components-button": "^9.0.6",
         "@alfalab/core-components-code-input": "^3.0.1",
         "@alfalab/core-components-link": "^5.1.0",
         "@alfalab/core-components-spinner": "^3.1.0",

package/shared.js

@@ -19,7 +19,7 @@ require('@alfalab/core-components-link');
 require('@alfalab/core-components-typography');
 require('@alfalab/hooks');
 require('./components/header/component.js');
-require('./countdown-section-a349a8ff.js');
+require('./countdown-section-a7437221.js');
 require('@alfalab/core-components-button');
 require('@alfalab/core-components-spinner');
 

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

@@ -42,7 +42,7 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
             <div className={styles.phonesWrap}>
                 <div className={cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile })}>
                     <Link href='tel:+78002000000' underline={false} className={styles.phoneLink}>
-                        8 800 200-00-00
+                        8 800 200 00 00
                     </Link>
                     <Typography.Text
                         view='primary-medium'
@@ -57,7 +57,7 @@ export const Hint: FC<HintProps> = ({ mobile }) => {
 
                 <div className={cn(styles.phoneWrap, { [styles.phoneContentMobile]: mobile })}>
                     <Link href='tel:+74957888878' underline={false} className={styles.phoneLink}>
-                        +7 495 78-888-78
+                        +7 495 78 888 78
                     </Link>
                     <Typography.Text
                         view='primary-medium'

package/src/vars.css

@@ -8,9 +8,9 @@
     --confirmation-header-desktop-font-family: var(--font-family-system);
 
     /* mobile */
-    --confirmation-header-mobile-font-size: 18px;
-    --confirmation-header-mobile-line-height: 22px;
-    --confirmation-header-mobile-font-weight: bold;
+    --confirmation-header-mobile-font-size: 20px;
+    --confirmation-header-mobile-line-height: 28px;
+    --confirmation-header-mobile-font-weight: 600;
     --confirmation-header-mobile-font-family: var(--font-family-system);
 
     /* text */

package/typings-89f0cb07.d.ts

@@ -0,0 +1,93 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+type StyleColors = {
+    default: {
+        [key: string]: string;
+    };
+    inverted: {
+        [key: string]: string;
+    };
+};
+type ComponentProps = {
+    /**
+     * Тип кнопки
+     * @default secondary
+     */
+    view?: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'outlined' | 'filled' | 'transparent' | 'link' | 'ghost';
+    /**
+     * Слот слева
+     */
+    leftAddons?: ReactNode;
+    /**
+     * Слот справа
+     */
+    rightAddons?: ReactNode;
+    /**
+     * Размер компонента
+     * @default m
+     */
+    size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    /**
+     * Растягивает компонент на ширину контейнера
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
+    /**
+     * Выводит ссылку в виде кнопки
+     */
+    href?: string;
+    /**
+     * Позволяет использовать кастомный компонент для кнопки (например Link из роутера)
+     */
+    Component?: ElementType;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Показать лоадер
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Не переносить текст кнопки на новую строку
+     * @default false
+     */
+    nowrap?: boolean;
+    /**
+     * Набор цветов для компонента
+     */
+    colors?: 'default' | 'inverted';
+    /**
+     * Дочерние элементы.
+     */
+    children?: ReactNode;
+};
+type PrivateButtonProps = {
+    /**
+     * Основные стили компонента.
+     */
+    styles: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap: StyleColors;
+};
+type CommonButtonProps = ComponentProps & Partial<AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>>;
+type ButtonProps = CommonButtonProps & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+export { StyleColors, ComponentProps, PrivateButtonProps, CommonButtonProps, ButtonProps };