@alfalab/core-components 47.14.0-beta.0 → 47.14.0-beta.1

package/bank-card/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1b272 */
+/* hash: 1t4vq */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
@@ -22,11 +22,14 @@
     --gap-l: 20px; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 
     /* новые значения, используйте их */
+    --gap-4: var(--gap-2xs);
+    --gap-12: var(--gap-s);
+    --gap-20: var(--gap-l);
 } :root {
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
 } :root {
-} .bank-card__component_vapsn {
+} .bank-card__component_ra9zm {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -45,10 +48,10 @@
     max-width: 343px;
 
     font-family: var(--font-family-styrene);
-} .bank-card__aspectRatioContainer_vapsn {
+} .bank-card__aspectRatioContainer_ra9zm {
     /* Эталонный размер 343x216 */
     padding-bottom: 63%;
-} .bank-card__content_vapsn {
+} .bank-card__content_ra9zm {
     position: absolute;
     top: 0;
     right: 0;
@@ -56,30 +59,30 @@
     left: 0;
     display: flex;
     align-items: center;
-    padding-left: var(--gap-l);
-    padding-right: var(--gap-l);
+    padding-left: var(--gap-20);
+    padding-right: var(--gap-20);
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
-} .bank-card__label_vapsn {
+} .bank-card__label_ra9zm {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-light-text-secondary);
     font-size: 20px;
     line-height: 24px
-} @media (max-width: 360px) { .bank-card__label_vapsn {
+} @media (max-width: 360px) { .bank-card__label_ra9zm {
         font-size: 16px
 }
-    } .bank-card__focused_vapsn .bank-card__label_vapsn,
-.bank-card__filled_vapsn .bank-card__label_vapsn {
+    } .bank-card__focused_ra9zm .bank-card__label_ra9zm,
+.bank-card__filled_ra9zm .bank-card__label_ra9zm {
     color: var(--color-light-neutral-translucent-1300);
     transform: translateY(-19px) scale(0.6)
-} @media (max-width: 360px) { .bank-card__focused_vapsn .bank-card__label_vapsn,
-.bank-card__filled_vapsn .bank-card__label_vapsn {
+} @media (max-width: 360px) { .bank-card__focused_ra9zm .bank-card__label_ra9zm,
+.bank-card__filled_ra9zm .bank-card__label_ra9zm {
         transform: translateY(-22px) scale(0.75)
 }
-    } .bank-card__focused_vapsn:before {
+    } .bank-card__focused_ra9zm:before {
     transform: scale(1) !important;
-} .bank-card__input_vapsn {
+} .bank-card__input_ra9zm {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -91,28 +94,28 @@
 
     /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
     padding-left: 0 !important;
-    padding-bottom: var(--gap-2xs) !important
-} @media (max-width: 360px) { .bank-card__input_vapsn {
+    padding-bottom: var(--gap-4) !important
+} @media (max-width: 360px) { .bank-card__input_ra9zm {
         font-size: 16px
 }
-    } .bank-card__bankLogo_vapsn {
+    } .bank-card__bankLogo_ra9zm {
     position: absolute;
     top: 20px;
     left: 20px
-} .bank-card__bankLogo_vapsn svg {
+} .bank-card__bankLogo_ra9zm svg {
         max-height: 32px;
         width: auto;
         display: block
-    } .bank-card__bankLogo_vapsn svg g {
+    } .bank-card__bankLogo_ra9zm svg g {
             fill: var(--color-light-neutral-translucent-1300);
-        } .bank-card__brandLogo_vapsn {
+        } .bank-card__brandLogo_ra9zm {
     position: absolute;
     bottom: 20px;
     right: 20px
-} .bank-card__brandLogo_vapsn svg {
+} .bank-card__brandLogo_ra9zm svg {
         display: block;
         fill: var(--color-light-neutral-translucent-1300);
-    } .bank-card__usePhoto_vapsn {
+    } .bank-card__usePhoto_ra9zm {
     display: block;
     margin: 0;
     padding: 0;
@@ -124,12 +127,12 @@
             user-select: none;
     cursor: pointer;
     outline: none;
-    margin-bottom: var(--gap-2xs);
+    margin-bottom: var(--gap-4);
     align-self: flex-end;
 
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
-    margin-right: calc(var(--gap-s) * -1)
-} .bank-card__usePhoto_vapsn svg {
+    margin-right: calc(var(--gap-12) * -1)
+} .bank-card__usePhoto_ra9zm svg {
         fill: var(--color-light-neutral-translucent-1300);
         display: block;
     }

package/bank-card/moderncssm/Component.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent, MouseEvent, ReactNode } from "react";
+import { MaskType } from "./types";
+type BankCardProps = {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Цвет фона карты
+     */
+    backgroundColor?: string;
+    /**
+     * Иконка логотипа банка (размер L)
+     */
+    bankLogo?: ReactNode;
+    /**
+     * Лэйбл поля ввода
+     */
+    inputLabel?: string;
+    /**
+     * Значение поля ввода
+     */
+    value?: string;
+    /**
+     * Обработчик ввода
+     */
+    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
+        value: string;
+    }) => void;
+    /**
+     * Обработчик вызова камеры
+     */
+    onUsePhoto?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Тип вводимой маски. Позволяет устанавливать необходимый тип номера (номер карты или номер счёта)
+     * Если параметр не передавать - работает с обоими типами номеров
+     */
+    maskType?: MaskType;
+};
+declare const BankCard: React.ForwardRefExoticComponent<BankCardProps & React.RefAttributes<HTMLInputElement>>;
+export { BankCardProps, BankCard };

