@alfalab/core-components 46.0.0-beta.1 → 46.0.0-beta.3

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
 import { ChangeEvent, MouseEvent, ReactNode } from "react";
+import { MaskType } from "./types";
 type BankCardProps = {
     /**
      * Дополнительный класс
@@ -36,6 +37,11 @@ type BankCardProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Тип вводимой маски. Позволяет устанавливать необходимый тип номера (номер карты или номер счёта)
+     * Если параметр не передавать - работает с обоими типами номеров
+     */
+    maskType?: MaskType;
 };
 declare const BankCard: React.ForwardRefExoticComponent<BankCardProps & React.RefAttributes<HTMLInputElement>>;
 export { BankCardProps, BankCard };

package/bank-card/esm/Component.js

@@ -6,9 +6,11 @@ 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';
 
-var styles = {"component":"bank-card__component_k6v85","aspectRatioContainer":"bank-card__aspectRatioContainer_k6v85","content":"bank-card__content_k6v85","label":"bank-card__label_k6v85","focused":"bank-card__focused_k6v85","filled":"bank-card__filled_k6v85","input":"bank-card__input_k6v85","bankLogo":"bank-card__bankLogo_k6v85","brandLogo":"bank-card__brandLogo_k6v85","usePhoto":"bank-card__usePhoto_k6v85"};
+var styles = {"component":"bank-card__component_1wl4h","aspectRatioContainer":"bank-card__aspectRatioContainer_1wl4h","content":"bank-card__content_1wl4h","label":"bank-card__label_1wl4h","focused":"bank-card__focused_1wl4h","filled":"bank-card__filled_1wl4h","input":"bank-card__input_1wl4h","bankLogo":"bank-card__bankLogo_1wl4h","brandLogo":"bank-card__brandLogo_1wl4h","usePhoto":"bank-card__usePhoto_1wl4h"};
 require('./index.css');
 
 // prettier-ignore
