@alfalab/core-components 23.12.0 → 25.0.0

package/confirmation/modern/index.js

@@ -1,15 +1,17 @@
 import 'react';
 import 'classnames';
-import '@alfalab/utils';
 import '@alfalab/hooks';
-import '@alfalab/icons-glyph';
-import '../../button/modern';
+export { ONE_DAY, ONE_MINUTE, formatMsAsMinutes, useConfirmation, useCountdown } from './utils.js';
+export { ConfirmationContext } from './context.js';
+export { defaultTexts } from './types.js';
+import '../../code-input/modern';
 import '../../link/modern';
-export { CountdownLoader } from './components/countdown-loader/component.js';
-export { Countdown, formatMsAsMinutes } from './components/countdown/component.js';
 import '../../loader/modern';
-import './components/code-input/utils.js';
-import './components/code-input/component.js';
-export { SignConfirmation } from './components/sign-confirmation/component.js';
-export { Overlimit } from './components/overlimit/component.js';
+import '../../button/modern';
+import './countdown-section-8624eb4e.js';
+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';
+export { CountdownLoader } from './components/countdown-loader/component.js';
+export { TempBlock } from './components/screens/temp-block/component.js';
 export { Confirmation } from './component.js';

package/confirmation/modern/types.d.ts

@@ -0,0 +1,130 @@
+import { ComponentType, ReactNode } from 'react';
+type ConfirmationProps = {
+    /**
+     * Экран компонента
+     */
+    screen: ConfirmationScreen | string;
+    /**
+     * Состояние компонента
+     */
+    state: ConfirmationState | string;
+    /**
+     * Позиционирование контента
+     */
+    alignContent?: 'left' | 'center';
+    /**
+     * Объект с текстами
+     */
+    texts?: ConfirmationTexts;
+    /**
+     * Количество символов, которое можно ввести в поле ввода подписания до того, как произойдет автоотправка
+     */
+    requiredCharAmount?: number;
+    /**
+     * Длительность обратного отсчета на кнопке повторного запроса сообщения, в милисекундах
+     */
+    countdownDuration?: number;
+    /**
+     * Продолжительность блокировки формы (ms)
+     */
+    tempBlockDuration?: number;
+    /**
+     * Номер телефона, на который отправлен код
+     */
+    phone?: string;
+    /**
+     * Не осталось попыток ввода кода
+     */
+    blockSmsRetry?: boolean;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Сss класс для стилизации общей обёртки
+     */
+    className?: string;
+    /**
+     * Функция обновления состояния компонента
+     */
+    onChangeState: (state: ConfirmationState | string) => void;
+    /**
+     * Функция обновления состояния компонента
+     */
+    onChangeScreen: (state: ConfirmationScreen | string) => void;
+    /**
+     * Обработчик события завершения ввода кода подписания
+     */
+    onInputFinished: (code: string) => void;
+    /**
+     * Обработчик события нажатия на кнопку "Запросить код"
+     */
+    onSmsRetryClick: () => void;
+    /**
+     * Клик по кнопке "Понятно" на экране фатальной ошибки
+     */
+    onFatalErrorOkButtonClick?: () => void;
+    /**
+     * Временная блокировка формы закончилась
+     */
+    onTempBlockFinished?: () => void;
+    /**
+     * Возввращает объект, где ключ - название экрана (screen), значение - компонент для экрана
+     */
+    getScreensMap?: (defaulScreensMap: ScreensMap) => ScreensMap;
+};
+type TConfirmationContext = Required<Pick<ConfirmationProps, 'alignContent' | 'texts' | 'state' | 'screen' | 'requiredCharAmount' | 'onInputFinished' | 'countdownDuration' | 'onChangeState' | 'onSmsRetryClick' | 'onChangeScreen' | 'onFatalErrorOkButtonClick' | 'tempBlockDuration'>> & Pick<ConfirmationProps, 'phone' | 'blockSmsRetry' | 'onTempBlockFinished'> & {
+    timeLeft: number;
+};
+type ConfirmationTexts = {
+    /**
+     * Экран INITIAL
+     */
+    title?: ReactNode;
+    codeError?: string;
+    codeChecking?: string;
+    codeSending?: string;
+    codeSended?: string;
+    buttonRetry?: string;
+    linkToHint?: string;
+    noAttemptsLeft?: string;
+    countdown?: string;
+    /**
+     * Экран HINT
+     */
+    hintButton?: string;
+    /**
+     * Экран FATAL_ERROR
+     */
+    fatalErrorTitle?: ReactNode;
+    fatalErrorDescription?: ReactNode;
+    fatalErrorButton?: string;
+    /**
+     * Экран TEMP_BLOCK
+     */
+    tempBlockTitle?: ReactNode;
+    tempBlockDescription?: ReactNode;
+};
+type ConfirmationScreen = 'INITIAL' | 'HINT' | 'FATAL_ERROR' | 'TEMP_BLOCK';
+type ConfirmationState = 'INITIAL' | 'CODE_CHECKING' | 'CODE_SENDING' | 'CODE_ERROR';
+type ScreensMap = {
+    [key: string]: ComponentType;
+};
+declare const defaultTexts: {
+    title: string;
+    codeError: string;
+    codeChecking: string;
+    codeSending: string;
+    buttonRetry: string;
+    linkToHint: string;
+    hintButton: string;
+    noAttemptsLeft: string;
+    fatalErrorTitle: string;
+    fatalErrorDescription: string;
+    fatalErrorButton: string;
+    tempBlockTitle: string;
+    tempBlockDescription: string;
+    codeSended: string;
+    countdown: string;
+};
+export { ConfirmationProps, TConfirmationContext, ConfirmationTexts, ConfirmationScreen, ConfirmationState, ScreensMap, defaultTexts };