package/bank-card/moderncssm/Component.js

@@ -0,0 +1,68 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import cn from 'classnames';
+import { MaskedInput } from '../../masked-input/moderncssm';
+import { CameraMIcon } from '@alfalab/icons-glyph/CameraMIcon';
+import { AlfaBankLIcon } from '@alfalab/icons-logotype/AlfaBankLIcon';
+import { MastercardLIcon } from '@alfalab/icons-logotype/MastercardLIcon';
+import { MirXxlIcon } from '@alfalab/icons-logotype/MirXxlIcon';
+import { VisaXxlIcon } from '@alfalab/icons-logotype/VisaXxlIcon';
+import { getDefaultInputLabel } from './helpers/getDefaultInputLabel.js';
+import { MaskTypeEnum } from './enums.js';
+import { validateCardNumber } from './utils.js';
+import styles from './index.module.css';
+
+// prettier-ignore
+const cardMask = [/\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/];
+// prettier-ignore
+const accountNumberMask = [/\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/];
+const getBrandIcon = (value = '') => {
+    // Показываем логотип только после ввода всех цифр карты
+    if (value.replace(/\s/g, '').length === 16 && validateCardNumber(value)) {
+        if (value.startsWith('2'))
+            return React.createElement(MirXxlIcon, null);
+        if (value.startsWith('4'))
+            return React.createElement(VisaXxlIcon, null);
+        if (value.startsWith('5'))
+            return React.createElement(MastercardLIcon, null);
+        if (value.startsWith('6'))
+            return React.createElement(MastercardLIcon, null);
+    }
+    return null;
+};
+const BankCard = React.forwardRef(({ bankLogo = React.createElement(AlfaBankLIcon, null), backgroundColor = '#EF3124', value, className, onUsePhoto, onChange, dataTestId, maskType = MaskTypeEnum.Default, inputLabel = getDefaultInputLabel(maskType), }, ref) => {
+    const uncontrolled = value === undefined;
+    const [brandIcon, setBrandIcon] = useState(getBrandIcon(value));
+    const getMask = useCallback((newValue) => {
+        switch (maskType) {
+            case MaskTypeEnum.Card:
+                return cardMask;
+            case MaskTypeEnum.AccountNumber:
+                return accountNumberMask;
+            case MaskTypeEnum.Default:
+            default:
+                return newValue.length <= cardMask.length ? cardMask : accountNumberMask;
+        }
+    }, [maskType]);
+    const handleInputChange = useCallback((event, payload) => {
+        if (uncontrolled) {
+            setBrandIcon(getBrandIcon(event.target.value));
+        }
+        if (onChange) {
+            onChange(event, payload);
+        }
+    }, [onChange, uncontrolled]);
+    const renderRightAddons = useCallback(() => (React.createElement("button", { type: 'button', className: styles.usePhoto, onClick: onUsePhoto },
+        React.createElement(CameraMIcon, null))), [onUsePhoto]);
+    useEffect(() => {
+        setBrandIcon(getBrandIcon(value));
+    }, [value]);
+    return (React.createElement("div", { className: cn(styles.component, className) },
+        React.createElement("div", { className: styles.aspectRatioContainer },
+            React.createElement("div", { className: styles.content, style: { backgroundColor } },
+                React.createElement("div", { className: styles.bankLogo }, bankLogo),
+                React.createElement(MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, size: 'm', rightAddons: renderRightAddons(), inputClassName: styles.input, labelClassName: styles.label, filledClassName: styles.filled, focusedClassName: styles.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*', breakpoint: 1 }),
+                brandIcon && React.createElement("div", { className: styles.brandLogo }, brandIcon)))));
+});
+BankCard.displayName = 'BankCard';
+
+export { BankCard };

package/bank-card/moderncssm/enums.d.ts

@@ -0,0 +1,6 @@
+declare enum MaskTypeEnum {
+    Card = "card",
+    AccountNumber = "account-number",
+    Default = "default"
+}
+export { MaskTypeEnum };

package/bank-card/moderncssm/enums.js

@@ -0,0 +1,8 @@
+var MaskTypeEnum;
+(function (MaskTypeEnum) {
+    MaskTypeEnum["Card"] = "card";
+    MaskTypeEnum["AccountNumber"] = "account-number";
+    MaskTypeEnum["Default"] = "default";
+})(MaskTypeEnum || (MaskTypeEnum = {}));
+
+export { MaskTypeEnum };

package/bank-card/moderncssm/helpers/getDefaultInputLabel.d.ts

@@ -0,0 +1,3 @@
+import { MaskType } from "../types";
+declare const getDefaultInputLabel: (maskType: MaskType) => "Номер карты" | "Номер счёта" | "Номер карты или счёта";
+export { getDefaultInputLabel };

package/bank-card/moderncssm/helpers/getDefaultInputLabel.js

@@ -0,0 +1,15 @@
+import { MaskTypeEnum } from '../enums.js';
+
+const getDefaultInputLabel = (maskType) => {
+    switch (maskType) {
+        case MaskTypeEnum.Card:
+            return 'Номер карты';
+        case MaskTypeEnum.AccountNumber:
+            return 'Номер счёта';
+        case MaskTypeEnum.Default:
+        default:
+            return 'Номер карты или счёта';
+    }
+};
+
+export { getDefaultInputLabel };

package/bank-card/moderncssm/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/bank-card/moderncssm/index.js

@@ -0,0 +1,13 @@
+export { BankCard } from './Component.js';
+import 'react';
+import 'classnames';
+import '../../masked-input/moderncssm';
+import '@alfalab/icons-glyph/CameraMIcon';
+import '@alfalab/icons-logotype/AlfaBankLIcon';
+import '@alfalab/icons-logotype/MastercardLIcon';
+import '@alfalab/icons-logotype/MirXxlIcon';
+import '@alfalab/icons-logotype/VisaXxlIcon';
+import './helpers/getDefaultInputLabel.js';
+import './enums.js';
+import './utils.js';
+import './index.module.css';

package/bank-card/moderncssm/index.module.css

@@ -0,0 +1,147 @@
+/* */
+
+.component {
+    /* TODO: как это будет собираться и работать в webView */
+    --form-control-border-radius: 0;
+    --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
+    --form-control-bg-color: transparent;
+
+    /* focus */
+    --form-control-focus-border-bottom: 1px solid var(--color-light-neutral-translucent-1300);
+    --form-control-focus-shadow: transparent;
+
+    /* hover */
+    --form-control-hover-bg-color: transparent;
+    --form-control-focus-bg-color: transparent;
+    --form-control-font-family: var(--font-family-styrene);
+
+    position: relative;
+    max-width: 343px;
+
+    font-family: var(--font-family-styrene);
+}
+
+.aspectRatioContainer {
+    /* Эталонный размер 343x216 */
+    padding-bottom: 63%;
+}
+
+.content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    padding-left: var(--gap-20);
+    padding-right: var(--gap-20);
+    border-radius: var(--border-radius-l);
+    box-sizing: border-box;
+}
+
+.label {
+    left: 0;
+    transform: translateY(-1px);
+    color: var(--color-light-text-secondary);
+    font-size: 20px;
+    line-height: 24px
+}
+
+@media (max-width: 360px) {
+
+.label {
+        font-size: 16px
+}
+    }
+
+.focused .label,
+.filled .label {
+    color: var(--color-light-neutral-translucent-1300);
+    transform: translateY(-19px) scale(0.6)
+}
+
+@media (max-width: 360px) {
+
+.focused .label,
+.filled .label {
+        transform: translateY(-22px) scale(0.75)
+}
+    }
+
+.focused:before {
+    transform: scale(1) !important;
+}
+
+.input {
+    font-size: 20px;
+    line-height: 24px;
+    font-weight: 400;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
+
+    color: var(--color-light-neutral-translucent-1300);
+    caret-color: var(--color-light-neutral-translucent-1300);
+
+    /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
+    padding-left: 0 !important;
+    padding-bottom: var(--gap-4) !important
+}
+
+@media (max-width: 360px) {
+
+.input {
+        font-size: 16px
+}
+    }
+
+.bankLogo {
+    position: absolute;
+    top: 20px;
+    left: 20px
+}
+
+.bankLogo svg {
+        max-height: 32px;
+        width: auto;
+        display: block
+    }
+
+.bankLogo svg g {
+            fill: var(--color-light-neutral-translucent-1300);
+        }
+
+.brandLogo {
+    position: absolute;
+    bottom: 20px;
+    right: 20px
+}
+
+.brandLogo svg {
+        display: block;
+        fill: var(--color-light-neutral-translucent-1300);
+    }
+
+.usePhoto {
+    display: block;
+    margin: 0;
+    padding: 0;
+    text-decoration: none;
+    background-color: transparent;
+    border: 0;
+    box-shadow: none;
+    -webkit-user-select: none;
+            user-select: none;
+    cursor: pointer;
+    outline: none;
+    margin-bottom: var(--gap-4);
+    align-self: flex-end;
+
+    /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
+    margin-right: calc(var(--gap-12) * -1)
+}
+
+.usePhoto svg {
+        fill: var(--color-light-neutral-translucent-1300);
+        display: block;
+    }

