@alfalab/core-components-bank-card 5.6.8 → 5.7.0

package/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/Component.js

@@ -10,6 +10,8 @@ var AlfaBankLIcon = require('@alfalab/icons-logotype/AlfaBankLIcon');
 var MastercardLIcon = require('@alfalab/icons-logotype/MastercardLIcon');
 var MirXxlIcon = require('@alfalab/icons-logotype/MirXxlIcon');
 var VisaXxlIcon = require('@alfalab/icons-logotype/VisaXxlIcon');
+var helpers_getDefaultInputLabel = require('./helpers/getDefaultInputLabel.js');
+var enums = require('./enums.js');
 var utils = require('./utils.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -17,7 +19,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"bank-card__component_1bsc3","aspectRatioContainer":"bank-card__aspectRatioContainer_1bsc3","content":"bank-card__content_1bsc3","label":"bank-card__label_1bsc3","focused":"bank-card__focused_1bsc3","filled":"bank-card__filled_1bsc3","input":"bank-card__input_1bsc3","bankLogo":"bank-card__bankLogo_1bsc3","brandLogo":"bank-card__brandLogo_1bsc3","usePhoto":"bank-card__usePhoto_1bsc3"};
+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"};
 require('./index.css')
 
 // prettier-ignore
@@ -40,12 +42,20 @@ var getBrandIcon = function (value) {
     return null;
 };
 var BankCard = React__default.default.forwardRef(function (_a, ref) {
-    var _b = _a.bankLogo, bankLogo = _b === void 0 ? React__default.default.createElement(AlfaBankLIcon.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__default.default.createElement(AlfaBankLIcon.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 ? enums.MaskTypeEnum.Default : _d, _e = _a.inputLabel, inputLabel = _e === void 0 ? helpers_getDefaultInputLabel.getDefaultInputLabel(maskType) : _e;
     var uncontrolled = value === undefined;
-    var _e = React.useState(getBrandIcon(value)), brandIcon = _e[0], setBrandIcon = _e[1];
+    var _f = React.useState(getBrandIcon(value)), brandIcon = _f[0], setBrandIcon = _f[1];
     var getMask = React.useCallback(function (newValue) {
-        return newValue.length <= cardMask.length ? cardMask : accountNumberMask;
-    }, []);
+        switch (maskType) {
+            case enums.MaskTypeEnum.Card:
+                return cardMask;
+            case enums.MaskTypeEnum.AccountNumber:
+                return accountNumberMask;
+            case enums.MaskTypeEnum.Default:
+            default:
+                return newValue.length <= cardMask.length ? cardMask : accountNumberMask;
+        }
+    }, [maskType]);
     var handleInputChange = React.useCallback(function (event, payload) {
         if (uncontrolled) {
             setBrandIcon(getBrandIcon(event.target.value));
@@ -66,10 +76,5 @@ var BankCard = React__default.default.forwardRef(function (_a, ref) {
                 React__default.default.createElement(coreComponentsMaskedInput.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__default.default.createElement("div", { className: styles.brandLogo }, brandIcon)))));
 });
-BankCard.defaultProps = {
-    bankLogo: React__default.default.createElement(AlfaBankLIcon.AlfaBankLIcon, null),
-    backgroundColor: '#EF3124',
-    inputLabel: 'Номер карты или счёта',
-};
 
 exports.BankCard = BankCard;

package/cssm/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/cssm/Component.js

@@ -10,6 +10,8 @@ var AlfaBankLIcon = require('@alfalab/icons-logotype/AlfaBankLIcon');
 var MastercardLIcon = require('@alfalab/icons-logotype/MastercardLIcon');
 var MirXxlIcon = require('@alfalab/icons-logotype/MirXxlIcon');
 var VisaXxlIcon = require('@alfalab/icons-logotype/VisaXxlIcon');
+var helpers_getDefaultInputLabel = require('./helpers/getDefaultInputLabel.js');
+var enums = require('./enums.js');
 var utils = require('./utils.js');
 var styles = require('./index.module.css');
 
@@ -39,12 +41,20 @@ var getBrandIcon = function (value) {
     return null;
 };
 var BankCard = React__default.default.forwardRef(function (_a, ref) {
-    var _b = _a.bankLogo, bankLogo = _b === void 0 ? React__default.default.createElement(AlfaBankLIcon.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__default.default.createElement(AlfaBankLIcon.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 ? enums.MaskTypeEnum.Default : _d, _e = _a.inputLabel, inputLabel = _e === void 0 ? helpers_getDefaultInputLabel.getDefaultInputLabel(maskType) : _e;
     var uncontrolled = value === undefined;
-    var _e = React.useState(getBrandIcon(value)), brandIcon = _e[0], setBrandIcon = _e[1];
+    var _f = React.useState(getBrandIcon(value)), brandIcon = _f[0], setBrandIcon = _f[1];
     var getMask = React.useCallback(function (newValue) {
-        return newValue.length <= cardMask.length ? cardMask : accountNumberMask;
-    }, []);
+        switch (maskType) {
+            case enums.MaskTypeEnum.Card:
+                return cardMask;
+            case enums.MaskTypeEnum.AccountNumber:
+                return accountNumberMask;
+            case enums.MaskTypeEnum.Default:
+            default:
+                return newValue.length <= cardMask.length ? cardMask : accountNumberMask;
+        }
+    }, [maskType]);
     var handleInputChange = React.useCallback(function (event, payload) {
         if (uncontrolled) {
             setBrandIcon(getBrandIcon(event.target.value));
@@ -65,10 +75,5 @@ var BankCard = React__default.default.forwardRef(function (_a, ref) {
                 React__default.default.createElement(coreComponentsMaskedInput.MaskedInput, { ref: ref, value: value, mask: getMask, block: true, label: inputLabel, size: 'm', rightAddons: renderRightAddons(), inputClassName: styles__default.default.input, labelClassName: styles__default.default.label, filledClassName: styles__default.default.filled, focusedClassName: styles__default.default.focused, onChange: handleInputChange, dataTestId: dataTestId, inputMode: 'numeric', pattern: '[0-9]*', breakpoint: 1 }),
                 brandIcon && React__default.default.createElement("div", { className: styles__default.default.brandLogo }, brandIcon)))));
 });
-BankCard.defaultProps = {
-    bankLogo: React__default.default.createElement(AlfaBankLIcon.AlfaBankLIcon, null),
-    backgroundColor: '#EF3124',
-    inputLabel: 'Номер карты или счёта',
-};
 
 exports.BankCard = BankCard;

package/cssm/enums.d.ts

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

package/cssm/enums.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+exports.MaskTypeEnum = void 0;
+(function (MaskTypeEnum) {
+    MaskTypeEnum["Card"] = "card";
+    MaskTypeEnum["AccountNumber"] = "account-number";
+    MaskTypeEnum["Default"] = "default";
+})(exports.MaskTypeEnum || (exports.MaskTypeEnum = {}));

package/cssm/helpers/getDefaultInputLabel.d.ts

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

package/cssm/helpers/getDefaultInputLabel.js

@@ -0,0 +1,19 @@
+'use strict';
+
+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/cssm/types.d.ts

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

package/cssm/types.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/enums.d.ts

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

package/enums.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+exports.MaskTypeEnum = void 0;
+(function (MaskTypeEnum) {
+    MaskTypeEnum["Card"] = "card";
+    MaskTypeEnum["AccountNumber"] = "account-number";
+    MaskTypeEnum["Default"] = "default";
+})(exports.MaskTypeEnum || (exports.MaskTypeEnum = {}));

package/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/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_1bsc3","aspectRatioContainer":"bank-card__aspectRatioContainer_1bsc3","content":"bank-card__content_1bsc3","label":"bank-card__label_1bsc3","focused":"bank-card__focused_1bsc3","filled":"bank-card__filled_1bsc3","input":"bank-card__input_1bsc3","bankLogo":"bank-card__bankLogo_1bsc3","brandLogo":"bank-card__brandLogo_1bsc3","usePhoto":"bank-card__usePhoto_1bsc3"};
+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"};
 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/esm/enums.d.ts

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

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

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

package/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/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: oecsb */
+/* hash: 11twg */
 :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_1bsc3 {
+} .bank-card__component_k6v85 {
     /* 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_1bsc3 {
+} .bank-card__aspectRatioContainer_k6v85 {
     /* Эталонный размер 343x216 */
     padding-bottom: 63%;
-} .bank-card__content_1bsc3 {
+} .bank-card__content_k6v85 {
     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_1bsc3 {
+} .bank-card__label_k6v85 {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-light-text-secondary);
     font-size: 20px;
     line-height: 24px
-} @media (max-width: 360px) { .bank-card__label_1bsc3 {
+} @media (max-width: 360px) { .bank-card__label_k6v85 {
         font-size: 16px
 }
-    } .bank-card__focused_1bsc3 .bank-card__label_1bsc3,
-.bank-card__filled_1bsc3 .bank-card__label_1bsc3 {
+    } .bank-card__focused_k6v85 .bank-card__label_k6v85,
+.bank-card__filled_k6v85 .bank-card__label_k6v85 {
     color: var(--color-light-neutral-1500);
     transform: translateY(-19px) scale(0.6)
-} @media (max-width: 360px) { .bank-card__focused_1bsc3 .bank-card__label_1bsc3,
-.bank-card__filled_1bsc3 .bank-card__label_1bsc3 {
+} @media (max-width: 360px) { .bank-card__focused_k6v85 .bank-card__label_k6v85,
+.bank-card__filled_k6v85 .bank-card__label_k6v85 {
         transform: translateY(-22px) scale(0.75)
 }
-    } .bank-card__focused_1bsc3:before {
+    } .bank-card__focused_k6v85:before {
     transform: scale(1) !important;
-} .bank-card__input_1bsc3 {
+} .bank-card__input_k6v85 {
     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_1bsc3 {
+} @media (max-width: 360px) { .bank-card__input_k6v85 {
         font-size: 16px
 }
-    } .bank-card__bankLogo_1bsc3 {
+    } .bank-card__bankLogo_k6v85 {
     position: absolute;
     top: 20px;
     left: 20px
-} .bank-card__bankLogo_1bsc3 svg {
+} .bank-card__bankLogo_k6v85 svg {
         max-height: 32px;
         width: auto;
         display: block
-    } .bank-card__bankLogo_1bsc3 svg g {
+    } .bank-card__bankLogo_k6v85 svg g {
             fill: var(--color-light-neutral-1500);
-        } .bank-card__brandLogo_1bsc3 {
+        } .bank-card__brandLogo_k6v85 {
     position: absolute;
     bottom: 20px;
     right: 20px
-} .bank-card__brandLogo_1bsc3 svg {
+} .bank-card__brandLogo_k6v85 svg {
         display: block;
         fill: var(--color-light-neutral-1500);
-    } .bank-card__usePhoto_1bsc3 {
+    } .bank-card__usePhoto_k6v85 {
     display: block;
     margin: 0;
     padding: 0;
@@ -125,7 +125,7 @@
 
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
-} .bank-card__usePhoto_1bsc3 svg {
+} .bank-card__usePhoto_k6v85 svg {
         fill: var(--color-light-neutral-1500);
         display: block;
     }

package/esm/types.d.ts

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

package/esm/types.js

@@ -0,0 +1 @@
+

package/helpers/getDefaultInputLabel.d.ts

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

package/helpers/getDefaultInputLabel.js

@@ -0,0 +1,19 @@
+'use strict';
+
+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/index.css

@@ -1,4 +1,4 @@
-/* hash: oecsb */
+/* hash: 11twg */
 :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_1bsc3 {
+} .bank-card__component_k6v85 {
     /* 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_1bsc3 {
+} .bank-card__aspectRatioContainer_k6v85 {
     /* Эталонный размер 343x216 */
     padding-bottom: 63%;
-} .bank-card__content_1bsc3 {
+} .bank-card__content_k6v85 {
     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_1bsc3 {
+} .bank-card__label_k6v85 {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-light-text-secondary);
     font-size: 20px;
     line-height: 24px
-} @media (max-width: 360px) { .bank-card__label_1bsc3 {
+} @media (max-width: 360px) { .bank-card__label_k6v85 {
         font-size: 16px
 }
-    } .bank-card__focused_1bsc3 .bank-card__label_1bsc3,
-.bank-card__filled_1bsc3 .bank-card__label_1bsc3 {
+    } .bank-card__focused_k6v85 .bank-card__label_k6v85,
+.bank-card__filled_k6v85 .bank-card__label_k6v85 {
     color: var(--color-light-neutral-1500);
     transform: translateY(-19px) scale(0.6)
-} @media (max-width: 360px) { .bank-card__focused_1bsc3 .bank-card__label_1bsc3,
-.bank-card__filled_1bsc3 .bank-card__label_1bsc3 {
+} @media (max-width: 360px) { .bank-card__focused_k6v85 .bank-card__label_k6v85,
+.bank-card__filled_k6v85 .bank-card__label_k6v85 {
         transform: translateY(-22px) scale(0.75)
 }
-    } .bank-card__focused_1bsc3:before {
+    } .bank-card__focused_k6v85:before {
     transform: scale(1) !important;
-} .bank-card__input_1bsc3 {
+} .bank-card__input_k6v85 {
     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_1bsc3 {
+} @media (max-width: 360px) { .bank-card__input_k6v85 {
         font-size: 16px
 }
-    } .bank-card__bankLogo_1bsc3 {
+    } .bank-card__bankLogo_k6v85 {
     position: absolute;
     top: 20px;
     left: 20px
-} .bank-card__bankLogo_1bsc3 svg {
+} .bank-card__bankLogo_k6v85 svg {
         max-height: 32px;
         width: auto;
         display: block
-    } .bank-card__bankLogo_1bsc3 svg g {
+    } .bank-card__bankLogo_k6v85 svg g {
             fill: var(--color-light-neutral-1500);
-        } .bank-card__brandLogo_1bsc3 {
+        } .bank-card__brandLogo_k6v85 {
     position: absolute;
     bottom: 20px;
     right: 20px
-} .bank-card__brandLogo_1bsc3 svg {
+} .bank-card__brandLogo_k6v85 svg {
         display: block;
         fill: var(--color-light-neutral-1500);
-    } .bank-card__usePhoto_1bsc3 {
+    } .bank-card__usePhoto_k6v85 {
     display: block;
     margin: 0;
     padding: 0;
@@ -125,7 +125,7 @@
 
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
-} .bank-card__usePhoto_1bsc3 svg {
+} .bank-card__usePhoto_k6v85 svg {
         fill: var(--color-light-neutral-1500);
         display: block;
     }

package/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/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_1bsc3","aspectRatioContainer":"bank-card__aspectRatioContainer_1bsc3","content":"bank-card__content_1bsc3","label":"bank-card__label_1bsc3","focused":"bank-card__focused_1bsc3","filled":"bank-card__filled_1bsc3","input":"bank-card__input_1bsc3","bankLogo":"bank-card__bankLogo_1bsc3","brandLogo":"bank-card__brandLogo_1bsc3","usePhoto":"bank-card__usePhoto_1bsc3"};
+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"};
 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/modern/enums.d.ts

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

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

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

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

@@ -1,4 +1,4 @@
-/* hash: oecsb */
+/* hash: 11twg */
 :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_1bsc3 {
+} .bank-card__component_k6v85 {
     /* 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_1bsc3 {
+} .bank-card__aspectRatioContainer_k6v85 {
     /* Эталонный размер 343x216 */
     padding-bottom: 63%;
-} .bank-card__content_1bsc3 {
+} .bank-card__content_k6v85 {
     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_1bsc3 {
+} .bank-card__label_k6v85 {
     left: 0;
     transform: translateY(-1px);
     color: var(--color-light-text-secondary);
     font-size: 20px;
     line-height: 24px
-} @media (max-width: 360px) { .bank-card__label_1bsc3 {
+} @media (max-width: 360px) { .bank-card__label_k6v85 {
         font-size: 16px
 }
-    } .bank-card__focused_1bsc3 .bank-card__label_1bsc3,
-.bank-card__filled_1bsc3 .bank-card__label_1bsc3 {
+    } .bank-card__focused_k6v85 .bank-card__label_k6v85,
+.bank-card__filled_k6v85 .bank-card__label_k6v85 {
     color: var(--color-light-neutral-1500);
     transform: translateY(-19px) scale(0.6)
-} @media (max-width: 360px) { .bank-card__focused_1bsc3 .bank-card__label_1bsc3,
-.bank-card__filled_1bsc3 .bank-card__label_1bsc3 {
+} @media (max-width: 360px) { .bank-card__focused_k6v85 .bank-card__label_k6v85,
+.bank-card__filled_k6v85 .bank-card__label_k6v85 {
         transform: translateY(-22px) scale(0.75)
 }
-    } .bank-card__focused_1bsc3:before {
+    } .bank-card__focused_k6v85:before {
     transform: scale(1) !important;
-} .bank-card__input_1bsc3 {
+} .bank-card__input_k6v85 {
     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_1bsc3 {
+} @media (max-width: 360px) { .bank-card__input_k6v85 {
         font-size: 16px
 }
-    } .bank-card__bankLogo_1bsc3 {
+    } .bank-card__bankLogo_k6v85 {
     position: absolute;
     top: 20px;
     left: 20px
-} .bank-card__bankLogo_1bsc3 svg {
+} .bank-card__bankLogo_k6v85 svg {
         max-height: 32px;
         width: auto;
         display: block
-    } .bank-card__bankLogo_1bsc3 svg g {
+    } .bank-card__bankLogo_k6v85 svg g {
             fill: var(--color-light-neutral-1500);
-        } .bank-card__brandLogo_1bsc3 {
+        } .bank-card__brandLogo_k6v85 {
     position: absolute;
     bottom: 20px;
     right: 20px
-} .bank-card__brandLogo_1bsc3 svg {
+} .bank-card__brandLogo_k6v85 svg {
         display: block;
         fill: var(--color-light-neutral-1500);
-    } .bank-card__usePhoto_1bsc3 {
+    } .bank-card__usePhoto_k6v85 {
     display: block;
     margin: 0;
     padding: 0;
@@ -125,7 +125,7 @@
 
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */
     margin-right: calc(var(--gap-s) * -1)
-} .bank-card__usePhoto_1bsc3 svg {
+} .bank-card__usePhoto_k6v85 svg {
         fill: var(--color-light-neutral-1500);
         display: block;
     }

package/modern/types.d.ts

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

package/modern/types.js

@@ -0,0 +1 @@
+

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-bank-card",
-    "version": "5.6.8",
+    "version": "5.7.0",
     "description": "Bank card component",
     "keywords": [],
     "license": "MIT",
@@ -15,7 +15,7 @@
         "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-masked-input": "^6.3.4",
+        "@alfalab/core-components-masked-input": "^6.3.5",
         "@alfalab/icons-glyph": "^2.139.0",
         "@alfalab/icons-logotype": "^2.27.0",
         "classnames": "^2.3.1",

package/src/Component.tsx

@@ -8,6 +8,9 @@ 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';
+import { MaskTypeEnum } from './enums';
+import { MaskType } from './types';
 import { validateCardNumber } from './utils';
 
 import styles from './index.module.css';
@@ -52,6 +55,12 @@ export type BankCardProps = {
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+
+    /**
+     * Тип вводимой маски. Позволяет устанавливать необходимый тип номера (номер карты или номер счёта)
+     * Если параметр не передавать - работает с обоими типами номеров
+     */
+    maskType?: MaskType;
 };
 
 // prettier-ignore
@@ -76,12 +85,13 @@ export const BankCard = React.forwardRef<HTMLInputElement, BankCardProps>(
         {
             bankLogo = <AlfaBankLIcon />,
             backgroundColor = '#EF3124',
-            inputLabel = 'Номер карты или счёта',
             value,
             className,
             onUsePhoto,
             onChange,
             dataTestId,
+            maskType = MaskTypeEnum.Default,
+            inputLabel = getDefaultInputLabel(maskType),
         },
         ref,
     ) => {
@@ -90,9 +100,18 @@ export const BankCard = React.forwardRef<HTMLInputElement, BankCardProps>(
         const [brandIcon, setBrandIcon] = useState<ReactNode>(getBrandIcon(value));
 
         const getMask = useCallback(
-            (newValue: string) =>
-                newValue.length <= cardMask.length ? cardMask : accountNumberMask,
-            [],
+            (newValue: string) => {
+                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(
@@ -153,9 +172,3 @@ export const BankCard = React.forwardRef<HTMLInputElement, BankCardProps>(
         );
     },
 );
-
-BankCard.defaultProps = {
-    bankLogo: <AlfaBankLIcon />,
-    backgroundColor: '#EF3124',
-    inputLabel: 'Номер карты или счёта',
-};

package/src/enums.ts

@@ -0,0 +1,5 @@
+export enum MaskTypeEnum {
+    Card = 'card',
+    AccountNumber = 'account-number',
+    Default = 'default',
+}

package/src/helpers/getDefaultInputLabel.tsx

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

package/src/types.ts

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

package/types.d.ts

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

package/types.js

@@ -0,0 +1,2 @@
+'use strict';
+