@@ -31,12 +33,20 @@ var getBrandIcon = function (value) {
     return null;
 };
 var BankCard = React.forwardRef(function (_a, ref) {
-    var _b = _a.bankLogo, bankLogo = _b === void 0 ? React.createElement(AlfaBankLIcon, null) : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#EF3124' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Номер карты или счёта' : _d, value = _a.value, className = _a.className, onUsePhoto = _a.onUsePhoto, onChange = _a.onChange, dataTestId = _a.dataTestId;
+    var _b = _a.bankLogo, bankLogo = _b === void 0 ? React.createElement(AlfaBankLIcon, null) : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#EF3124' : _c, value = _a.value, className = _a.className, onUsePhoto = _a.onUsePhoto, onChange = _a.onChange, dataTestId = _a.dataTestId, _d = _a.maskType, maskType = _d === void 0 ? MaskTypeEnum.Default : _d, _e = _a.inputLabel, inputLabel = _e === void 0 ? getDefaultInputLabel(maskType) : _e;
     var uncontrolled = value === undefined;
-    var _e = useState(getBrandIcon(value)), brandIcon = _e[0], setBrandIcon = _e[1];
+    var _f = useState(getBrandIcon(value)), brandIcon = _f[0], setBrandIcon = _f[1];
     var getMask = useCallback(function (newValue) {
-        return newValue.length <= cardMask.length ? cardMask : accountNumberMask;
-    }, []);
+        switch (maskType) {
+            case MaskTypeEnum.Card:
+                return cardMask;
+            case MaskTypeEnum.AccountNumber:
+                return accountNumberMask;
+            case MaskTypeEnum.Default:
+            default:
+                return newValue.length <= cardMask.length ? cardMask : accountNumberMask;
+        }
+    }, [maskType]);
     var handleInputChange = useCallback(function (event, payload) {
         if (uncontrolled) {
             setBrandIcon(getBrandIcon(event.target.value));
@@ -57,10 +67,5 @@ var BankCard = React.forwardRef(function (_a, ref) {
                 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.defaultProps = {
-    bankLogo: React.createElement(AlfaBankLIcon, null),
-    backgroundColor: '#EF3124',
-    inputLabel: 'Номер карты или счёта',
-};
 
 export { BankCard };

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

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

package/bank-card/esm/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/esm/helpers/getDefaultInputLabel.d.ts

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

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

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

package/bank-card/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 11twg */
+/* hash: 3w844 */
 :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-1500: #121213;
@@ -22,7 +22,7 @@
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
 } :root {
-} .bank-card__component_k6v85 {
+} .bank-card__component_1wl4h {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -41,10 +41,10 @@
     max-width: 343px;
 
     font-family: var(--font-family-styrene);
-} .bank-card__aspectRatioContainer_k6v85 {
+} .bank-card__aspectRatioContainer_1wl4h {
     /* Эталонный размер 343x216 */
     padding-bottom: 63%;
-} .bank-card__content_k6v85 {
+} .bank-card__content_1wl4h {
     position: absolute;
     top: 0;
     right: 0;
@@ -56,26 +56,26 @@
     padding-right: var(--gap-l);
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
-} .bank-card__label_k6v85 {
+} .bank-card__label_1wl4h {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-light-text-secondary);
     font-size: 20px;
     line-height: 24px
-} @media (max-width: 360px) { .bank-card__label_k6v85 {
+} @media (max-width: 360px) { .bank-card__label_1wl4h {
         font-size: 16px
 }
-    } .bank-card__focused_k6v85 .bank-card__label_k6v85,
-.bank-card__filled_k6v85 .bank-card__label_k6v85 {
+    } .bank-card__focused_1wl4h .bank-card__label_1wl4h,
+.bank-card__filled_1wl4h .bank-card__label_1wl4h {
     color: var(--color-light-neutral-1500);
     transform: translateY(-19px) scale(0.6)
-} @media (max-width: 360px) { .bank-card__focused_k6v85 .bank-card__label_k6v85,
-.bank-card__filled_k6v85 .bank-card__label_k6v85 {
+} @media (max-width: 360px) { .bank-card__focused_1wl4h .bank-card__label_1wl4h,
+.bank-card__filled_1wl4h .bank-card__label_1wl4h {
         transform: translateY(-22px) scale(0.75)
 }
-    } .bank-card__focused_k6v85:before {
+    } .bank-card__focused_1wl4h:before {
     transform: scale(1) !important;
-} .bank-card__input_k6v85 {
+} .bank-card__input_1wl4h {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -88,27 +88,27 @@
     /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
     padding-left: 0 !important;
     padding-bottom: var(--gap-2xs) !important
-} @media (max-width: 360px) { .bank-card__input_k6v85 {
+} @media (max-width: 360px) { .bank-card__input_1wl4h {
         font-size: 16px
 }
-    } .bank-card__bankLogo_k6v85 {
+    } .bank-card__bankLogo_1wl4h {
     position: absolute;
     top: 20px;
     left: 20px
-} .bank-card__bankLogo_k6v85 svg {
+} .bank-card__bankLogo_1wl4h svg {
         max-height: 32px;
         width: auto;
         display: block
-    } .bank-card__bankLogo_k6v85 svg g {
+    } .bank-card__bankLogo_1wl4h svg g {
             fill: var(--color-light-neutral-1500);
-        } .bank-card__brandLogo_k6v85 {
+        } .bank-card__brandLogo_1wl4h {
     position: absolute;
     bottom: 20px;
     right: 20px
-} .bank-card__brandLogo_k6v85 svg {
+} .bank-card__brandLogo_1wl4h svg {
         display: block;
         fill: var(--color-light-neutral-1500);
-    } .bank-card__usePhoto_k6v85 {
+    } .bank-card__usePhoto_1wl4h {
     display: block;
     margin: 0;
     padding: 0;
@@ -125,7 +125,7 @@
 
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
-} .bank-card__usePhoto_k6v85 svg {
+} .bank-card__usePhoto_1wl4h svg {
         fill: var(--color-light-neutral-1500);
         display: block;
     }

package/bank-card/esm/index.js

@@ -7,4 +7,6 @@ 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';

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

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

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

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

package/bank-card/helpers/getDefaultInputLabel.js

@@ -0,0 +1,17 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var enums = require('../enums.js');
+
+var getDefaultInputLabel = function (maskType) {
+    switch (maskType) {
+        case enums.MaskTypeEnum.Card:
+            return 'Номер карты';
+        case enums.MaskTypeEnum.AccountNumber:
+            return 'Номер счёта';
+        case enums.MaskTypeEnum.Default:
+        default:
+            return 'Номер карты или счёта';
+    }
+};
+
+exports.getDefaultInputLabel = getDefaultInputLabel;

package/bank-card/index.css

@@ -1,4 +1,4 @@
-/* hash: 11twg */
+/* hash: 3w844 */
 :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-1500: #121213;
@@ -22,7 +22,7 @@
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
 } :root {
-} .bank-card__component_k6v85 {
+} .bank-card__component_1wl4h {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -41,10 +41,10 @@
     max-width: 343px;
 
     font-family: var(--font-family-styrene);
-} .bank-card__aspectRatioContainer_k6v85 {
+} .bank-card__aspectRatioContainer_1wl4h {
     /* Эталонный размер 343x216 */
     padding-bottom: 63%;
-} .bank-card__content_k6v85 {
+} .bank-card__content_1wl4h {
     position: absolute;
     top: 0;
     right: 0;
@@ -56,26 +56,26 @@
     padding-right: var(--gap-l);
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
-} .bank-card__label_k6v85 {
+} .bank-card__label_1wl4h {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-light-text-secondary);
     font-size: 20px;
     line-height: 24px
-} @media (max-width: 360px) { .bank-card__label_k6v85 {
+} @media (max-width: 360px) { .bank-card__label_1wl4h {
         font-size: 16px
 }
-    } .bank-card__focused_k6v85 .bank-card__label_k6v85,
-.bank-card__filled_k6v85 .bank-card__label_k6v85 {
+    } .bank-card__focused_1wl4h .bank-card__label_1wl4h,
+.bank-card__filled_1wl4h .bank-card__label_1wl4h {
     color: var(--color-light-neutral-1500);
     transform: translateY(-19px) scale(0.6)
-} @media (max-width: 360px) { .bank-card__focused_k6v85 .bank-card__label_k6v85,
-.bank-card__filled_k6v85 .bank-card__label_k6v85 {
+} @media (max-width: 360px) { .bank-card__focused_1wl4h .bank-card__label_1wl4h,
+.bank-card__filled_1wl4h .bank-card__label_1wl4h {
         transform: translateY(-22px) scale(0.75)
 }
-    } .bank-card__focused_k6v85:before {
+    } .bank-card__focused_1wl4h:before {
     transform: scale(1) !important;
-} .bank-card__input_k6v85 {
+} .bank-card__input_1wl4h {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -88,27 +88,27 @@
     /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
     padding-left: 0 !important;
     padding-bottom: var(--gap-2xs) !important
-} @media (max-width: 360px) { .bank-card__input_k6v85 {
+} @media (max-width: 360px) { .bank-card__input_1wl4h {
         font-size: 16px
 }
-    } .bank-card__bankLogo_k6v85 {
+    } .bank-card__bankLogo_1wl4h {
     position: absolute;
     top: 20px;
     left: 20px
-} .bank-card__bankLogo_k6v85 svg {
+} .bank-card__bankLogo_1wl4h svg {
         max-height: 32px;
         width: auto;
         display: block
-    } .bank-card__bankLogo_k6v85 svg g {
+    } .bank-card__bankLogo_1wl4h svg g {
             fill: var(--color-light-neutral-1500);
-        } .bank-card__brandLogo_k6v85 {
+        } .bank-card__brandLogo_1wl4h {
     position: absolute;
     bottom: 20px;
     right: 20px
-} .bank-card__brandLogo_k6v85 svg {
+} .bank-card__brandLogo_1wl4h svg {
         display: block;
         fill: var(--color-light-neutral-1500);
-    } .bank-card__usePhoto_k6v85 {
+    } .bank-card__usePhoto_1wl4h {
     display: block;
     margin: 0;
     padding: 0;
@@ -125,7 +125,7 @@
 
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
-} .bank-card__usePhoto_k6v85 svg {
+} .bank-card__usePhoto_1wl4h svg {
         fill: var(--color-light-neutral-1500);
         display: block;
     }

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
 import { ChangeEvent, MouseEvent, ReactNode } from "react";
+import { MaskType } from "./types";
 type BankCardProps = {
     /**
      * Дополнительный класс
@@ -36,6 +37,11 @@ type BankCardProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+    /**
+     * Тип вводимой маски. Позволяет устанавливать необходимый тип номера (номер карты или номер счёта)
+     * Если параметр не передавать - работает с обоими типами номеров
+     */
+    maskType?: MaskType;
 };
 declare const BankCard: React.ForwardRefExoticComponent<BankCardProps & React.RefAttributes<HTMLInputElement>>;
 export { BankCardProps, BankCard };

package/bank-card/modern/Component.js

@@ -6,9 +6,11 @@ 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';
 
-const styles = {"component":"bank-card__component_k6v85","aspectRatioContainer":"bank-card__aspectRatioContainer_k6v85","content":"bank-card__content_k6v85","label":"bank-card__label_k6v85","focused":"bank-card__focused_k6v85","filled":"bank-card__filled_k6v85","input":"bank-card__input_k6v85","bankLogo":"bank-card__bankLogo_k6v85","brandLogo":"bank-card__brandLogo_k6v85","usePhoto":"bank-card__usePhoto_k6v85"};
+const styles = {"component":"bank-card__component_1wl4h","aspectRatioContainer":"bank-card__aspectRatioContainer_1wl4h","content":"bank-card__content_1wl4h","label":"bank-card__label_1wl4h","focused":"bank-card__focused_1wl4h","filled":"bank-card__filled_1wl4h","input":"bank-card__input_1wl4h","bankLogo":"bank-card__bankLogo_1wl4h","brandLogo":"bank-card__brandLogo_1wl4h","usePhoto":"bank-card__usePhoto_1wl4h"};
 require('./index.css');
 
 // prettier-ignore
@@ -29,10 +31,20 @@ const getBrandIcon = (value = '') => {
     }
     return null;
 };
-const BankCard = React.forwardRef(({ bankLogo = React.createElement(AlfaBankLIcon, null), backgroundColor = '#EF3124', inputLabel = 'Номер карты или счёта', value, className, onUsePhoto, onChange, dataTestId, }, ref) => {
+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) => newValue.length <= cardMask.length ? cardMask : accountNumberMask, []);
+    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));
@@ -53,10 +65,5 @@ const BankCard = React.forwardRef(({ bankLogo = React.createElement(AlfaBankLIco
                 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.defaultProps = {
-    bankLogo: React.createElement(AlfaBankLIcon, null),
-    backgroundColor: '#EF3124',
-    inputLabel: 'Номер карты или счёта',
-};
 
 export { BankCard };

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

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

package/bank-card/modern/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/modern/helpers/getDefaultInputLabel.d.ts

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

package/bank-card/modern/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/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 11twg */
+/* hash: 3w844 */
 :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-1500: #121213;
@@ -22,7 +22,7 @@
     --font-family-styrene: 'Styrene UI', system-ui, -apple-system, 'Segoe UI', Roboto,
         'Helvetica Neue', Helvetica, sans-serif;
 } :root {
-} .bank-card__component_k6v85 {
+} .bank-card__component_1wl4h {
     /* TODO: как это будет собираться и работать в webView */
     --form-control-border-radius: 0;
     --form-control-border-bottom: 1px solid var(--color-light-neutral-translucent-700);
@@ -41,10 +41,10 @@
     max-width: 343px;
 
     font-family: var(--font-family-styrene);
-} .bank-card__aspectRatioContainer_k6v85 {
+} .bank-card__aspectRatioContainer_1wl4h {
     /* Эталонный размер 343x216 */
     padding-bottom: 63%;
-} .bank-card__content_k6v85 {
+} .bank-card__content_1wl4h {
     position: absolute;
     top: 0;
     right: 0;
@@ -56,26 +56,26 @@
     padding-right: var(--gap-l);
     border-radius: var(--border-radius-l);
     box-sizing: border-box;
-} .bank-card__label_k6v85 {
+} .bank-card__label_1wl4h {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-light-text-secondary);
     font-size: 20px;
     line-height: 24px
-} @media (max-width: 360px) { .bank-card__label_k6v85 {
+} @media (max-width: 360px) { .bank-card__label_1wl4h {
         font-size: 16px
 }
-    } .bank-card__focused_k6v85 .bank-card__label_k6v85,
-.bank-card__filled_k6v85 .bank-card__label_k6v85 {
+    } .bank-card__focused_1wl4h .bank-card__label_1wl4h,
+.bank-card__filled_1wl4h .bank-card__label_1wl4h {
     color: var(--color-light-neutral-1500);
     transform: translateY(-19px) scale(0.6)
-} @media (max-width: 360px) { .bank-card__focused_k6v85 .bank-card__label_k6v85,
-.bank-card__filled_k6v85 .bank-card__label_k6v85 {
+} @media (max-width: 360px) { .bank-card__focused_1wl4h .bank-card__label_1wl4h,
+.bank-card__filled_1wl4h .bank-card__label_1wl4h {
         transform: translateY(-22px) scale(0.75)
 }
-    } .bank-card__focused_k6v85:before {
+    } .bank-card__focused_1wl4h:before {
     transform: scale(1) !important;
-} .bank-card__input_k6v85 {
+} .bank-card__input_1wl4h {
     font-size: 20px;
     line-height: 24px;
     font-weight: 400;
@@ -88,27 +88,27 @@
     /* TODO: обсудить с дизайнером, почему инпут не соответствует дизайн-системе, либо уменьшить каскад в form-control */
     padding-left: 0 !important;
     padding-bottom: var(--gap-2xs) !important
-} @media (max-width: 360px) { .bank-card__input_k6v85 {
+} @media (max-width: 360px) { .bank-card__input_1wl4h {
         font-size: 16px
 }
-    } .bank-card__bankLogo_k6v85 {
+    } .bank-card__bankLogo_1wl4h {
     position: absolute;
     top: 20px;
     left: 20px
-} .bank-card__bankLogo_k6v85 svg {
+} .bank-card__bankLogo_1wl4h svg {
         max-height: 32px;
         width: auto;
         display: block
-    } .bank-card__bankLogo_k6v85 svg g {
+    } .bank-card__bankLogo_1wl4h svg g {
             fill: var(--color-light-neutral-1500);
-        } .bank-card__brandLogo_k6v85 {
+        } .bank-card__brandLogo_1wl4h {
     position: absolute;
     bottom: 20px;
     right: 20px
-} .bank-card__brandLogo_k6v85 svg {
+} .bank-card__brandLogo_1wl4h svg {
         display: block;
         fill: var(--color-light-neutral-1500);
-    } .bank-card__usePhoto_k6v85 {
+    } .bank-card__usePhoto_1wl4h {
     display: block;
     margin: 0;
     padding: 0;
@@ -125,7 +125,7 @@
 
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
-} .bank-card__usePhoto_k6v85 svg {
+} .bank-card__usePhoto_1wl4h svg {
         fill: var(--color-light-neutral-1500);
         display: block;
     }

package/bank-card/modern/index.js

@@ -7,4 +7,6 @@ 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';

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

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

package/bank-card/types.d.ts

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

package/base-modal/Component.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 /// <reference types="react-transition-group" />
 import React from 'react';
-import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
+import { ComponentType, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
 import { TransitionProps } from 'react-transition-group/Transition';
 import { BackdropProps } from "../backdrop";
 import { PortalProps } from "../portal";
@@ -13,7 +13,7 @@ type BaseModalProps = {
     /**
      * Компонент бэкдропа
      */
-    Backdrop?: FC<BackdropProps>;
+    Backdrop?: ComponentType<BackdropProps>;
     /**
      * Свойства для Бэкдропа
      */
@@ -134,6 +134,10 @@ type BaseModalProps = {
      * Реф, который должен быть установлен компонентной области
      */
     componentRef?: MutableRefObject<HTMLDivElement | null>;
+    /**
+     * Блокирует скролл когда модальное окно открыто. Работает только на iOS.
+     */
+    iOSLock?: boolean;
 };
 type BaseModalContext = {
     parentRef: React.RefObject<HTMLDivElement>;