package/bank-card/moderncssm/types.d.ts

@@ -0,0 +1,2 @@
+type MaskType = 'default' | 'card' | 'account-number';
+export { MaskType };

package/bank-card/moderncssm/types.js

@@ -0,0 +1 @@
+

package/bank-card/moderncssm/utils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Проверяет номер карты по алгоритму Луна
+ *
+ * @param cardNumber - номер карты
+ *
+ */
+declare function validateCardNumber(cardNumber: string): boolean;
+export { validateCardNumber };

package/bank-card/moderncssm/utils.js

@@ -0,0 +1,25 @@
+/**
+ * Проверяет номер карты по алгоритму Луна
+ *
+ * @param cardNumber - номер карты
+ *
+ */
+function validateCardNumber(cardNumber) {
+    const digits = cardNumber.replace(/\s+/g, '');
+    let sum = 0;
+    for (let i = 0; i < digits.length; i++) {
+        let cardNum = parseInt(digits[i], 10);
+        if (cardNum > 9)
+            return false;
+        if ((digits.length - i) % 2 === 0) {
+            cardNum *= 2;
+            if (cardNum > 9) {
+                cardNum -= 9;
+            }
+        }
+        sum += cardNum;
+    }
+    return sum % 10 === 0;
+}
+
+export { validateCardNumber };