package/confirmation/modern/types.js

@@ -0,0 +1,19 @@
+const defaultTexts = {
+    title: 'Введите код из\xa0сообщения',
+    codeError: 'Код введён неверно',
+    codeChecking: '',
+    codeSending: '',
+    buttonRetry: 'Запросить код повторно',
+    linkToHint: 'Не\xa0приходит сообщение?',
+    hintButton: 'Вернуться к\xa0вводу кода',
+    noAttemptsLeft: 'Не\xa0осталось попыток запроса кода',
+    fatalErrorTitle: 'Ввести код больше нельзя',
+    fatalErrorDescription: 'Вы\xa0ввели код неверно более 5\xa0раз. В\xa0целях безопасности мы\xa0ограничили дальнейший ввод.',
+    fatalErrorButton: 'Понятно',
+    tempBlockTitle: 'Превышено количество попыток запроса кода',
+    tempBlockDescription: 'Повторное подтверждение кодом будет возможно через 24\xa0часа',
+    codeSended: 'Код выслан',
+    countdown: 'Запросить повторно можно через',
+};
+
+export { defaultTexts };

package/confirmation/modern/utils.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { ConfirmationProps } from "./types";
+/**
+ * Форматирование миллисекунд в hh:mm:ss.
+ *
+ * @param {Number} ms миллисекунды
+ * @returns {String} время в формате mm:ss
+ */
+declare function formatMsAsMinutes(ms: number): string;
+type UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];
+/**
+ * Возвращает время, которое осталось до истечения таймера в ms
+ */
+declare const useCountdown: UseCountdown;
+declare const ONE_DAY: number;
+declare const ONE_MINUTE: number;
+type UseConfirmationParams = {
+    state?: ConfirmationProps['state'];
+    screen?: ConfirmationProps['screen'];
+    blockSmsRetry?: ConfirmationProps['blockSmsRetry'];
+};
+declare const useConfirmation: ({ state, screen, blockSmsRetry }?: UseConfirmationParams) => {
+    confirmationState: string;
+    confirmationScreen: string;
+    confirmationBlockSmsRetry: boolean;
+    setConfirmationState: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setConfirmationScreen: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setConfirmationBlockSmsRetry: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+export { formatMsAsMinutes, useCountdown, ONE_DAY, ONE_MINUTE, useConfirmation };

package/confirmation/modern/utils.js

@@ -0,0 +1,74 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+
+/**
+ * Форматирование миллисекунд в hh:mm:ss.
+ *
+ * @param {Number} ms миллисекунды
+ * @returns {String} время в формате mm:ss
+ */
+function formatMsAsMinutes(ms) {
+    const totalSeconds = Math.ceil(ms / 1000);
+    const totalMinutes = Math.floor(totalSeconds / 60);
+    const totalHours = Math.floor(totalMinutes / 60);
+    const seconds = totalSeconds % 60;
+    const paddedSeconds = `00${seconds}`.slice(-2);
+    if (totalHours > 0) {
+        const minutes = totalMinutes % 60;
+        const paddedMinutes = `00${minutes}`.slice(-2);
+        const paddedHours = `00${totalHours}`.slice(-2);
+        return `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;
+    }
+    const paddedMinutes = `00${totalMinutes}`.slice(-2);
+    return `${paddedMinutes}:${paddedSeconds}`;
+}
+/**
+ * Возвращает время, которое осталось до истечения таймера в ms
+ */
+const useCountdown = (countdownDuration, tick = 1000) => {
+    const timerId = useRef(0);
+    const start = useRef(0);
+    const [timePassed, setTimePassed] = useState(0);
+    const stopTimer = useCallback(() => {
+        window.clearInterval(timerId.current);
+    }, []);
+    const updateProgress = useCallback(() => {
+        const passed = Date.now() - start.current;
+        if (passed >= countdownDuration) {
+            stopTimer();
+            setTimePassed(countdownDuration);
+        }
+        else {
+            setTimePassed(passed);
+        }
+    }, [countdownDuration, stopTimer]);
+    const startTimer = useCallback(() => {
+        stopTimer();
+        start.current = Date.now();
+        updateProgress();
+        timerId.current = window.setInterval(updateProgress, tick);
+    }, [stopTimer, updateProgress, tick]);
+    const timeLeft = countdownDuration - timePassed;
+    useEffect(() => {
+        return () => {
+            stopTimer();
+        };
+    }, [stopTimer]);
+    return [timeLeft, startTimer, stopTimer];
+};
+const ONE_DAY = 24 * 60 * 60 * 1000;
+const ONE_MINUTE = 60 * 1000;
+const useConfirmation = ({ state, screen, blockSmsRetry } = {}) => {
+    const [confirmationState, setConfirmationState] = useState(state ?? 'INITIAL');
+    const [confirmationScreen, setConfirmationScreen] = useState(screen ?? 'INITIAL');
+    const [confirmationBlockSmsRetry, setConfirmationBlockSmsRetry] = useState(blockSmsRetry ?? false);
+    return {
+        confirmationState,
+        confirmationScreen,
+        confirmationBlockSmsRetry,
+        setConfirmationState,
+        setConfirmationScreen,
+        setConfirmationBlockSmsRetry,
+    };
+};
+
+export { ONE_DAY, ONE_MINUTE, formatMsAsMinutes, useConfirmation, useCountdown };

package/confirmation/types.d.ts

@@ -0,0 +1,130 @@
+import { ComponentType, ReactNode } from 'react';
+type ConfirmationProps = {
+    /**
+     * Экран компонента
+     */
+    screen: ConfirmationScreen | string;
+    /**
+     * Состояние компонента
+     */
+    state: ConfirmationState | string;
+    /**
+     * Позиционирование контента
+     */
+    alignContent?: 'left' | 'center';
+    /**
+     * Объект с текстами
+     */
+    texts?: ConfirmationTexts;
+    /**
+     * Количество символов, которое можно ввести в поле ввода подписания до того, как произойдет автоотправка
+     */
+    requiredCharAmount?: number;
+    /**
+     * Длительность обратного отсчета на кнопке повторного запроса сообщения, в милисекундах
+     */
+    countdownDuration?: number;
+    /**
+     * Продолжительность блокировки формы (ms)
+     */
+    tempBlockDuration?: number;
+    /**
+     * Номер телефона, на который отправлен код
+     */
+    phone?: string;
+    /**
+     * Не осталось попыток ввода кода
+     */
+    blockSmsRetry?: boolean;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Сss класс для стилизации общей обёртки
+     */
+    className?: string;
+    /**
+     * Функция обновления состояния компонента
+     */
+    onChangeState: (state: ConfirmationState | string) => void;
+    /**
+     * Функция обновления состояния компонента
+     */
+    onChangeScreen: (state: ConfirmationScreen | string) => void;
+    /**
+     * Обработчик события завершения ввода кода подписания
+     */
+    onInputFinished: (code: string) => void;
+    /**
+     * Обработчик события нажатия на кнопку "Запросить код"
+     */
+    onSmsRetryClick: () => void;
+    /**
+     * Клик по кнопке "Понятно" на экране фатальной ошибки
+     */
+    onFatalErrorOkButtonClick?: () => void;
+    /**
+     * Временная блокировка формы закончилась
+     */
+    onTempBlockFinished?: () => void;
+    /**
+     * Возввращает объект, где ключ - название экрана (screen), значение - компонент для экрана
+     */
+    getScreensMap?: (defaulScreensMap: ScreensMap) => ScreensMap;
+};
+type TConfirmationContext = Required<Pick<ConfirmationProps, 'alignContent' | 'texts' | 'state' | 'screen' | 'requiredCharAmount' | 'onInputFinished' | 'countdownDuration' | 'onChangeState' | 'onSmsRetryClick' | 'onChangeScreen' | 'onFatalErrorOkButtonClick' | 'tempBlockDuration'>> & Pick<ConfirmationProps, 'phone' | 'blockSmsRetry' | 'onTempBlockFinished'> & {
+    timeLeft: number;
+};
+type ConfirmationTexts = {
+    /**
+     * Экран INITIAL
+     */
+    title?: ReactNode;
+    codeError?: string;
+    codeChecking?: string;
+    codeSending?: string;
+    codeSended?: string;
+    buttonRetry?: string;
+    linkToHint?: string;
+    noAttemptsLeft?: string;
+    countdown?: string;
+    /**
+     * Экран HINT
+     */
+    hintButton?: string;
+    /**
+     * Экран FATAL_ERROR
+     */
+    fatalErrorTitle?: ReactNode;
+    fatalErrorDescription?: ReactNode;
+    fatalErrorButton?: string;
+    /**
+     * Экран TEMP_BLOCK
+     */
+    tempBlockTitle?: ReactNode;
+    tempBlockDescription?: ReactNode;
+};
+type ConfirmationScreen = 'INITIAL' | 'HINT' | 'FATAL_ERROR' | 'TEMP_BLOCK';
+type ConfirmationState = 'INITIAL' | 'CODE_CHECKING' | 'CODE_SENDING' | 'CODE_ERROR';
+type ScreensMap = {
+    [key: string]: ComponentType;
+};
+declare const defaultTexts: {
+    title: string;
+    codeError: string;
+    codeChecking: string;
+    codeSending: string;
+    buttonRetry: string;
+    linkToHint: string;
+    hintButton: string;
+    noAttemptsLeft: string;
+    fatalErrorTitle: string;
+    fatalErrorDescription: string;
+    fatalErrorButton: string;
+    tempBlockTitle: string;
+    tempBlockDescription: string;
+    codeSended: string;
+    countdown: string;
+};
+export { ConfirmationProps, TConfirmationContext, ConfirmationTexts, ConfirmationScreen, ConfirmationState, ScreensMap, defaultTexts };

package/confirmation/types.js

@@ -0,0 +1,21 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var defaultTexts = {
+    title: 'Введите код из\xa0сообщения',
+    codeError: 'Код введён неверно',
+    codeChecking: '',
+    codeSending: '',
+    buttonRetry: 'Запросить код повторно',
+    linkToHint: 'Не\xa0приходит сообщение?',
+    hintButton: 'Вернуться к\xa0вводу кода',
+    noAttemptsLeft: 'Не\xa0осталось попыток запроса кода',
+    fatalErrorTitle: 'Ввести код больше нельзя',
+    fatalErrorDescription: 'Вы\xa0ввели код неверно более 5\xa0раз. В\xa0целях безопасности мы\xa0ограничили дальнейший ввод.',
+    fatalErrorButton: 'Понятно',
+    tempBlockTitle: 'Превышено количество попыток запроса кода',
+    tempBlockDescription: 'Повторное подтверждение кодом будет возможно через 24\xa0часа',
+    codeSended: 'Код выслан',
+    countdown: 'Запросить повторно можно через',
+};
+
+exports.defaultTexts = defaultTexts;

package/confirmation/utils.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { ConfirmationProps } from "./types";
+/**
+ * Форматирование миллисекунд в hh:mm:ss.
+ *
+ * @param {Number} ms миллисекунды
+ * @returns {String} время в формате mm:ss
+ */
+declare function formatMsAsMinutes(ms: number): string;
+type UseCountdown = (countdownDuration: number, tick?: number) => [number, () => void, () => void];
+/**
+ * Возвращает время, которое осталось до истечения таймера в ms
+ */
+declare const useCountdown: UseCountdown;
+declare const ONE_DAY: number;
+declare const ONE_MINUTE: number;
+type UseConfirmationParams = {
+    state?: ConfirmationProps['state'];
+    screen?: ConfirmationProps['screen'];
+    blockSmsRetry?: ConfirmationProps['blockSmsRetry'];
+};
+declare const useConfirmation: ({ state, screen, blockSmsRetry }?: UseConfirmationParams) => {
+    confirmationState: string;
+    confirmationScreen: string;
+    confirmationBlockSmsRetry: boolean;
+    setConfirmationState: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setConfirmationScreen: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setConfirmationBlockSmsRetry: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+export { formatMsAsMinutes, useCountdown, ONE_DAY, ONE_MINUTE, useConfirmation };

package/confirmation/utils.js

@@ -0,0 +1,82 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/**
+ * Форматирование миллисекунд в hh:mm:ss.
+ *
+ * @param {Number} ms миллисекунды
+ * @returns {String} время в формате mm:ss
+ */
+function formatMsAsMinutes(ms) {
+    var totalSeconds = Math.ceil(ms / 1000);
+    var totalMinutes = Math.floor(totalSeconds / 60);
+    var totalHours = Math.floor(totalMinutes / 60);
+    var seconds = totalSeconds % 60;
+    var paddedSeconds = ("00" + seconds).slice(-2);
+    if (totalHours > 0) {
+        var minutes = totalMinutes % 60;
+        var paddedMinutes_1 = ("00" + minutes).slice(-2);
+        var paddedHours = ("00" + totalHours).slice(-2);
+        return paddedHours + ":" + paddedMinutes_1 + ":" + paddedSeconds;
+    }
+    var paddedMinutes = ("00" + totalMinutes).slice(-2);
+    return paddedMinutes + ":" + paddedSeconds;
+}
+/**
+ * Возвращает время, которое осталось до истечения таймера в ms
+ */
+var useCountdown = function (countdownDuration, tick) {
+    if (tick === void 0) { tick = 1000; }
+    var timerId = React.useRef(0);
+    var start = React.useRef(0);
+    var _a = React.useState(0), timePassed = _a[0], setTimePassed = _a[1];
+    var stopTimer = React.useCallback(function () {
+        window.clearInterval(timerId.current);
+    }, []);
+    var updateProgress = React.useCallback(function () {
+        var passed = Date.now() - start.current;
+        if (passed >= countdownDuration) {
+            stopTimer();
+            setTimePassed(countdownDuration);
+        }
+        else {
+            setTimePassed(passed);
+        }
+    }, [countdownDuration, stopTimer]);
+    var startTimer = React.useCallback(function () {
+        stopTimer();
+        start.current = Date.now();
+        updateProgress();
+        timerId.current = window.setInterval(updateProgress, tick);
+    }, [stopTimer, updateProgress, tick]);
+    var timeLeft = countdownDuration - timePassed;
+    React.useEffect(function () {
+        return function () {
+            stopTimer();
+        };
+    }, [stopTimer]);
+    return [timeLeft, startTimer, stopTimer];
+};
+var ONE_DAY = 24 * 60 * 60 * 1000;
+var ONE_MINUTE = 60 * 1000;
+var useConfirmation = function (_a) {
+    var _b = _a === void 0 ? {} : _a, state = _b.state, screen = _b.screen, blockSmsRetry = _b.blockSmsRetry;
+    var _c = React.useState(state !== null && state !== void 0 ? state : 'INITIAL'), confirmationState = _c[0], setConfirmationState = _c[1];
+    var _d = React.useState(screen !== null && screen !== void 0 ? screen : 'INITIAL'), confirmationScreen = _d[0], setConfirmationScreen = _d[1];
+    var _e = React.useState(blockSmsRetry !== null && blockSmsRetry !== void 0 ? blockSmsRetry : false), confirmationBlockSmsRetry = _e[0], setConfirmationBlockSmsRetry = _e[1];
+    return {
+        confirmationState: confirmationState,
+        confirmationScreen: confirmationScreen,
+        confirmationBlockSmsRetry: confirmationBlockSmsRetry,
+        setConfirmationState: setConfirmationState,
+        setConfirmationScreen: setConfirmationScreen,
+        setConfirmationBlockSmsRetry: setConfirmationBlockSmsRetry,
+    };
+};
+
+exports.ONE_DAY = ONE_DAY;
+exports.ONE_MINUTE = ONE_MINUTE;
+exports.formatMsAsMinutes = formatMsAsMinutes;
+exports.useConfirmation = useConfirmation;
+exports.useCountdown = useCountdown;

package/custom-button/Component.js

@@ -48,7 +48,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"customButton":"custom-button__customButton_14f7f","white":"custom-button__white_14f7f","black":"custom-button__black_14f7f","customLoading":"custom-button__customLoading_14f7f"};
+var styles = {"customButton":"custom-button__customButton_1endj","white":"custom-button__white_1endj","black":"custom-button__black_1endj","customLoading":"custom-button__customLoading_1endj"};
 require('./index.css');
 
 var DEFAULT_BUTTON_COLOR = '#FF45C3';

package/custom-button/esm/Component.js

@@ -41,7 +41,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"customButton":"custom-button__customButton_14f7f","white":"custom-button__white_14f7f","black":"custom-button__black_14f7f","customLoading":"custom-button__customLoading_14f7f"};
+var styles = {"customButton":"custom-button__customButton_1endj","white":"custom-button__white_1endj","black":"custom-button__black_1endj","customLoading":"custom-button__customLoading_1endj"};
 require('./index.css');
 
 var DEFAULT_BUTTON_COLOR = '#FF45C3';

package/custom-button/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1acon */
+/* hash: 1g829 */
 :root {
     --color-static-text-primary-dark: #0b1f35;
     --color-static-text-primary-light: #fff;
@@ -11,21 +11,21 @@
 
     /* Hard up */
 }
-.custom-button__customButton_14f7f {
+.custom-button__customButton_1endj {
     overflow: hidden;
     position: relative
 }
-.custom-button__customButton_14f7f.custom-button__white_14f7f * {
+.custom-button__customButton_1endj.custom-button__white_1endj * {
         color: var(--color-static-text-primary-light);
     }
-.custom-button__customButton_14f7f.custom-button__black_14f7f * {
+.custom-button__customButton_1endj.custom-button__black_1endj * {
         color: var(--color-static-text-primary-dark);
     }
-.custom-button__customButton_14f7f span {
+.custom-button__customButton_1endj span {
         position: relative;
         z-index: 3;
     }
-.custom-button__customButton_14f7f:before {
+.custom-button__customButton_1endj:before {
         position: absolute;
         left: 0;
         right: 0;
@@ -37,22 +37,22 @@
         opacity: 1;
         pointer-events: none;
     }
-.custom-button__customButton_14f7f:hover:before {
+.custom-button__customButton_1endj:hover:before {
         background-color: rgba(0, 0, 0, 0.07);
     }
-.custom-button__customButton_14f7f:active:before {
+.custom-button__customButton_1endj:active:before {
         background-color: rgba(0, 0, 0, 0.15);
     }
 /* Disabled */
-.custom-button__customButton_14f7f:disabled {
+.custom-button__customButton_1endj:disabled {
     opacity: 0.3
 }
-.custom-button__customButton_14f7f:disabled.custom-button__customLoading_14f7f {
+.custom-button__customButton_1endj:disabled.custom-button__customLoading_1endj {
         opacity: 1;
     }
-.custom-button__customButton_14f7f:disabled.custom-button__white_14f7f * {
+.custom-button__customButton_1endj:disabled.custom-button__white_1endj * {
         color: var(--color-static-text-primary-light);
     }
-.custom-button__customButton_14f7f:disabled.custom-button__black_14f7f * {
+.custom-button__customButton_1endj:disabled.custom-button__black_1endj * {
         color: var(--color-static-text-primary-dark);
     }