package/base-modal/Component.js

@@ -23,7 +23,7 @@ var FocusLock__default = /*#__PURE__*/_interopDefaultCompat(FocusLock);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"base-modal__component_6d4yu","wrapper":"base-modal__wrapper_6d4yu","content":"base-modal__content_6d4yu","hidden":"base-modal__hidden_6d4yu","backdrop":"base-modal__backdrop_6d4yu","appear":"base-modal__appear_6d4yu","enter":"base-modal__enter_6d4yu","appearActive":"base-modal__appearActive_6d4yu","enterActive":"base-modal__enterActive_6d4yu","exit":"base-modal__exit_6d4yu","exitActive":"base-modal__exitActive_6d4yu","exitDone":"base-modal__exitDone_6d4yu"};
+var styles = {"component":"base-modal__component_1084l","wrapper":"base-modal__wrapper_1084l","content":"base-modal__content_1084l","hidden":"base-modal__hidden_1084l","backdrop":"base-modal__backdrop_1084l","appear":"base-modal__appear_1084l","enter":"base-modal__enter_1084l","appearActive":"base-modal__appearActive_1084l","enterActive":"base-modal__enterActive_1084l","exit":"base-modal__exit_1084l","exitActive":"base-modal__exitActive_1084l","exitDone":"base-modal__exitDone_1084l"};
 require('./index.css');
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare

package/base-modal/esm/Component.js

@@ -15,7 +15,7 @@ import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerS
 import './matches-polyfill.js';
 import '../../global-store/esm';
 
-var styles = {"component":"base-modal__component_6d4yu","wrapper":"base-modal__wrapper_6d4yu","content":"base-modal__content_6d4yu","hidden":"base-modal__hidden_6d4yu","backdrop":"base-modal__backdrop_6d4yu","appear":"base-modal__appear_6d4yu","enter":"base-modal__enter_6d4yu","appearActive":"base-modal__appearActive_6d4yu","enterActive":"base-modal__enterActive_6d4yu","exit":"base-modal__exit_6d4yu","exitActive":"base-modal__exitActive_6d4yu","exitDone":"base-modal__exitDone_6d4yu"};
+var styles = {"component":"base-modal__component_1084l","wrapper":"base-modal__wrapper_1084l","content":"base-modal__content_1084l","hidden":"base-modal__hidden_1084l","backdrop":"base-modal__backdrop_1084l","appear":"base-modal__appear_1084l","enter":"base-modal__enter_1084l","appearActive":"base-modal__appearActive_1084l","enterActive":"base-modal__enterActive_1084l","exit":"base-modal__exit_1084l","exitActive":"base-modal__exitActive_1084l","exitDone":"base-modal__exitDone_1084l"};
 require('./index.css');
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare

package/base-modal/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: ezvyr */
+/* hash: 1tee4 */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-modal-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -25,13 +25,13 @@
     margin-top: calc(var(--window-inner-scrollY) * -1);
     position: fixed;
     overflow: hidden;
-} .base-modal__component_6d4yu {
+} .base-modal__component_1084l {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-modal-bg-primary);
     margin: auto;
     flex-shrink: 0;
-} .base-modal__wrapper_6d4yu {
+} .base-modal__wrapper_1084l {
     position: fixed;
     top: 0;
     left: 0;
@@ -44,27 +44,27 @@
     align-items: center;
     outline: 0;
     overscroll-behavior: none;
-} .base-modal__content_6d4yu {
+} .base-modal__content_1084l {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
-} .base-modal__hidden_6d4yu {
+} .base-modal__hidden_1084l {
     display: none;
-} .base-modal__backdrop_6d4yu {
+} .base-modal__backdrop_1084l {
     z-index: 0;
-} .base-modal__appear_6d4yu,
-.base-modal__enter_6d4yu {
+} .base-modal__appear_1084l,
+.base-modal__enter_1084l {
     opacity: 0;
-} .base-modal__appearActive_6d4yu,
-.base-modal__enterActive_6d4yu {
+} .base-modal__appearActive_1084l,
+.base-modal__enterActive_1084l {
     opacity: 1;
     transition: opacity 200ms ease-in;
-} .base-modal__exit_6d4yu {
+} .base-modal__exit_1084l {
     opacity: 1;
-} .base-modal__exitActive_6d4yu,
-.base-modal__exitDone_6d4yu {
+} .base-modal__exitActive_1084l,
+.base-modal__exitDone_1084l {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }